I am following this (https://getsatisfaction.com/apperyio/...). While it works perfectly on other buttons, the badge does not appear on NavBar button.
I followed these steps:
in CSS, I've added:
code.ui-badge-container {
position: relative;
}
.badge {
/display: none;/
background: #BA070F;
color: #fff;
padding: 1px 7px;
position: absolute;
right: 4px;
top: -12px;
z-index: 999;
border-radius: .8em;
border: 2px solid #fff;
}/code
On page show event, I added:
code$("[name=mobilenavbaritem_49]").parent().addClass("ui-badge-container");
$("[name=mobilenavbaritem_49]").before('<span id="badge-page1" class="badge">4</span>');
$(".badge").css("display","block");/code
This shows the badge on the normal button but not on the NavBar button. Noteworthy, NavBar is stored as a customized componenet and it's used across the App pages (same name), I'm not sure if this is relevant.
In order to reproduce the problem:
link:http://appery.io/app/mobile-frame?src...
credentials: 1234/1234star
Navigate: From NavBar choose (Earn Points) - Mevius - Mevius Airstream
The badge should appear on (messages) button in NavBar in (Mevius Airstream) page. The button name is (mobilenavbaritem_49).
Many thanks for your help