I have a basic menu structure on my blog using code below. I've tried every snipped and also doing some of similar topics here but nothing works.
All I want to do is to add active class to my navigation menu based on url. So the visitors or user on the website knows on which page or part of the site he is on.
So, can someone please explain simply where and how to add in javascript to do this ?
Menu structure
<div id="navigation">
<div class="backer" style="position: relative;">
<div class="header-inner-wrap">
<div class="header section" id="header">
<div class="widget Header" data-version="1" id="Header1">
<h1><div id="header-inner">
</div></h1>
</div></div>
</div>
<nav class="main-nav" itemscope="itemscope" role="navigation">
<ul class="menu">
<li>About</li>
<li>Tutorial</li>
<li>Tips</li>
</ul>
</nav>
</div>
</div>
Javascript:
$(function() {
var pgurl = window.location.href.substr(window.location.href
.lastIndexOf("/")+1);
$("menu li a").each(function(){
if($(this).attr("href") == pgurl || $(this).attr("href") == '' )
$(this).addClass("active");
})
});
CSS:
.menu li .active{border-bottom:3px blue solid;}
Thanks in advance
You may want to check that your selector for menu class is matching something:
$("menu li a").each(function(){
ahould be
$(".menu li a").each(function(){
EDIT: Based on new information, the following change should fix your problem.
Change from
var pgurl = window.location.href.substr(window.location.href.lastIndexOf("/")+1);
to
var pgurl = window.location.href;
And the or part of your condition is unnecessary. So change from this
$("menu li a").each(function(){
if($(this).attr("href") == pgurl || $(this).attr("href") == '' )
$(this).addClass("active");
})
to this
$(".menu li a").each(function(){
if($(this).attr("href") == pgurl){
$(this).addClass("active");
}
});
Apart from this solving your immediate problem, you should endeavour to learn javascript properly instead of copying and using snippets, so you can easily analyze your code and detect the cause of your issue.
Related
Right now, I'm trying to build a vertical menu that will have a drop down sub menu below it.
Below is my HTML and the jQuery function I am using:
$(function() {
$('#menusomething > li').click(function(e) {
e.stopPropagation();
var $el = $('ul', this);
$('#menusomething > li > ul').not($el).slideUp();
$el.stop(true, true).slideToggle(400);
});
$('#menusomething > li > ul > li').click(function(e) {
e.stopImmediatePropagation();
});
});
<div id="navmenu">
<ul id="menusomething" style="padding-left:30px">
<li>HOME</li>
<li>ABOUT</li>
<li>CHAPTERS</li>
<ul class="submenu">
<li>Dallas</li>
<li>Los Angeles</li>
<li>New York</li>
<li>Northern California</li>
<li>Orange County</li>
<li>Phoenix</li>
<li>San Diego</li>
<li>Washington DC</li>
</ul>
<li>MEMBER SERVICES</li>
Figured out the answer for anyone who sees this. First had to move the closing li tag from chapters to the end of .submenu Then used this and now it works as wanted.
$(function() {
$('#menusomething li > .submenu').parent().click(function() {
var submenu = $(this).children('.submenu');
if ( $(submenu).is(':hidden') ) {
$(submenu).slideDown(400);
} else {
$(submenu).slideUp(400);
}
});
});
The following code does what I believe you desire: Have a <ul> element that is the nextElementSibling of the first level <li> element slide open and closed when it is clicked. As you mentioned in comments that you desired, it now starts closed due to adding style="display: none;" to the <ul>.
Note: From a user interface perspective, the <li> entries which don't have sub-menus, or are otherwise links, should not have the text enclosed in <a> tags. With the <a> tags the user will think they are clickable, when a click does nothing. This is confusing to a user. It appears that you may have some be sub-menus and some be direct links. If possible, there should be some visual difference between the two types to hint to the user as to what will happen when they click.
Along with other issues, your HTML has nothing that will match either the '#menusomething > li > ul' or the '#menusomething > li > ul > li' selectors. Specifically, you have no <UL> elements that are children of <LI> elements.
$(function() {
$('#menusomething > li').click(function(e) {
e.stopPropagation();
var nextSib = this.nextElementSibling;
if(nextSib && nextSib.nodeName === 'UL') {
//If we get here the nextSib exists and is a <UL> that immediately follows
// the <LI> which was clicked.
$(nextSib).slideToggle(400);
}
});
$('#menusomething > ul > li').click(function(e) {
console.log('Clicked on chapter: ' + this.textContent);
e.stopImmediatePropagation();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="navmenu">
<ul id="menusomething" style="padding-left:30px">
<li>HOME</li>
<li>ABOUT</li>
<li>CHAPTERS</li>
<ul class="submenu" style="display: none;">
<li>Dallas</li>
<li>Los Angeles</li>
<li>New York</li>
<li>Northern California</li>
<li>Orange County</li>
<li>Phoenix</li>
<li>San Diego</li>
<li>Washington DC</li>
</ul>
<li>MEMBER SERVICES</li>
</ul>
</div>
In my horizontal menu / submenu I'm coding I have a class="hidden" on the subMenuBarWrapper ul that I'd like to remove on the active ul on mouseenter.
Currently I have .toggle which is okay but I'd prefer the "class" way instead. Could someone help me with a possible solution? Thanks.
HTML
<div class="subMenuBarWrapper">
<ul data-parentid="1" class="hidden">
<li class="">
<a href="etc....</a>
</li>
</ul>
</div>
JS
$('.nav_options li a').on('mouseenter', function () {
var targetmatch = $(this).attr('data-submenunum');
$('.subMenuBarWrapper ul').each(function () {
$(this).toggle(targetmatch.length < 1 || $(this).attr('data-parentid').indexOf(targetmatch) > -1);
});
});
You can use your exact same logic and use toggleClass():
$(this).toggleClass('hidden', targetmatch.length < 1 || $(this).data('parentid').indexOf(targetmatch) > -1);
The first argument is the class name to use, and the second is a boolean to determine whether this should be added to or removed from the element in question. Also, note the use of .data() over .attr('data-...')
I have a toggle slide which does not work. Spend hours trying/learning to edit and rewrite this thing, but somehow the visbible and inviseble slidetoggle doesnt work.
Could someone please help me with the js script: SEE THE FIDDLE
JS:
$('.header .ullie').hide();
$('.header h2 a').click(function() {
$(".header h2").not(this).next(".header .ullie").slideUp("slow");
$(this).next(".header .ullie").slideToggle("slow");
return false;
});
$('.header h3 a').click(function() {
$(".header h3").not(this).next(".header .ullie").slideUp("slow");
$(this).next(".header .ullie").slideToggle("slow");
return false;
});
HTML:
<div id="foldercontents">
<ul class="ullie">
<li class="header">
<h2>testbutton</h2>
<ul class="ullie">
<li class="foldercontent">
<h3>title</h3>
<ul class="ullie"><li>row 1</li></ul>
</li></ul>
</li>
<!-- second, duplicated from first -->
<li class="header">
<h2>testbutton2</h2>
<ul class="ullie">
<li class="foldercontent">
<h3>title</h3>
<ul class="ullie"><li>row 2</li></ul>
</li></ul>
</li>
</ul>
</div>
SEE THE FIDDLE
*ADDED JQUERY LIBRARY
I assume you're looking for something like this
$('ul li ul').hide();
$('.header > * > a, .foldercontent > * > a').click(function () {
$(this).parent().siblings().slideToggle("slow");
});
You could also use margin:0; padding:0; to prevent the jumping instead of overflow:hidden, but that's up to you
Also note that you don't need the <a> tags, you could apply them to just the headers themselves if you'd like to
I have an accordion menu that the active link drops down the menu, loads an external page into a div, then changes the banner on the same click. I have everything working except for the banner image changing out. I thought I had the code right, but something seems to be missing, and I can't figure it out.
Here is my html:
<section id="commercialBanner">
<img src="images/catalog/indoorBanner.jpg"/>
</section>
<section id="accordionNav">
<ul id="nav">
<li id="indoorEntrance" class="category"><a class="ext" id="indoor" href="montage.html">Indoor Entrance</a>
<ul id="indoorEntranceSubmenu" class="sideSub">
<li>Ecomat Squares</li>
<li>Gatekeeper</li>
<li>Absorba</li>
</ul>
</li>
<li id="outdoorEntrance" class="category"><a id="outdoor" class="ext" href="aquaFlow.html">Outdoor Mats</a>
<ul id="outdoorEntranceSubmenu" class="sideSub">
<li>AquaFlow</li>
</ul>
</li>
</ul>
<section id="catalog"></section>
Here is my Script:
$('a.ext').click(function (event){
event.preventDefault();
$('#catalog').load(this.href);
});
$('.category > a').click(function(evt) {
if ($(this).attr('class') != 'active'){
$('#nav li ul').hide();
$(this).next().show()
// $(this).next('li > a').trigger('click')
$('#nav li a').removeClass('active');
$(this).addClass('active');
};
if ($('#indoor').attr('class') == 'active'){
$("#commercialBanner img").attr("src", "images/catalog/indoorBanner.jpg");
};
if ($('#outdoor').attr('class') == 'active'){
$("#commercialBanner img").attr("src", "images/catalog/outdoorBanner.jpg");
};
});
You seem to be checking the class attribute incorrectly - you have more than one class on an element, so:
$('#indoor').attr('class') is 'ext active' or 'ext'
As noted by #epascarello: use hasClass("active").
See this:
jQuery's attr - return multiple classes not just the 1st
There are several advanced jQuery plugins which filter <div>s by corresponding id or class. This is indeed based on a simple jQuery idea, but I am not sure how to implement it. Consider a menu to show/hide the content as
<ul id="filters" class="menu" indicator="filter">
<li>All</li>
<li>First</li>
<li>Third</li>
</ul>
and we want to control the display of contents:
<div class="box first">Something</div>
<div class="box first third">Something</div>
<div class="box third">Something</div>
What is the simplest jQuery Javascript code to do so?
By default, all <div>s are shown, when we click on a <li> from menu (e.g. FIRST), jQuery will filter the <div>s to only show <div>s in which the class is "first".
Don't use attribute "indicator" as it doesn't exist. Use the class element as below. Also the A elements are not needed.
<ul id="filters" class="menu">
<li class="selected all">All</li>
<li class="first">First</li>
<li class="third">Third</li>
</ul>
Then your script
// hide all divs
$('div.box').css('display','hidden');
// add click handler on control list
$('ul#filters li').click(function() {
var classList =$(this).attr('class').split(/\s+/);
$.each( classList, function(index, item){
if (item != 'selected') {
$('div.'+item).css('display','block');
}
});
});
$(function(){
$('#filters li a').live('click', function(){
$('.box').hide();
indirector = $(this).attr('indicator');
indirector = indirector.substring(1);
if(indirector == '')
$('.box').show();
else
$('div.' + indirector).show();
});
});
Reference
Use the class attribute instead of indicator and try the following:
$('#filters li').click(function(){
$('div.' + $(this).attr('class')).show();
});
for this to work you would have to assign an all class to your first LI as well as all of your DIVs. Hope this helps!
try this code,
$('#filters li').click(function(){
$("div.box").hide();
$('div.box' + $(this).children('a').attr('indicator')).show();
});