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:
I expect all badges have the same text (new). and the positions in the first screenshot in this thread I posted.