Develop Reference

Current selected item when some links are the same

I'm trying to create a stacked navigation list that highlights which item you have selected. It looks like this.
<div class="page-list">
<ul class="nav nav-pills nav-stacked">
<li><a href="Page1.html" > Page1 </a></li>
<li><a href="Page2.html" > Page2 </a></li>
<li><a href="Page3.html" > Page3 </a></li>
<li><a href="Page4.html" > Page4 </a></li>
<li><a href="Page5.html" > Page5 </a></li>
<li><a href="Unavailable.html" > Page6 </a></li>
<li><a href="Unavailable.html" > Page7 </a></li>
</ul>
</div>
The issue I am having is that the last two pages share the same link and I cant seem to get just the selected page to be highlighted in the list.
I was using this for my JavaScript.
<script>
$(function(){
$('a').each(function() {
if ($(this).prop('href') == window.location.href) {
$(this).addClass('current');
}
});
});
</script>
But this causes all links to the same page to highlight.
I tried solving it with this, but now no links highlight when clicked.
<script>
$(".page-list a").click(function() {
$(this).parent().previoussibling().find('a').removeClass('current');
$(this).addClass("current");
});
</script>

One way to fix this would be to create a query string to indicate which link should be highlighted.
...
<li><a href="Unavailable.html?page=6" > Page6 </a></li>
<li><a href="Unavailable.html?page=7" > Page7 </a></li>
...
Then in Javascript, read the query string and decide which page to highlight. This StackOverflow question can help you read the query string.
You could also accomplish this by using cookies if you don't want your users to see www.yourwebsite.com/Unavailable.html?page=7. See this tutorial for using cookies in JavaScript. There are a number of libraries out there that can help you when using cookies if you prefer that route.
Which ever way you choose to pass the information on to the next page, you will need to add an id to the a tags (or some other way to uniquely identify each link) so you can highlight the appropriate link.
Here is an example using the query string idea:
<div class="page-list">
<ul class="nav nav-pills nav-stacked">
...
<li><a id="6" href="Unavailable.html?page=6" > Page6 </a></li>
<li><a id="7" href="Unavailable.html?page=7" > Page7 </a></li>
</ul>
</div>
<script>
$(function(){
$('a').each(function() {
if ($(this).attr('id') == getParameterByName('page')) {
$(this).addClass('current');
}
});
});
function getParameterByName(name) {
//this code is taken directly from https://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript#answer-901144
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
</script>

How to expand certain part of a collapsible menu on page load based on a value

JSFiddle: http://jsfiddle.net/5qweu58f/4/
HTML (generated using XSLT):
<div id="dvExpProvHolder" class="hidOverflow innerDivCenter">
<ul class="uSPStyle" id="uSPStyle">
<li class="setRelative">
<a class="tfLink clickMe current" title="Care" data-toggle=".tfLink1" id="current" href="javascript:void(0);"><img src="theImages/imgMenu.png" id="imgFirstM" class="imgExpCol" />Care</a>
<ul class="uSPStyle uSPInner" style="width: 80%;">
<li><a class="tfLink clickMe" title="This is sub" data-toggle=".tf1SLink1" href="javascript:void(0);">This is sub</a></li>
</ul>
</li>
<li>
<a class="tfLink clickMe" title="Breast Cancer" data-toggle=".tfLink2" href="javascript:void(0);"><img src="theImages/imgMenu.png" id="imgFirstM" class="imgExpCol" />BC</a>
<ul class="uSPStyle uSPInner" style="width: 80%;">
<li><a class="tfLink clickMe" title="OUR LINK" data-toggle=".tf1SLink2" href="javascript:void(0);">OUR LINK</a></li>
</ul>
</li>
<li>
<a class="tfLink clickMe" title="About" data-toggle=".tfLink3" href="javascript:void(0);">About</a>
</li>
<li>
<a class="tfLink clickMe" title="Anxiety" data-toggle=".tfLink4" href="javascript:void(0);">Anxiety</a>
</li>
<li>
<a class="tfLink clickMe" title="Services" data-toggle=".tfLink5" href="javascript:void(0);">Services</a>
</li>
</ul>
</div>
Why doesn't the first UL lose the current class when another UL
is clicked? everything else works as expected.
The issue comes up when I would want the visitor to see BC > OUR LINK
section which shows "This is for second link sublink 1" without having to come to the page and then click on it. But because
they are all in one page, there is no way to do that out of the box.
I was wondering if there is a way to specify a query string in the
Url and use that to go directly to the sublink? For example:
http://www.myweb1.com/pages.aspx?id=098&menulink=2.1. The 2.1 would represent it is the second main menu and the first submenu. Is there
any way to incorporate that into my Jquery script?

Expanding on the examples from the authoritative question on the subject (How can I get query string values in JavaScript?) to solve this particular problem, you could use any of those methods for parsing window.location and taking action based on a query string parameter.
A working example is below, using a fake URL instead of window.location, as the snippet is in a sandboxed frame. This example uses URI.js, but there are many other options.
function log (o) {
var el = document.createElement('div');
el.innerHTML = o;
document.body.appendChild(el);
}
document.getElementById('button-1').onclick = function () {
log('Button 1 clicked!');
};
document.getElementById('button-2').onclick = function () {
log('Button 2 clicked!');
};
//Grab the "click" query string parameter. The button with the specified ID will be clicked.
//Using a fake URL instead of window.location inside this sandboxed frame
document.getElementById(URI('http://example.com?click=button-1').search(true)['click']).click();
<script src="https://cdnjs.cloudflare.com/ajax/libs/URI.js/1.16.1/URI.js"></script>
<button id="button-1">Button 1 - Auto-Clicked</button>
<button id="button-2">Button 2 - Not Auto-Clicked</button>

Why does this work? window.location.href

Example link: http://localhost/test/page.php?success
I'm curious about this. And I'm also new to JavaScript so it's not really a surprise but I understand the code below, I just do not know why it works away with what I seem to understand. See this question for more reference.
I have this JavaScript:
<script type="text/javascript">
jQuery(function($) {
var path = window.location.href.split( '?' )[0];
$('ul a').each(function() {
if (this.href === path) {
$(this).addClass('sub-menu active');
$(this).parent().closest("li").addClass('active');
$(this).parent().parent().closest("li").addClass('active');
}
});
});
</script>
The Sidebar:
<li class="sub-menu"> // Sidebar with no submenu
<a class="" href="page1.php">
<i class="icon-calendar"></i>
<span>This is page 1</span>
</a>
</li>
<li class="sub-menu"> // Sidebar with a submenu
<a href="javascript:;" class="">
<i class="icon-group"></i>
<span>This has sub pages</span>
<span class="arrow"></span>
</a>
<ul class="sub">
<li><a class="" href="page2.php">This is page 2</a></li>
<li><a class="" href="page3.php">This is page 3</a></li>
</ul>
</li>
The code puts an active class to the menu on the sidebar which href is equals to the current url. But window.location.href returns the whole url but what is inside the href's are just the page.php. So why does this.href === path work? When window.location.href.split( '?' )[0] returns http://localhost/test/page.php and the href is just page.php.

The href property of an anchor is normalized to an absolute value.
See this example:
HTML:
Test
JS:
var a = document.querySelector('a');
console.log(a.href);

In this instance the relative URL is being resolved to the location of the document containing the a element. You can use the base element to control the resolution of relative URLs.

How to add class dynamically using ajax.?

When i click on any name I have to add class "active" for selected name's anchor tag and as well as department names of that user.
<ul id="orglistingid">
<li>
<a>Sales </a> <!--Deparemtn Name -->
<ul id="dId">
<li>
<a>Rahul </a> <!--User -->
</li>
<li>
<a>Nitin </a>
</li>
</ul>
</li>
</ul>
<ul id="orglistingid">
<li>
<a class="active">Development</a>
<ul>
<li id="dId">
<a class="active">Rokesh </a>
</li>
<li>
<a>Preeti</a>
</li>
</ul>
</li>
</ul>
I am using below code, can anyone tell what correction i need to do..?
if (orgID != null && orgID == 'dId') {
$("#dId li a").removeClass("orglistactive");
$(this).attr("class","orglistactive");
var parentID = $(e.target).parent().parent().parent().attr("id");
alert($(e.target).parent().parent().parent().attr("id"));
$("#"+parentID+" a").attr("class","orglistactive");
}

Looks like you are trying to achieve something as shown below:
<script type="text/javascript">
var orgID = $('#dId');
if(orgID.attr('id') == 'dId'){
orgID.find('>li>a').addClass("orglistactive");
var parentID = orgID.attr("id");
alert(orgID.attr("id"));
}
</script>
But couple of things are found, are not correct from html and jquery perspective.
Id are unique but you have used 'dId' for more than one time.
e.target works only when there is an event attached with an element or can be captured using "window.event || e". In your code I could not see the purpose of e.target
Hope this helps! :)

