• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Inbox & Alert Item Count Styling

Anthony Parsons

Well-known member
#1
I have an issue I'm hoping someone has dealt with, being I want the item count in both the inbox and alerts to remain, not disappear.

The obvious making it visible, easy enough... keeping it visible, not so much.

Screen Shot 2012-08-01 at 5.43.06 PM.png

Problem 1

I want to stop the item count disappearing on hover / activating the menu. I'm not sure whether it disappears on hover or on the menu being triggered. Is it a CSS or JS thing?

Problem 2

You can see the alerts are being cut off on the right. Any solution to correcting that issue / possible ideas?
 

Shelley

Well-known member
#4
Mind if I reg to take a looksy (though jake will probably figure this out)?

Edit: Alerts aren't being cut off with the latest version of firefox
edit: in chrome they are being cropped
edit: alerts not being cropped in ie9
edit: alerts are being cropped in safari for windows
edit: Alerts are not being cropped in Opera

Edit: Time for the master to takeover (Jake) I couldn't figure it out. :confused:
 

Anthony Parsons

Well-known member
#5
I would be happy with #1 being solved at present... I'm sure Mike or Kier would know the answer to that instantly. Helpppppppppppp pleaseeeeeeeeeeeeeeeeeee Mike or Kier...

It sounds like #2 is going to simply need some styling finesse... damn it.
 

Jake Bunce

XenForo moderator
Staff member
#8
By default the javascript removes the bubble if the count is 0. Since your intention is to display the 0 count you need to make a small js edit:

js/xenforo/xenforo.js

Add the red code. This forces the condition to false so it never removes the bubble:

Code:
balloonCounterUpdate:function(a,b){if(a.length){var e=a.find("span.Total"),d=e.text();e.text(b);0&&(!b||b=="0")?a.fadeOut("fast"):a.fadeIn("fast",function(){var e=parseInt(d.replace(/[^\d]/,""),10),e=parseInt(b.replace(/[^\d]/,""),10)-e;if(e>0){var i=a.closest(".Popup").data("XenForo.PopupMenu"),e=c("<a />").css("cursor","pointer").html(a.data("text").replace(/%d/,
e)).click(function(){i.$clicker.trigger("click");return!1});i.menuVisible||i.resetLoader();XenForo.stackAlert(e,1E4,a)}})}}
You are editing the minified javascript so it looks a little hairy due to no formatting.
 

Anthony Parsons

Well-known member
#9
You want to know what's funny Jake? As you found that, I actually found your answer to this elsewhere, hidden away in this forum, which I found via searching Google for the id AlertsMenu_Counter, which I found:

http://xenforo.com/community/threads/stop-alertsmenu_counter-to-dissapear.21461/

This answer of yours still works... as I just removed both references and it worked. I was making the same mistake mentioned in that link, removing only one reference to it. Both works and the zero remains.

Well... the linked answer covers alerts, but not inbox alerts.

As always Jake, you are awesome.
 

Jake Bunce

XenForo moderator
Staff member
#11
You want to know what's funny Jake? As you found that, I actually found your answer to this elsewhere, hidden away in this forum, which I found via searching Google for the id AlertsMenu_Counter, which I found:

http://xenforo.com/community/threads/stop-alertsmenu_counter-to-dissapear.21461/

This answer of yours still works... as I just removed both references and it worked. I was making the same mistake mentioned in that link, removing only one reference to it. Both works and the zero remains.

Well... the linked answer covers alerts, but not inbox alerts.

As always Jake, you are awesome.
That works. :eek:

Is your prior one for alerts, or for inbox alerts?

Hmmm.... nope, that above js suggestion of yours didn't work for the inbox alert.
It works on my test forum for both menus. Dunno.
 

Anthony Parsons

Well-known member
#12
Ok, used your prior example and removed id="ConversationsMenu_Counter" from the inbox alerts from the template as well... that did the trick and stopped the JS triggering to remove the zero count.
 

Anthony Parsons

Well-known member
#13
Ok, it seems I have this worked out, however; there is a trade-off with the alert number not zeroing until you move away from the page. For example, take out id="AlertsMenu_Counter" and it works. Do the same for the corresponding inbox id, and it also remains.

Code:
<strong class="itemCount {xen:if {$visitor.alerts_unread}, '', 'Zero'}"
id="AlertsMenu_Counter" data-text="{xen:phrase you_have_x_new_alerts}">
<span class="Total">{xen:number $visitor.alerts_unread}</span>
<span class="arrow"></span>
</strong>
I ended up having to modify the actual template itself to fix the alert padding issue, as it wasn't CSS as such, but more the way the visitor tabs are done in both code and css, compared to how the admin links are done. I wrote them to replicate towards admin links, and that fixed the issue.