We Keep Coding

How can I keep class active after refreshing the page (using jQuery)

I have been searching for whole day and found several examples but none of them work correctly. I have a navigation bar and I want to keep class active after clicking on it and refreshing page but it gets lost.
This is my code:
HTML
<li class="sub-menu" style="border-bottom: 1px solid grey;">
<a class="menuItem active" href="#Url.Action("Index", "Administrator")">
<i class="fa fa-th"></i>
<span>Index</span>
</a>
</li>
<li class="sub-menu">
<a class="menuItem normal" href="#Url.Action("Products", "Administrator")">
<i class="fa fa-shopping-cart"></i>
<span>product</span>
</a>
</li>
Javascript
var retrievedObject = localStorage.getItem('classChange');
if (retrievedObject) {
$('.menuItem').addClass(retrievedObject)
}
$(".menuItem").click(function () {
if ($(this).hasClass("normal")) {
$(this).removeClass('normal').addClass('active');
localStorage.setItem('classChange', 'active');
} else {
$(this).removeClass('active').addClass('normal');
localStorage.setItem('classChange', 'normal');
}
});
I expected to change class on active after click but all classes change after click, I understand why it happens but don't know how to fix it.

Can you give each element an id value and, in the function, store in the local storage the id of the element and the class? Then, on reload check for the both id's?
And if you need for more elements you can save an array of the id's and then use it to loop between all id's if necessary.
So something like this:
var ids = ['id1','id2'];
for(i of ids) {
var retrievedObject = localStorage.getItem(i);
if (retrievedObject) {
var id = "#" + i;
$(id).addClass(retrievedObject);
}
}
$(".menuItem").click(function (event) {
if ($(this).hasClass("normal")) {
$(this).removeClass('normal').addClass('active');
localStorage.setItem('classChange', 'active');
} else {
$(this).removeClass('active').addClass('normal');
localStorage.setItem(event.target.id, 'normal');
}
});

The code
if (retrievedObject) {
$('.menuItem').addClass(retrievedObject)
}
should be wrapped on jQuery.ready().

Unexpected behavior with mouseup