This can be quickly achieved with a little of jQuery.
First Approach
$('ul a').click(function(){
$(this).addClass('orglistactive');
$(this).parent().parent().parent().find('a:first').addClass('orglistactive');
});
Take a look at a live demo: http://jsfiddle.net/augusto1982/6xM2P/
Second Approach
One thing to keep in mind is that this code works ok if there's no other list in the page. If this is not the case, you should use some CSS class to determine the object to bind the click function. Otherwise, the jQuery selector gets a bit messy.
$('#orglistingid li ul li a').click(function(){
$(this).addClass('orglistactive');
$(this).parent().parent().parent().find('a:first').addClass('orglistactive');
});
Example: http://jsfiddle.net/augusto1982/GXcvD/
Third Approach
I would also recommend you to add a class to each user anchor, to make it easier.
HTML
<ul id="orglistingid">
<li>
<a>Sales </a> <!--Deparemtn Name -->
<ul id="dId">
<li>
<a class='user'>Rahul </a> <!--User -->
</li>
<li>
<a class='user'>Nitin </a>
</li>
</ul>
</li>
</ul>
<ul id="orglistingid">
<li>
<a class="active">Development</a>
<ul>
<li id="dId">
<a class="active user">Rokesh </a>
</li>
<li>
<a class='user'>Preeti</a>
</li>
</ul>
</li>
</ul>
jQuery
$('.user').click(function(){
$(this).addClass('orglistactive');
$(this).parent().parent().parent().find('a:first').addClass('orglistactive');
});
Take a look at this second example: http://jsfiddle.net/augusto1982/GW4mt/
Final Approach
In order to avoid all the parent()...parent() calls, you could use the closest method, but you need to change your HTML a bit.
HTML
<ul id="orglistingid">
<li class='department'>
<a>Sales </a> <!--Deparemtn Name -->
<ul id="dId">
<li>
<a class='user'>Rahul </a> <!--User -->
</li>
<li>
<a class='user'>Nitin </a>
</li>
</ul>
</li>
</ul>
<ul id="orglistingid">
<li class='department'>
<a class="active">Development</a>
<ul>
<li id="dId">
<a class="active user">Rokesh </a>
</li>
<li>
<a class='user'>Preeti</a>
</li>
</ul>
</li>
</ul>
jQuery
$('.user').click(function(){
$(this).addClass('orglistactive');
$(this).closest('.department').find('a:first').addClass('orglistactive');
});
Demo: http://jsfiddle.net/augusto1982/e7PVF/
Like other comments, I'd recommend you to have unique IDs. While this is not a restriction, is a best practice.

