Adding a badge to NavBar button

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:

.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;
}


On page show event, I added:

$("[name=mobilenavbaritem_49]").parent().addClass("ui-badge-container");
$("[name=mobilenavbaritem_49]").before('<span id="badge-page1" class="badge">4</span>');
$(".badge").css("display","block");


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
2 people have
this question
+1
This topic is no longer open for comments or replies.
  • Hello Hawk,

    Could you please check the credentials, they seems to be incorrect.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. indifferent, undecided, unconcerned kidding, amused, unsure, silly happy, confident, thankful, excited sad, anxious, confused, frustrated

  • Hi Evgene,

    Sorry for the confusion. The credentials are as follows:
    1234/star1234
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. indifferent, undecided, unconcerned kidding, amused, unsure, silly happy, confident, thankful, excited sad, anxious, confused, frustrated

  • Hawk,

    Now you have the incorrect selector on button. It should be
    $("[name=MasterNavBar_2_mobilenavbaritem_49]")

    It is better to add separate class to the button and change the class selector
    $("[name=mobilenavbaritem_49]") 

    will be for example
    $(".CLASS")
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. indifferent, undecided, unconcerned kidding, amused, unsure, silly happy, confident, thankful, excited sad, anxious, confused, frustrated

  • 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:

    $("[name=mobilebutton_248]").parent().addClass("ui-badge-container");
    $("[name=mobilebutton_248]").before('New');

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

    $("[name=mobilebutton_249]").parent().addClass("ui-badge-container2");
    $("[name=mobilebutton_249]").before('New');

    var new_val = 1;
    if ((localStorage.getItem("LSV_Brand_new") == new_val)){
    $(".badge2").css("display","block");}
    else {$(".badge2").css("display","none");}


    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:

    $("[name=mobilegroupedbuttons_247_mobilebutton_248]").parent().addClass("ui-badge-container");
    $("[name=mobilegroupedbuttons_247_mobilebutton_248]").before('New');

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

    $("[name=mobilegroupedbuttons_247_mobilebutton_249]").parent().addClass("ui-badge-container2");
    $("[name=mobilegroupedbuttons_247_mobilebutton_249]").before('New');

    var new_val = 1;
    if ((localStorage.getItem("LSV_Brand_new") == new_val)){
    $(".badge2").css("display","block");}
    else {$(".badge2").css("display","none");}


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

  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. indifferent, undecided, unconcerned kidding, amused, unsure, silly happy, confident, thankful, excited sad, anxious, confused, frustrated

  • Hawk,

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

    middleButton.parent().addClass("ui-badge-container");
    middleButton.before('New');

    badge = $(".badge");
    badge.css({
    display: "block",
    top: middleButtonTop
    });
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. indifferent, undecided, unconcerned kidding, amused, unsure, silly happy, confident, thankful, excited sad, anxious, confused, frustrated

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

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

    var new_val = 1;
    if ((localStorage.getItem("LSV_Brand_new") == new_val)){
    $(".badge2").css("display","block");}
    else {$(".badge2").css("display","none");}


    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:

    .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;
    }



    1. I am not sure how to apply this styling to the JS?

    2. The 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)

    3. How to show the badge in a (popup) motion manner (show slowly) and how to slow down hiding?



    Many thanks for your help

  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. indifferent, undecided, unconcerned kidding, amused, unsure, silly happy, confident, thankful, excited sad, anxious, confused, frustrated

  • Hawk,

    Could you please share your project with support@appery.io?
    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/
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. indifferent, undecided, unconcerned kidding, amused, unsure, silly happy, confident, thankful, excited sad, anxious, confused, frustrated

  • Evgene,

    I've sent my project details. As for the animation links, thank you for the advice, I'll have a look and try.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. indifferent, undecided, unconcerned kidding, amused, unsure, silly happy, confident, thankful, excited sad, anxious, confused, frustrated

  • 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:
    New
    New
    New;
    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
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. indifferent, undecided, unconcerned kidding, amused, unsure, silly happy, confident, thankful, excited sad, anxious, confused, frustrated

  • Evegen,

    First and second are clear. However, I am not sure if I caputred the idea of third and fourth. The current script is on page show:

    For NavBar Badge:

    localStorage.setItem("LSV_Brand_new", 1);

    $("[name=MasterNavBar_252_mobilenavbaritem_49]").parent().addClass("ui-badge-container");
    $("[name=MasterNavBar_252_mobilenavbaritem_49]").before('New');

    var new_val = 1;
    if ((localStorage.getItem("LSV_Brand_new") == new_val) || (localStorage.getItem("LSV_Inbox_new") == new_val)){
    $(".badge").css("display","block");}
    else {$(".badge").css("display","none");}


    For Inbox button:

    localStorage.setItem("LSV_Inbox_new", 1);

    $("[name=mobilebutton_250]").parent().addClass("ui-badge-container");
    $("[name=mobilebutton_250]").before('New');

    var new_val = 1;
    if ((localStorage.getItem("LSV_Inbox_new") == new_val)){
    $(".badge").css("display","block");}
    else {$(".badge").css("display","none");}


    for My Brand Quiz button:

    localStorage.setItem("LSV_Brand_new", 1);

    var middleButton = $("[name=mobilebutton_249]"),
    middleButtonTop = middleButton.position().top,
    badge2;
    middleButton.parent().addClass("ui-badge-container2");
    middleButton.before('New');
    badge = $(".badge");
    badge.css({
    display: "none",
    top: middleButtonTop
    });

    var new_val = 1;
    if ((localStorage.getItem("LSV_Brand_new") == new_val)){
    $(".badge").css("display","block");}
    else {$(".badge").css("display","none");}


    And this is my customized CSS:

    .ui-badge-container {
    position: relative;
    }

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


    The result is as follows:



    I expect all badges have the same text (new). and the positions in the first screenshot in this thread I posted.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. indifferent, undecided, unconcerned kidding, amused, unsure, silly happy, confident, thankful, excited sad, anxious, confused, frustrated

  • Hello Hawk,

    This is incorrect:
    middleButton.before('New');

    In your quotes should be html code.
    middleButton.before('New');

    Please pay attention to the id attribute there? This is our paragraph 3, which says that badges must have a UNIQUE ID.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. indifferent, undecided, unconcerned kidding, amused, unsure, silly happy, confident, thankful, excited sad, anxious, confused, frustrated

  • I’m confused
    Evgene,

    While I understand every badge must have a unique ID (badge-page1, badge-page2, badge-page3), I do not understand how each badge can have different position (relatively to its container, one is on top and the other in the middle to the right side)?

    I could not understand the first part of your reply. Should I add html element?
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. indifferent, undecided, unconcerned kidding, amused, unsure, silly happy, confident, thankful, excited sad, anxious, confused, frustrated

  • Hi Hawk,

    Sorry, forum cuts the code. Please use this HTML code:
    middleButton.before('<span id="badge-page1" class="badge">New</span>');
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. indifferent, undecided, unconcerned kidding, amused, unsure, silly happy, confident, thankful, excited sad, anxious, confused, frustrated

  • I’m frustrated
    Hi Kateryan,

    This is my current code for the three badges:

    Before you read it, notice I did not use middleButton.before('New');
    rather, I used the one u advised, but the forum changes it automatically to the once you see below.

    Now please have a look at the script:

    //NavBar----------------------------------------------------------------------------

    localStorage.setItem("LSV_Brand_new", 1);

    $("[name=MasterNavBar_252_mobilenavbaritem_49]").parent().addClass("ui-badge-container");
    $("[name=MasterNavBar_252_mobilenavbaritem_49]").before('New');

    var new_val = 1;
    if ((localStorage.getItem("LSV_Brand_new") == new_val) || (localStorage.getItem("LSV_Inbox_new") == new_val)){
    $(".badge").css("display","block");}
    else {$(".badge").css("display","none");}

    //TopButton-----------------------------------------------------------------------------

    localStorage.setItem("LSV_Inbox_new", 1);

    $("[name=mobilebutton_250]").parent().addClass("ui-badge-container");
    $("[name=mobilebutton_250]").before('New');

    var new_val = 1;
    if ((localStorage.getItem("LSV_Inbox_new") == new_val)){
    $(".badge").css("display","block");}
    else {$(".badge").css("display","none");}

    //middleButton-----------------------------------------------------------------------------

    localStorage.setItem("LSV_Brand_new", 1);

    var middleButton = $("[name=mobilebutton_249]"),middleButtonTop = middleButton.position().top,badge;
    middleButton.parent().addClass("ui-badge-container");
    middleButton.before('New');
    badge = $(".badge");
    badge.css({
    display: "none",
    top: middleButtonTop
    });

    var new_val = 1;
    if ((localStorage.getItem("LSV_Brand_new") == new_val)){
    $(".badge").css("display","block");}
    else {$(".badge").css("display","none");}


    There are two issues here, I hope we address them one by one:

    1. The third badge is not showing at all
    2. When I comment out the third badge script, the two badges for NavBar and topButton show. However, they have similar position. How can I have them with two (relatively) different positions (for example, NavBar on top to the right, while topButton badge on right in the middle (see first screenshot in this thread above). When I had two classes (badge1, badge2), I could easily set the position via CSS, but now I do not how as you told me to use one class for all with different ID's. How can I utilize the ID's in JS and in CSS?



    This is how it looks like using the JS above (only two badges show, and both of them in a complete wrong positions for NavBar and topButton):

  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. indifferent, undecided, unconcerned kidding, amused, unsure, silly happy, confident, thankful, excited sad, anxious, confused, frustrated

  • This reply was removed on 2014-10-13.
    see the change log
  • Hawk,

    Please pay attention at i.4: selector should be by id, not by class, i.e. like this: http://take.ms/V1dwp and the result should be like this: http://take.ms/cbNJ4
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. indifferent, undecided, unconcerned kidding, amused, unsure, silly happy, confident, thankful, excited sad, anxious, confused, frustrated