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 »

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:
pre
localStorage.setItem("LSV_Brand_new", 1);

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

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");}/pre

For Inbox button:
pre
localStorage.setItem("LSV_Inbox_new", 1);

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

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

for My Brand Quiz button:
pre
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");}/pre

And this is my customized CSS:
pre
.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;
}/pre

The result is as follows:

Image

I expect all badges have the same text (new). and the positions in the first screenshot in this thread I posted.

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

Adding a badge to NavBar button

Post by Evgene Karachevtsev »

Hello Hawk,

This is incorrect:
premiddleButton.before('New');/pre
In your quotes should be html code.
premiddleButton.before('span class="badge"New/span');/pre
Please pay attention to the id attribute there? This is our paragraph 3, which says that badges must have a UNIQUE ID.

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

Adding a badge to NavBar button

Post by Hawk »

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?

Kateryna Grynko
Posts: 0
Joined: Thu Nov 15, 2012 9:13 am

Adding a badge to NavBar button

Post by Kateryna Grynko »

Hi Hawk,

Sorry, forum cuts the code. Please use this HTML code:precodemiddleButton&#46;before('<span id="badge-page1" class="badge">New</span>');/code/pre

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

Adding a badge to NavBar button

Post by Hawk »

Hi Kateryan,

This is my current code for the three badges:

Before you read it, notice I did not use codemiddleButton&#46;before('New');/code
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:

pre&#47;&#47;NavBar----------------------------------------------------------------------------

localStorage&#46;setItem("LSV_Brand_new", 1);

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

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

&#47;&#47;TopButton-----------------------------------------------------------------------------

localStorage&#46;setItem("LSV_Inbox_new", 1);

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

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

&#47;&#47;middleButton-----------------------------------------------------------------------------

localStorage&#46;setItem("LSV_Brand_new", 1);

var middleButton = $("[name=mobilebutton_249]"),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: "none",
top: middleButtonTop
});

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

There are two issues here, I hope we address them one by one:
ol
liThe third badge is not showing at all
/liliWhen 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?/li
/ol

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

Image

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

Adding a badge to NavBar button

Post by Hawk »

I just received an email stating that this thread will be marked "resolved"!! I do not think it's resolved yet. May I have clarification on this?

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

Adding a badge to NavBar button

Post by Evgene Karachevtsev »

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

Post Reply