Underline the main header when the sub header is clicked

HTML:
<div id=wrapDesktopNavBar>
<ul class="desktopNavBar">
<li><a class="firstLevel" href="#">header 1</a>
</li>
<li><a onclick....></a><a class="firstLevel" href="#">header 2</a>
<ul>
<li><a class="secondLevel" href="#">1st sub header</a>
<li><a class="secondLevel" href="#">2nd sub header</a>
<li><a class="secondLevel" href="#">3rd sub header</a>
</ul>
<li><a class="firstLevel" href="#">header 3</a>
</li>
</ul>
</div>
JS:
$(function () {
$('.mainNavSection').hide();
$('.desktopNavBar a').bind('click', function (e) {
$('.desktopNavBar a.current').removeClass('current');
$('.mainNavSection:visible').hide();
$(this.hash).show();
$(this).addClass('current');
$(this).closest('.desktopNavBar > li').find('a:first').addClass('current');
e.preventDefault();
}).filter(':first').click();
});
Hi the above is my html and javascript. I have a class called "current" which simply underlines the header and its subheader when it's being clicked. I want to allow the main header to be underlined when the sub header is being clicked. I've tried $(this).closest('.desktopNavBar > li').find('a:first').addClass('current'); but it only underlines the first a tag and not the second a tag. I want the 2nd tag to be underlined. And, i can't swap my 2nd tag with my 1st a because it affects smth else.
is there soemthing like .find(a:second) to allow me to add class to the 2nd a tag?