Adding a badge to NavBar button

This forum contains topics that were moved from Get Satisfaction
Hawk
Posts: 0
Joined: Mon Aug 04, 2014 11:23 am

Adding a badge to NavBar button

Post by Hawk »

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]")&#46;before('<span id="badge-page1" class="badge">4</span>');
$("&#46;badge")&#46;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

Evgene Karachevtsev
Posts: 12
Joined: Mon Apr 28, 2014 1:12 pm

Adding a badge to NavBar button

Post by Evgene Karachevtsev »

Hello Hawk,

Could you please check the credentials, they seems to be incorrect.

Hawk
Posts: 0
Joined: Mon Aug 04, 2014 11:23 am

Adding a badge to NavBar button

Post by Hawk »

Hi Evgene,

Sorry for the confusion. The credentials are as follows:
1234/star1234

Evgene Karachevtsev
Posts: 12
Joined: Mon Apr 28, 2014 1:12 pm

Adding a badge to NavBar button

Post by Evgene Karachevtsev »

Hawk,

Now you have the incorrect selector on button. It should be
pre$("[name=MasterNavBar_2_mobilenavbaritem_49]")/pre
It is better to add separate class to the button and change the class selector
pre$("[name=mobilenavbaritem_49]") /pre
will be for example
pre$("&#46;CLASS")/pre

Hawk
Posts: 0
Joined: Mon Aug 04, 2014 11:23 am

Adding a badge to NavBar button

Post by Hawk »

Thanks Evgene, that worked for NavBar buttone. However, I treid the same method with group buttons and seems that the badge always show on the first button only (no matter what button's name is specified). When tried the following:

pre$("[name=mobilebutton_248]")&#46;parent()&#46;addClass("ui-badge-container");
$("[name=mobilebutton_248]")&#46;before('span class="badge1"New/span');

var new_val = 1;
if ((localStorage&#46;getItem("LSV_Inbox_new") == new_val)){
$("&#46;badge1")&#46;css("display","block");}
else {$("&#46;badge1")&#46;css("display","none");}

$("[name=mobilebutton_249]")&#46;parent()&#46;addClass("ui-badge-container2");
$("[name=mobilebutton_249]")&#46;before('span class="badge2"New/span');

var new_val = 1;
if ((localStorage&#46;getItem("LSV_Brand_new") == new_val)){
$("&#46;badge2")&#46;css("display","block");}
else {$("&#46;badge2")&#46;css("display","none");}/pre

The badge shows only the first button (Inbox) on top as is shown below. Even when I swape the names (for testing) only the top button has the badge.

I also tried to use the group name as follows:

pre$("[name=mobilegroupedbuttons_247_mobilebutton_248]")&#46;parent()&#46;addClass("ui-badge-container");
$("[name=mobilegroupedbuttons_247_mobilebutton_248]")&#46;before('span class="badge1"New/span');

var new_val = 1;
if ((localStorage&#46;getItem("LSV_Inbox_new") == new_val)){
$("&#46;badge1")&#46;css("display","block");}
else {$("&#46;badge1")&#46;css("display","none");}

$("[name=mobilegroupedbuttons_247_mobilebutton_249]")&#46;parent()&#46;addClass("ui-badge-container2");
$("[name=mobilegroupedbuttons_247_mobilebutton_249]")&#46;before('span class="badge2"New/span');

var new_val = 1;
if ((localStorage&#46;getItem("LSV_Brand_new") == new_val)){
$("&#46;badge2")&#46;css("display","block");}
else {$("&#46;badge2")&#46;css("display","none");}/pre

None of the badges appeared!. I deeply appreciate your help

Image

Evgene Karachevtsev
Posts: 12
Joined: Mon Apr 28, 2014 1:12 pm

Adding a badge to NavBar button

Post by Evgene Karachevtsev »

Hawk,

For example if your middle button has name 'b2', your code should be the following:
prevar middleButton = $("[name=b2]"),
middleButtonTop = middleButton&#46;position()&#46;top,
badge;

middleButton&#46;parent()&#46;addClass("ui-badge-container");
middleButton&#46;before('span class="badge"New/span');

badge = $("&#46;badge");
badge&#46;css({
display: "block",
top: middleButtonTop
});/pre

Hawk
Posts: 0
Joined: Mon Aug 04, 2014 11:23 am

Adding a badge to NavBar button

Post by Hawk »

Evgene,
Below screenshot shows how the badge appears on the middlebutton. This is the JS I used:

prevar middleButton = $("[name=mobilebutton_249]"),
middleButtonTop = middleButton&#46;position()&#46;top,
badge2;
middleButton&#46;parent()&#46;addClass("ui-badge-container2");
middleButton&#46;before('New');
badge2 = $("&#46;badge2");
badge2&#46;css({
display: "block",
top: middleButtonTop
});

var new_val = 1;
if ((localStorage&#46;getItem("LSV_Brand_new") == new_val)){
$("&#46;badge2")&#46;css("display","block");}
else {$("&#46;badge2")&#46;css("display","none");}/pre

I want to show it in the same position and style as the one appear on topButton. For that one, I use the following CSS style:

pre&#46;badge2 {
display: none;
background: #BA070F;
color: #fff;
padding: 1px 4px;
position: absolute;
right: -4px;
top: 4px;
z-index: 999;
border-radius: 2em;
border: 2px solid #fff;
font-size: 10px !important;
}/pre

ol
liI am not sure how to apply this styling to the JS?/li
liThe badge is always showing regardless the result of (if) statement follows. How to control that? (for the badge on top Button, IF statement works perfectly)/li
liHow to show the badge in a (popup) motion manner (show slowly) and how to slow down hiding?/li
/ol

Many thanks for your help

Image

Evgene Karachevtsev
Posts: 12
Joined: Mon Apr 28, 2014 1:12 pm

Adding a badge to NavBar button

Post by Evgene Karachevtsev »

Hawk,

Could you please share your project with a href="mailto:support@appery.io" rel="nofollow"support@appery.io/a?
As for animations, you may look how it's done with css transitions or with methods js - hide ( for smooth disappearance ) and animate ( for smooth position changes )
http://api.jquery.com/hide/
http://api.jquery.com/animate/

Hawk
Posts: 0
Joined: Mon Aug 04, 2014 11:23 am

Adding a badge to NavBar button

Post by Hawk »

Evgene,

I've sent my project details. As for the animation links, thank you for the advice, I'll have a look and try.

Evgene Karachevtsev
Posts: 12
Joined: Mon Apr 28, 2014 1:12 pm

Adding a badge to NavBar button

Post by Evgene Karachevtsev »

Hawk,

first, the code must be executed on the event page show, and not load;
secondly, all badges should have a single class badge, and not badge1 or badge2, the same applies to their containers, not ui-badge-container2 etc.;
thirdly, each badge must have a unique ID, for example:
span class="badge"New/span
span class="badge"New/span
span class="badge"New/span;
fourth, if you have multiple badges, you must put in variable a link to the element by its ID and not a class, for example:
badge = $("#badge-page1");
and when all conditions are met you will get something like this http://take.ms/jrH9B

Post Reply