When I click on the menu, the menu shows up, but when the pointer is moved away from the menu, it hides after 2-5 seconds.
I want the menu to toggle when clicked, and explicitly hide when I click anywhere else on the page, as seen on this demo.
this fiddle
My code is as follows:
$(document).ready(function() {
$(".MyAccount").click(function() {
var X = $(this).attr('id');
if (X == 1) {
$(".submenu").hide();
$(this).attr('id', '0');
} else {
$(".submenu").show();
$(this).attr('id', '1');
}
});
//Mouseup textarea false
$(".submenu").mouseup(function() {
return false
});
$(".myaccount").mouseup(function() {
return false
});
//Textarea without editing.
$(document).mouseup(function() {
$(".submenu").hide();
$(".MyAccount").attr('id', '');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="MyAllMenu" style='margin: 50px'>
<div class="MyMenu">
<a class="MyAccount">
<span>My Settings</span>
</a>
<div class="submenu" style="display: none;">
<ul class="AllMenuList">
<li>
Dashboard
</li>
<li>
Profile
</li>
<li>
Settings
</li>
<li>
Send Feedback
</li>
<li>
Sign Out
</li>
</ul>
</div>
</div>
</div>

check on FIDDLE . onclick hide/show menu working now . i have added not(".myaccount",".submenu") to mouse up event of document.
$(document).ready(function() {
$(".MyAccount").click(function () {
var X = $(this).attr('id');
if (X == '1') {
$(".submenu").hide();
$(this).attr('id', '0');
}
else {
$(".submenu").show();
$(this).attr('id', '1');
}
});
//Textarea without editing.
$(document).not(".myaccount",".submenu").mouseup(function () {
$(".submenu").hide();
$(".MyAccount").attr('id', '');
});
});

The problem was that i have a dictionary application that reads any text from the page on hover, and when disabling this feature, every thing works as it should be.
I didn't notice that because I tried on two computers and it happened that i was using this app on both of them.

How to dynamically add a class to li item and change its background color using javascript and css

Here I have a list, what I want to do is I need to change the list ( li ) background color to different one after click on a specific list item. the thing is once it click on the link page will be redirected and refresh. please can me suggest a solution for to get this done?
<div id="main-menu">
<ul id="main-menu-list">
<li id="menu-home">Home</li>
<li id="menu-profile">My Profile</li>
<li id="menu-dashboard">My Dashboard</li>
<li id="menu-search">Search</li>
</ul>
</div>
what i did for this :
Java Script :
var make_button_active = function()
{
//Get item siblings
var siblings =($(this).siblings());
//Remove active class on all buttons
siblings.each(function (index)
{
$(this).removeClass('active');
}
)
//Add the clicked button class
$(this).addClass('active');
}
//Attach events to menu
$(document).ready(
function()
{
$("#main-menu li").click(make_button_active);
}
)
CSS :
#main-menu-list li.active {
background: #0040FF;
}

It's a little difficult to tell exactly what you want to do, but here's some quick and dirty (and untested) code:
/// when we click on an `a` tag inside the `#main-menu-list`...
$('#main-menu-list').on('click', 'a', function(e) {
// stop the link from firing
e.preventDefault();
e.stopPropagation();
// change the list item's background to green
$(this).closest('li').addClass('myClassName').css('background-color', 'green');
// do anything else, e.g. load in pages via ajax...
});
You could use CSS to apply the green background color, instead of jQuery:
.myClassName { background-color: green; }
This will stop the page from navigating, and I don't know if that's your intention. If you want to check the currently-loaded page against the menu to find the current item, you could do this (on page load) instead:
var currentPage = window.location.pathname;
$('#main-menu-list').find('a[href^="' + currentPage + '"]').closest('li').addClass('active');
EDIT:
Your amended Javascript code can be simplified to the following:
$('#main-menu li').on('click', 'a', function (e) {
e.preventDefault();
e.stopPropagation();
// only do the following if the clicked link isn't already active
if(!$(this).closest('li').hasClass('active')) {
$(this).closest('ul').find('.active').removeClass('active');
$(this).closest('li').addClass('active');
// load in your content via ajax, etc.
}
});
JSFiddle example

For each page you can add a class to the current list item that has "where the user is"..
CSS:
.selectedItem{
background-color: orange;//whatever color your want for the selected tab..
}
Then for each of your pages,
say you're in Dashboard.html
your menu code will look like:
<div id="main-menu">
<ul id="main-menu-list">
<li id="menu-home">Home</li>
<li id="menu-profile">My Profile</li>
<li id="menu-dashboard" class="selectedItem">My Dashboard</li>
<li id="menu-search">Search</li>
</ul>
</div>
in profile.html:
<div id="main-menu">
<ul id="main-menu-list">
<li id="menu-home">Home</li>
<li id="menu-profile" class="selectedItem">My Profile</li>
<li id="menu-dashboard">My Dashboard</li>
<li id="menu-search">Search</li>
</ul>
</div>
and so on..

You need to change the background color when the document is loaded (i.e. in document.ready).
Then you need a mechanism to connect the currently loaded page to one of your list items.
$(document).ready(function(){
//get the url from the current location or in some other way that suits your solution
//perhaps use window.location.pathname
var moduleId = "dashboard" // hardcoded to dashboard to make the point :);
$("#menu-"+moduleId).css("background-color", "#ccc");
});
http://jsfiddle.net/9JaVn/1/

Iterate through list and show message when empty jQuery

I want to display a message when the <section> is “empty”. Inside the <section>, I can have an unknown number of <ul> and inside it an unknown number of <li>. When I click on “x” button it removes that <li>. Here’s the HTML:
<section>
<ul>
<li class="row row--half-padding-top-bottom">
<span>October 2013</span>
</li>
<li class="notification notification--new">
<span>
<span>Franck Ribery</span>
<span>Bayern Munich</span>
</span>
<span class="accept-ignore-container">
<button class="js-animate-onclick--parent" title="Accept">Accept</button>
<button class="js-connect-invite--ignore">×</button>
</span>
</li>
<li class="notification notification--new">
<span>
<span>Arjen Robben</span>
<span>Bayern Munich</span>
</span>
<span class="accept-ignore-container">
<button class="js-animate-onclick--parent" title="Accept">Accept</button>
<button class="js-connect-invite--ignore">×</button>
</span>
</li>
</ul>
<ul>
<li class="row row--half-padding-top-bottom">
<span>September 2013</span>
</li>
<li class="notification notification--new">
<span>
<span>Franck Ribery</span>
<span>Bayern Munich</span>
</span>
<span class="accept-ignore-container">
<button class="js-animate-onclick--parent" title="Accept">Accept</button>
<button class="js-connect-invite--ignore">×</button>
</span>
</li>
</ul>
</section>
I want to ignore the <li> element that shows the date (hence the “empty”, because it’s not really empty). To do that, I check if the <li> has a class .notification. If it has, increase the counter. I do that upon clicking the “x” button that has a class .js-connect-invite--ignore:
var counter;
$('.js-connect-invite--ignore').on('click touchstart', function() {
var ul = $(this).closest('section').children();
$(ul).each(function() {
var li = $(this).children();
counter = 0;
$(li).each(function() {
if ($(this).is('.notification')) {
console.log('yes');
counter ++;
}
})
})
console.log(counter);
})
See demo: http://jsfiddle.net/CCECK/
However, it’s not working properly as the logic is wrong. Do I need to add two counters?
How can upon clicking “x” check all the other elements and if that is the last <li class="notification"> display an alert? Thanks!

Basically you reset the counter within each ul, so you always end up with the number of li elements of the last ul, which is 1. So if you reset the counter before iterating all the ul elements and also remove the .notification element on clicking the button then you can figure out when only one has been left.
You can try the following,
http://jsfiddle.net/Gd2kS/
js
var counter;
$('.js-connect-invite--ignore').on('click touchstart', function() {
var ul = $(this).closest('section').children();
counter = 0;
$(ul).each(function() {
var li = $(this).children();
$(li).each(function() {
if ($(this).is('.notification')) {
console.log('yes');
counter ++;
}
});
});
console.log(counter);
if(counter==1){
alert("last one left!!");
}else{
$(this).parents('.notification').remove();
}
})
EDIT - response to comments (hiding element with class .visuallyhidden instead of removing element)
var counter;
$('.js-connect-invite--ignore').on('click touchstart', function() {
var ul = $(this).closest('section').children();
counter = 0;
$(ul).each(function() {
var li = $(this).children();
$(li).each(function() {
if ($(this).is('.notification')
&& !$(this).is('.visuallyhidden')) {/*<- modify the condition*/
console.log($(this));
console.log('yes');
counter ++;
}
});
});
console.log(counter);
if(counter==1){
alert("last one left!!");
}else{
/*modify the removal*/
//$(this).parents('.notification').remove();
$(this).parents('.notification').addClass("visuallyhidden");
}
})

check URL for text and then add class to li using jquery or js

My URLs look like this:
http://www.site.co.uk/en-us/aboutus/abgroup.aspx
http://www.site.co.uk/en-us/casestudies.aspx
Here is the menu HTML markup
<ul class="sf-menu">
<li class="first">Home</li>
<li class="">About Us</li>
<li class="">Case Studies</li>
</ul>
How can I read the URL and look for /aboutus/ and highlight that particular list item?
I would also like to do this with casestudies << this is different as it doesnt have a sub directory.
I would like to use jquery? I think i need to parse the URL? and then check for the words and then add a class or bold to the li ??
edit: i want to know what the URL in the browser is, it should match the check in the jquery and then make the li bold or add a class.

Simply:
$('a[href*="/aboutus/"]').css('color', 'red');
See the jsFiddle Example.
Update:
If you want to know if the current URL in the browser matches one of the links then use this:
$('a[href*="'+window.location.href+'"]').css('color', 'red');

Give each of your menu elements an ID:
<ul class="sf-menu">
<li class="first" id="home">Home</li>
<li class="" id="aboutus">About Us</li>
<li class="" id="casestudies">Case Studies</li>
</ul>
And use this jQuery:
$(function() {
var currentPage = window.location.href.split("/")[4]);​​​​​​
$(".sf-menu li")each(function() {
if($(this).attr("href").indexOf(currentPage) > -1) $(this).addClass("highlight");
});
}
​

Nothing too sophisticated about this approach:
$(document).ready(function() {
$("ul.sf-menu li a").each(function() {
if ($(this).attr('href').match(/aboutus/) && window.location.match(/aboutus/)) {
$(this).parent().addClass('aboutus-highlight');
}
if ($(this).attr('href').match(/casestudies/) && window.location.match(/casestudies/)) {
$(this).parent().addClass('casestudies-highlight');
}
});
});

<?php if ($_SERVER["SCRIPT_NAME"] == "/en-us/aboutus/abgroup.aspx") { //whatever } ?>
oh you want js, here:
<script style='text/javascript'>
function checkURL() {
if(window.location == "http://www.site.co.uk/en-us/aboutus/home.aspx") {
document.getElementById('home').style.background = "yellow";
} else if (window.location == "http://www.site.co.uk/en-us/aboutus/abgroup.aspx") {
document.getElementById('abgroup').style.background = "yellow";
} else {
document.getElementById('casestudies').style.background = "yellow";
}
}
</script>
<body onload='checkURL()'>
<ul class="sf-menu">
<li class="first" id='home'>Home</li>
<li class="" id='abgroup'>About Us</li>
<li class="" id='casestudies'>Case Studies</li>
</ul>
yep that works

If you want to highlight any page under /aboutus/ - that is, you don't have just this one page, but several, but you do want the about us menu item to highlight:
if(window.location.indexOf('aboutus') != -1){
$('.sf-menu a[href$="aboutus/abgroup.aspx"]).addClass('here');
}
Then do your styling:
.sf-menu .here { background: red; }
Or whatever else you want.

You don't need to parse the URL as the href should match it (based on your example), so just this should work.
$('a[href=' + window.location.toString() +']').parents('ul').eq(0).addClass('highlight');