jQuery adding active class to nav, now nav not working - javascript

So, I'd like my breadcrumb nav to show the user which page he/she is on by having the be a different color according to the page they are on. I.e. if on home, the home link is gray whilst the others remain black.
To do this I've added the following code to my app:
$(function(){
$('.breadcrumb li a').on('click', function(e){
e.preventDefault(); // prevent link click if necessary?
var $thisA = $(this);
var $li = $thisA.parent('a');
if (!$thisA.hasClass('active'))
{
$li.find('a.active').removeClass('active');
$thisA.addClass('active');
}
})
})
However, with the above code it never releases the active class when I also click events for example they end up both just being gray. Also, the page doesn't switch it stays on home page but with home and events grayed out.
The css:
.breadcrumb li a.active { color: #999999;}
The html
<ul class="breadcrumb">
<li>
<a class="active" href="/profiles"> Home</a>
</li>
<li>
<a class="active" href="/events"> Events</a>
</li>
<li>
Messages
</li>
<li>
My Profile
</li>
</ul>

Change
var $li = $thisA.parent('a');
to
var $li = $thisA.parents('ul');
because this line
$li.find('a.active').removeClass('active');
looks for a child a.active and your original $li would be null because your original line is trying to find a a that is a parent of the clicked a.
EDIT
Resources on highlighting the current page:
http://hicksdesign.co.uk/journal/highlighting-current-page-with-css
$("a[href*='" + location.pathname + "']").addClass("current"); from highlighting the current page in a list of links using css / html
http://www.eznetu.com/current-link.html#

Related

jQuery firing parent functions before children (slideUp and slideDown)

In short, I have a 2 main links (Private Car and Commercial Vehicle) each with a specific class attached to their anchor tags. The same class names are used on the li tags of a second sublink ul to match them with to two top links. The idea is that each time a main link is clicked, the following happens:
The sublink ul slides up
All the li's inside are hidden
The li's with the corresponding main link class are shown
The sublink ul slides down showing only the correct li's
Unfortunately that is not the order that the functions fire in. What happens is this:
The sublink ul slides up
The sublink ul slides down
All list elements inside are hidden
The relevant list elements slide down
Any idea on how I can get the order to fire as I want it?
Here is the code
$('.insurer ul.toplinks a').click(function(e) {
e.preventDefault();
var sublinkCategory = $(this).attr('class'),
subLinksToShow = $(this).parent().parent().parent().find('li.' + sublinkCategory),
subLinksList = $(this).parent().parent().parent().find('ul.sublinks'),
allLinks = $(subLinksList).find('li');
// First time
if ($(subLinksList).is(":hidden")) {
$(subLinksToShow).slideDown();
$(subLinksList).slideDown();
// List visible but new links invisible
} else if ($(subLinksList).is(":visible") && $(subLinksToShow).is(":hidden")) {
$(subLinksList).slideUp(function() {
$(allLinks).hide(function() {
$(subLinksList).slideDown(function() {
$(subLinksToShow).slideDown();
});
});
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="toplinks">
<li>Private Car</li>
<li>Commercial Vehicle</li>
</ul>
<ul class="sublinks">
<li class="privatecar">Key Facts</li>
<li class="privatecar">Policy Wording</li>
<li class="commercialvehicle">Key Facts</li>
<li class="commercialvehicle">Policy Wording</li>
</ul>
Your code isn't working while we don't have the fully code.
This works, note the comments in the code to see what happens on the line under the comment.
$(function() {
// hide by default
$('.sublinks').hide();
$('.toplinks a').on('click', function(e) {
e.preventDefault();
// get the classname
var cl = $(this).attr('class');
// slide up
$('.sublinks').slideUp("slow", function() {
//on callback (= after slide up is done)
// show all links
$('.sublinks li').show();
// hide the ones not having the right class
$('.sublinks li:not(.'+cl+')').hide();
// slide down again
$('.sublinks').slideDown("slow");
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="toplinks">
<li>Private Car</li>
<li>Commercial Vehicle</li>
</ul>
<ul class="sublinks">
<li class="privatecar">private Key Facts</li>
<li class="privatecar">private Policy Wording</li>
<li class="commercialvehicle">commercial Key Facts</li>
<li class="commercialvehicle">commercial Policy Wording</li>
</ul>

active class is removed when page refreshes jQuery

I have a UL on my page which is acting as navigation. In my footer I have some jQuery code so when I click the link it removes the active class on the li and then places it on the current li that has been clicked. This works as I click however when the page reloads the active class goes back onto the previous li.
Here is my code
jQuery(document).ready(function () {
"use strict";
// Init Demo JS
Demo.init();
// Init Theme Core
Core.init();
$('.sidebar-menu > li').click(function (e) {
$(".active").removeClass("active");
$(this).addClass("active");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav sidebar-menu">
<li class="sidebar-label pt20">Menu</li>
<li class="active">
<a href="/dashboard">
<span class="glyphicon glyphicon-home"></span>
<span class="sidebar-title">Dashboard</span>
</a>
</li>
<li>
<a href="/fixtures">
<span class="fa fa-calendar"></span>
<span class="sidebar-title">Fixtures</span>
</a>
</li>
<li>
<a href="/players">
<span class="glyphicon glyphicon-book"></span>
<span class="sidebar-title">Players</span>
</a>
</li>
</ul>
Am I missing something in my jQuery to keep the class on the desired li?
Your JS is losing context with the refresh.
What you can do is run another function on load to check which url you're on, and set active state based on that. Something like this:
var setDefaultActive = function() {
var path = window.location.pathname;
var element = $(".sidebar-menu a[href='" + path + "']");
element.addClass("active");
}
setDefaultActive()
My solution is based on this link.
I needed nav pills to remain active after page refresh.
You can probably format this to fit your needs.
$(document).ready(function () {
// On page load
$('a[data-toggle="pill"]').on('show.bs.tab', function (e) {
// Get the id for the pill that was last shown and set it to local storage
localStorage.setItem('activeLink', $(e.currentTarget).attr('id'));
});
// After page loaded
// Get the id for the pill from local storage
var activeLink = localStorage.getItem('activeLink');
// If it's there, click it
if (activeLink) {
$(`#${activeLink}`).click();
}
});

Jquery - How to add active class to entire navigation menu path?

I have a menu with 3 levels, and I would like to use a class for the first active li and a second class for all other subsequent li. When I click on a selection the level 3 to remain active the whole path (level 1, level 2, level 3). If I click on a selection on level 2 to remain active up to level 2.
I have the following:
$(document).ready(function(){
$('.sf-menu li a').each(function(index) {
if((this.pathname.trim() == window.location.pathname))
$(this).parent().addClass("selected");
var next_li = $(this).parent().next();
$('a', next_li).addClass("selected2");
});
});
I think I got it this time, It's a bit dirty but It works.
First add classes so you can identify first, second and third level <li> elements. Do it in the foreach, or whatever bucle that makes the menu (or by hand if there's no such bucle):
<ul id="navlist" >
<li id="home" class="firstLevel">
<a class="nav" href="home">Home</a>
<ul class="secondLevel">
<li class="secondLevel">
<a class="nav2" href="home">sub-Home1</a>
<ul>
<li class="thirdLevel"><a class="nav3" href="home">sub-sub-Home1></a></li>
<li class="thirdLevel"><a class="nav3" href="home">sub-sub-Home1></a></li>
</ul>
</li>
<li><a class="nav2" href="home">sub-Home2</a></li>
</ul>
</li>
<li id="about" class="firstLevel">
<a class="nav" href="about-us">About Us</a>
</li>
</ul>
Then use jQuery closest. It traverses up the DOM tree and matches the closest item, you can pass a selector (the firstLevel or secondLevel classes we just created):
$('#navlist a').on('click', function (e) {
e.preventDefault(); //prevent the link from being followed
$('#navlist a').removeClass('selected');
$('#navlist a').removeClass('selected2');
$(this).closest('.secondLevel').children('a').addClass('selected2');
$(this).closest('.firstLevel').children('a').addClass('selected2');
$(this).addClass('selected');
});
Then you add !important to the selected class (so when there's a colision like in the About Us link selected is the class that is applied). This is the dirtiest part.
Check a working fiddle: https://jsfiddle.net/4r5vg/661/

Removing and adding Classes on Dropdown Menus on Hover

I have a Navigation built that have drop down menus,
HTML STRUCTURE LIKE SO
<li class="c-header__subnav-item c-header__subnav-item-is-hidden c-header__subnav-item-is-visible-md">
<a class="c-header__subnav-links u-caps js-c-header__subnav-trigger" href="#">
Action Review Review
<i class="fa fa-angle-down fa-lg c-btn__icon-right-sm"></i>
</a>
<ul class="c-header__subnav-dd">
<li class="c-header__subnav-dd-item">
<a class="c-header__subnav-links c-header__subnav-links--dd" href="#">
Overview
</a>
</li>
<li class="c-header__subnav-dd-item">
<a class="c-header__subnav-links c-header__subnav-links--dd" href="#">
Review Form
</a>
</li>
<li class="c-header__subnav-dd-item">
<a class="c-header__subnav-links c-header__subnav-links--dd" href="#">
Performance Card
</a>
</li>
<li class="c-header__subnav-dd-item">
<a class="c-header__subnav-links c-header__subnav-links--dd" href="#">
Recent Recordings
</a>
</li>
</ul>
</li>
When You Hover On the a.js-c-header__subnav-trigger
It addes a class to its self as well as its sibling ul ( the dropdown menu)
This is perfect but since the hover is triggered on the 'a' element If I toggle the class when and I go to hover on the drop down menu it gets removed before I can because of hovering off the 'a' element.
If I just add the classes and do not use toggle how would I remove both classes once I hover off the A element or Dropdown menu.
What needs to be achieved is
1.) If main nav link is hovered add an active class to itself and drop down is triggered and can be seen. If you hover out WITHOUT engaging the dropdown both active and dropdown class are removed
2.) If main nav link is hovered add an active class to itself and if dropdown IS engaged by user keep both classes until dropdown is hovered out of or 'A' Element.
CURRENT JQUERY CODE
;(function($, window, document, undefined) {
var $win = $(window);
var $doc = $(document);
var $classes = {
SubNavTrigger : 'js-c-header__subnav-trigger',
SubNavItemActive : 'c-header__subnav-item-is-active',
SubNavDropDown : 'c-header__subnav-dd',
SubNavDropDownActive : 'c-header__subnav-dd-is-active'
};
var _isMobile = false;
_isMobile = ($win.width() <= 1024) ? true : false;
// Check if user is on touch on page load
// if isMobile use click events
// if not mobile use hover events
if(_isMobile) {
$("." + $classes.SubNavTrigger).on('click', function(){
if ( $(this).hasClass( $classes.SubNavItemActive ) ){
// If Item has active class removeClass
$(this).removeClass( $classes.SubNavItemActive )
} else {
// If Item does not have active class addClass
$(this).addClass($classes.SubNavItemActive);
} //End if
// Add Active Class To Subnav.
$(this).siblings().toggleClass($classes.SubNavDropDownActive);
});
} else {
$("." + $classes.SubNavTrigger).on('hover', function(){
$(this).addClass($classes.SubNavItemActive);
// Add Active Class To Subnav.
// If set to toggle impossible to hover on this menu.
$(this).siblings().addClass($classes.SubNavDropDownActive);
});
}
})(jQuery, window, document);
Thanks In Advance for any help.
Live Site Link to see
http://100dc.vincebrown.me/integrity-pledge
So I would make a few changes, I would move the s-c-header__subnav-triggerclass to the parent li. I would then change the jquery to use the hover(in,out). The in function would look something like
function () {
$(this).addClass($classes.SubNavItemActive);
// Add Active Class To Subnav.
$(this).children().addClass($classes.SubNavDropDownActive);
}
and the out
function () {
$(this).removeClass($classes.SubNavItemActive);
// Add Active Class To Subnav.
$(this).children().removeClass($classes.SubNavDropDownActive);
}
Here is a jsfiddle

Removing active state when toggling between divs

I have created multiple top down menu items. When the links are clicked a div slides down to show some content.
What I am trying to do with these links is toggle between them. When one div is opened an active state is added to the link, when it is closed the active state is removed and the div hidden. When you click between the links I have managed to get them to toggle between each other and the active state is added to the div that is opened.
What I cannot achieve is removing the active state and resetting some css.
Here is my Javascript:
//menu toggle
$(".trigger").click(function() {
var divToToggle = $( $(this).data('target') );
$(".toggle:visible").not(divToToggle).hide();
$(".trigger").not(divToToggle).removeClass('active');
$('.top-nav').css('margin-top', '20px');
divToToggle.slideToggle("fast", "linear");
$(this).toggleClass('active');
$('.top-nav').css('margin-top', '0px');
return false;
});
The .toggle class is on all the divs that are toggled:
<div class="account-container toggle hide"></div>
<div class="collections-container toggle hide"></div>
<div class="search-container toggle hide"></div>
The .trigger class is on all my links:
<ul class="top-nav">
<li><a class="hidden-tablet" href="">home </a></li>
<li><a class="hidden-tablet" href="">about us </a></li>
<li><a class="hidden-tablet" href="">where to buy </a></li>
<li><a class="hidden-tablet" href="">contact us </a></li>
<li class="tablet-menu visible-tablet"><a class="tablet-menu trigger" href="" data-target=".tablet-menu-container">tablet menu</a></li>
<li class="account"><a class="account trigger" href="" data-target=".account-container">account</a></li>
<li class="collection"><a class="collection trigger" href="" data-target=".collections-container">collections</a></li>
<li class="search"><a class="search trigger" href="" data-target=".search-container">search</a></li>
<li class="basket"><a class="basket trigger" href="" data-target=".home-basket-container">basket</a></li>
</ul>
It's hard to say where exactly your code is going wrong, but I've re-written it so it works slightly differently. Your click handler has to handle two possibilities: either we're clicking to hide an existing section, or we're clicking to switch to a new section. But we can also think of this as being two steps, with the second one optional: either we hide an existing section, or we hide an existing section and show a new one.
I've also switched to using ev.preventDefault() to stop the link from firing, named the jQuery variables so they start with $ (which makes them easier to differentiate). You can try it out on jsfiddle here.
$(document).ready(function () {
$(".trigger").click(function (ev) {
ev.preventDefault();
var $clickedLink = $(this);
var $divToToggle = $($(this).data('target'));
var isHideOnly = $clickedLink.hasClass('active');
// Hide the existing div and remove 'active' class.
$(".toggle:visible").hide();
$(".trigger").removeClass('active');
$('.top-nav').css('margin-top', '20px');
// If we're showing a new one, reveal it and set the active class on the link.
if (!isHideOnly) {
$divToToggle.slideToggle("fast", "linear");
$('.top-nav').css('margin-top', '0');
$clickedLink.addClass('active');
}
});
});

Categories

Resources