Develop Reference

Not able to add active class that matches current open page to list item of menu

I am having problem while adding the active class to the currently open page. I tried other solutions available on StackOverflow, but nothing worked for me. I think it is because I have ~/ in my link href element. Thanks in advance.
<script>
$(document).ready(function () {
var current = location.pathname;
$('#indexmenu li a').each(function () {
var $this = $(this);
if ($this.attr('href').indexOf(current) !== -1) {
$this.addClass('active')
}
})
})
</script>
<div class="navbar-collapse collapse mancolor" id="adminmenu">
<ul class="nav navbar-nav mancolor" id="indexmenu">
<li><a href="~/Default.aspx" class="active" runat="server">
<span><i class="glyphicon glyphicon-dashboard"></i></span>
<span>Main Screen</span>
</a>
</li>
<li><a href="NewWorkShopVisit.aspx" runat="server">
<span class="fa fa-shopping-cart"></span>
<span>New Workshop Visit</span>
</a>
</li>
<li><a href="Index.aspx" runat="server">
<span><i class="fa fa-cogs"></i></span>
<span>Workshop Control Panel</span>
</a>
</li>
<li><a href="Employees.aspx" runat="server">
<span><i class="fa fa-user-circle-o"></i></span>
<span>Employees</span>
</a>
</li>
</ul>
</div>

You might check if the first character is a ~ and if it is, return the string without it:
$(document).ready(function () {
var current = location.pathname;
$('#indexmenu li a').each(function () {
var $this = $(this);
var href = $this.attr('href');
if (href.charAt(0) === '~') href = href.substr(1);
if (href.indexOf(current) !== -1) {
$this.addClass('active')
}
})
})
$(document).ready(function() {
var current = '/Default.aspx'
$('#indexmenu li a').each(function() {
var $this = $(this);
var href = $this.attr('href');
if (href.charAt(0) === '~') href = href.substr(1);
if (href.indexOf(current) !== -1) {
$this.addClass('active')
}
})
})
.active {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="navbar-collapse collapse mancolor" id="adminmenu">
<ul class="nav navbar-nav mancolor" id="indexmenu">
<li>
<a href="~/Default.aspx" runat="server">
<span><i class="glyphicon glyphicon-dashboard"></i></span>
<span>Main Screen</span>
</a>
</li>
<li>
<a href="NewWorkShopVisit.aspx" runat="server">
<span class="fa fa-shopping-cart"></span>
<span>New Workshop Visit</span>
</a>
</li>
<li>
<a href="Index.aspx" runat="server">
<span><i class="fa fa-cogs"></i></span>
<span>Workshop Control Panel</span>
</a>
</li>
<li>
<a href="Employees.aspx" runat="server">
<span><i class="fa fa-user-circle-o"></i></span>
<span>Employees</span>
</a>
</li>
</ul>
</div>

Jquery, can't update attribute previously created

I'm just trying to work on new slider menu but I've a problem with Jquery.
I've a link. When I click on I use .css('left', -230) and all is okay but when i want to reverse by another clicked link like .css('left', 0) nothing happen.
I show you some code :
// The open part "target.width()" = 230
$('.nav-item').on('click', function () {
if( 0 < $(this).find('.navbar-nav__sub').length ) {
var target = $('.navbar-nav');
target.css('left', -target.width());
}
});
// The close part
$('.navbar-nav__sub .go-back').on('click', function () {
console.log('HERE');
var target = $('.navbar-nav');
console.log(target);
console.log(target.css('left'));
target.css('left', 0);
console.log(target.css('left'));
console.log('END');
});
A strange thing in this problem is that I've this in my console :
HERE
Object { 0: ul.navbar-nav.flex-column, length: 1, prevObject: […] }
-230px
0px
END
It seem that the code work well but in my page the left attribute is always to -230px.
Someone have an idea ?
Thank you.
PS: As asked the JSfiddle who reproduce my problem
https://jsfiddle.net/w7Lknsxg/
If you click on "Menu01" Color turn to red and when you click on "<=" in submenu you have the execution in the console but the color don't change.
You can see the class navbar-nav get new class "toto" but don't lost when I try to remove it in the second case.

Because the .go-back is nested within the .nav-item you are firing both event listeners due to event bubbling. You can stop this with event.stopPropagation(); from within the listener placed on the child item. (or be more specific in what you target as not to include subelements)
var ftl = window.ftl || {};
ftl.navbar = {
config: {
targetName: '.nav',
target: null,
},
init: function init() {
this.config.target = $(this.config.targetName);
$('.navbar-toggle').on('click', function () { ftl.navbar.toggle(); });
$('.nav-item').on('click', function () {
if( !ftl.navbar.config.target.hasClass('open') ) {
ftl.navbar.open();
}
// test la présence d'un sous menu
if( 0 < $(this).find('.navbar-nav__sub').length ) {
var target = $('.navbar-nav');
target.addClass('toto');
target.css('color', 'red');
}
});
$('.navbar-nav__sub .go-back').on('click', function (event) {
event.stopPropagation();
console.log('HERE');
var target = $('.navbar-nav');
console.log(target);
console.log(target.hasClass('toto'));
target.removeClass('toto');
target.css('color', "green");
console.log('END');
})
},
open: function open() {
this.config.target.addClass('open').one('transitionend', function () {
ftl.navbar.config.target.addClass('opened');
});
},
close: function close() {
this.config.target.removeClass('opened')
.removeClass('open');
},
toggle: function toggle() {
if( this.config.target.hasClass('open') ) {
this.close();
} else {
this.open();
}
}
}
$(document).ready(function() {
ftl.navbar.init();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="nav">
<nav class="navbar" role="navigation">
<div class="container-nav flex-column">
<div class="navbar__header">
<a href="#" class="no-style">
<i class="fa fa-comment-o fa-2x navbar__icon" aria-hidden="true"></i>
<span class="navbar__text"><strong class="text-primary">web</strong>tutu</span>
</a>
</div>
<div class="navbar__divider"></div>
<ul class="navbar-nav flex-column">
<li id="nav-item--one" class="nav-item">
<a href="#nav-item--one">
<i class="fa fa-user-circle-o navbar__icon" aria-hidden="true"></i>
<span class="navbar__text">Menu01</span>
</a>
<ul class="navbar-nav__sub">
<li>link 01</li>
<li>link 02</li>
<li><a class="go-back" href="#"> <= </a></li>
</ul>
</li>
<li id="nav-item--two" class="nav-item">
<a href="#nav-item--two">
<i class="fa fa-user-circle-o navbar__icon" aria-hidden="true"></i>
<span class="navbar__text">Menu02</span>
</a>
</li>
<li id="nav-item--three" class="nav-item">
<a href="#nav-item--three">
<i class="fa fa-user-circle-o navbar__icon" aria-hidden="true"></i>
<span class="navbar__text">Menu03</span>
</a>
</li>
<li class="mt-auto">
<i class="fa fa-angle-double-right fa-2x navbar-toggle" aria-hidden="true"></i>
</li>
</ul>
</div>
</nav>
</nav>

Add/Remove class based on active URL

My HTML code looks like this:
<div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
<div class="menu_section">
<ul class="nav side-menu">
<li>
<a>
<i class="fa fa-home"></i>home
<span class="fa fa-chevron-down"></span>
</a>
<ul class="nav child_menu" style="display: none">
<li>
Dashboard
</li>
<li>
dashbord2
</li>
</ul>
</li>
<li>
<a>
<i class="fa fa-edit"></i>form
<span class="fa fa-chevron-down"></span>
</a>
<ul class="nav child_menu" style="display: none">
<li>
general form
</li>
<li>
form validation
</li>
</ul>
</li>
</ul>
</div>
</div>
to add/remove class based on current url, i am using this:
$(function () {
var url = window.location.href;
$('#sidebar-menu a[href="' + url + '"]').parent('li').addClass('current-page');
$('#sidebar-menu a').filter(function () {
return this.href == url;
}).parent('li').addClass('current-page').parent('ul').slideDown().parent().addClass('active');
});
It works, but when i click this link
dashbord2
the class="current-page" doesn't change to current path url
How i fix this?

Your issue arises from the page not being reloaded when you click on the link with hash in it, while your code only executes on page load, or dom ready to be exact. The solution is to whether use window's hashchange event (not supported in < IE8) or, like #sirrocco mentioned, use click event with setTimeout to detect the change of hash:
function setCurrentMenuPage() {
var url = window.location.href;
var anchors = $('#sidebar-menu a');
anchors.parent('li').removeClass('current-page');
anchors.filter(function () {
return this.href == url;
}).parent('li').addClass('current-page').parent('ul').slideDown().parent().addClass('active');
}
$(function () {
setCurrentMenuPage();
$('#sidebar-menu a').on('click', function (e) {
if ($(this).attr('href').indexOf("#") >= 0) {
setTimeout(function () {
setCurrentMenuPage();
}, 100);
}
});
});
Hope that helps.

jQuery: how to select the exact element of the same class?

Not sure I've formulated my question well, hope the details will cover the issues.
So, I'm building an "artificial" full-height slide-like submenu, and I have an empty container there:
<section class="masking_sublevel">
</section>
Further, I have a bunch of ul elements in my HTML that are hidden by default in their containing section:
I'm updating the HTML part with a more complete piece:
<div id="sldbr_overlay" class="newully">
<section class="masking_sublevel">
</section>
<ul class="sidebar_bumenu">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
Beauty <i class="fa fa-chevron-right bu_chevright"></i>
<i class="fa fa-chevron-down bu_chevdown"></i>
</a>
<section class="hidden_ul">
<ul>
<li>Aerobics</li>
<li>Pilates</li>
<li>Yoga</li>
<li>Massage</li>
<li>Peeling</li>
<li>Bikini Area Sugaring</li>
<li>Piercing</li>
<li>Tattoo</li>
<li>Shaping</li>
<li>Sauna</li>
<li>Mud SPA</li>
<li>Needle Therapy</li>
<li>Shaping</li>
<li>Leech Therapy</li>
<li>Thai Massage</li>
<li>Wushu</li>
</ul>
</section>
</li>
<li>Clothing</li>
<li>Computers</li>
<li>Construction</li>
<li>Entertainment</li>
<li>Financial</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
Food <i class="fa fa-chevron-right bu_chevright"></i>
<i class="fa fa-chevron-down bu_chevdown"></i>
</a>
<ul class="hidden_ul">
<li>Pizza</li>
<li>Cheboorackee</li>
<li>Khash</li>
<li>Pork</li>
<li>Hamburgers</li>
<li>Greek Salad</li>
<li>BBQ</li>
<li>Tortillas</li>
<li>Spaghetti</li>
<li>Pasta</li>
<li>Ice Cream</li>
<li>Jelly Sugar</li>
<li>Lolly Pop</li>
<li>Cupcakes</li>
</ul>
</li>
<li>Health</li>
<li>Kids</li>
<li>Services</li>
<li>Travel</li>
<li>Tourism</li>
</ul>
<div class="pzik">
<a href="javascript:void(0);" data-toggle=".sidebar_wrapper" id="sidebar-toggle_abs">
<img src="svg/filter.svg" class="filter_icon hvr-wobble-bottom">
</a>
<a href="javascript:void(0);" id="go-2-top" class="gotop_chevron">
<i class="fa fa-chevron-up"></i>
</a>
</div>
</div>
So, what I'm doing is selecting the above mentioned ul and put it within the empty section on a hover event and emptying it on a mouseleave, like this:
$(document).ready(function(){
var dropdownLi = $('li.dropdown');
var maskingSubLvl = $('.masking_sublevel');
var importedUl = $('.masking_sublevel ul');
var hiddenUl = $('.hidden_ul ul');
$(dropdownLi).on('mouseover',function(){
$(hiddenUl).appendTo(maskingSubLvl);
$(maskingSubLvl).css('display','block');
});
$(dropdownLi).on('mouseleave',function(){
$(maskingSubLvl).css('display','none');
$(importedUl).empty();
$(maskingSubLvl).on('mouseenter',function(){
$(this).css('display', 'block');
});
});
});
The problem is that with this piece of code I probably select just the first ul with the class of .hidden_ul', since as I hover on the other items (randomly), it keeps on loading the content of the first list. How can I select the VERY ul element with the same class that I'm currently hovering?
Thanks!

So you want to traverse from the element that has mouseover to the parent ul, which is a child of the grand-parent .hidden_ul
// remove this, it has no context to each drop down
// var hiddenUl = $('.hidden_ul ul');
$(dropdownLi).on('mouseover',function(){
$(this).closest('.hidden_ul').children('ul').appendTo(maskingSubLvl);
// though if there are no child uls in your lis, this will do
$(this).closest('ul').appendTo(maskingSubLvl);

Since your hidden_ul is direct child of .dropdown you need to get it using its parent context as below:
$(dropdownLi).on('mouseover',function(){
var hiddenUl=$(this).find('.hidden_ul')[0];//find the child
$(hiddenUl).appendTo(maskingSubLvl);
$(maskingSubLvl).css('display','block');
});
Update
Instead of appendTo try keeping changing the html of .maskingSubLvl so that no need to remove the content again before appending another. For Ex:
DEMO
$(document).ready(function(){
var dropdownLi = $('li.dropdown');
var maskingSubLvl = $('.masking_sublevel');
var importedUl = $('.masking_sublevel ul');
$(dropdownLi).on('mouseover',function(){
$(maskingSubLvl).css('display','block');
var hiddenUl = $(this).find('.hidden_ul ul').clone(); //clone the content
$(maskingSubLvl).html(hiddenUl);
});
$(dropdownLi).on('mouseleave',function(){
$(maskingSubLvl).css('display','none');
});
$(maskingSubLvl).on('mouseenter',function(){
$(this).css('display', 'block');
});
});

jQuery method called twice?

So I have a nested bootstrap dropdown in my navbar. Here is the code that prevents the dropdown on click of a nested drop to execute its normal task. This works well.
(function($) {
$(document).ready(function() {
$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
event.preventDefault();
event.stopPropagation();
$(this).parent().siblings().removeClass('open');
$(this).parent().toggleClass('open');
});
});
})(jQuery);
In this code, onclick of the dropdown's <li> does something. When the click is on a normal li of the dropdown it works fine but when it is in a nested dropdown's li the function is executed but when it ends it is executed again (the onClick). The way I've found to avoid that its complete seconde execution is I check in my if statement if $(this) (the clicked li) is null, which it is when it's executed the second time out of nowhere. This way is pretty gross but it works, but does anyone see why the method is called a second time and how to stop it from getting called twice?
$("#dropdownViewModeSelect").on('click', 'li', function() {
selectedViewMode = $(this).attr("viewmode");
if (selectedViewMode != "undefined" && selectedViewMode != null)
{
if (selectedViewMode != previouslySelectedViewMode || currentTimelineMode != previouslySelectedTimelineMode)
{
//Remove glyphicons to all i
var touslesideslis = $("#dropdownViewModeSelect li").find("i").removeClass('glyphicon glyphicon-ok');
//Add glyphicons to clicked i
$(this).find("i").addClass('glyphicon glyphicon-ok');
//Add text to button
currentViewModeSecondary = $(this).attr("viewmodesecondary");
var textBtn;
if (currentViewModeSecondary != "classic")
textBtn = "Ligne du temps - " + $(this).text();
else
textBtn = $(this).text();
$("#dropdownMenuViewMode").text(textBtn);
$("#dropdownMenuViewMode").append('<span class="glyphicon glyphicon-eye-open pull-left"></span>');
$("#dropdownMenuViewMode").append('<span class="caret caret-filter"></span>');
if ($(window).width() >= 768)
Global.Responsiveness();
}
}
});
Here's my HTML for the dropdown.
<li class="dropdown"> <a class="dropdown-toggle" id="dropdownMenuViewMode" data-toggle="dropdown" role="button" aria-expanded="false"><span class="glyphicon glyphicon-eye-open pull-left"></span>Jour<span class="caret"></span></a>
<ul class="dropdown-menu" id="dropdownViewModeSelect" role="menu">
<li viewmode="jour" viewmodesecondary="classic"><a id="linkJour">Jour<i class='dropdownFiltreImage glyphicon glyphicon-ok'></i></a>
</li>
<li viewmode="ressource" viewmodesecondary="classic"><a id="linkRessource">Ressources/Jour<i class='dropdownFiltreImage'></i></a>
</li>
<li viewmode="week" viewmodesecondary="classic"><a id="linkSemaine">Semaine<i class='dropdownFiltreImage'></i></a>
</li>
<li viewmode="month" viewmodesecondary="classic"><a id="linkMois">Mois<i class='dropdownFiltreImage'></i></a>
</li>
<li viewmode="year" viewmodesecondary="classic"><a id="linkAnnee">Année<i class='dropdownFiltreImage'></i></a>
</li>
<li viewmode="agenda" viewmodesecondary="classic"><a id="linkAgenda">Agenda<i class='dropdownFiltreImage'></i></a>
</li>
<li class="dropdown dropdown-submenu">Ligne du temps
<ul class="dropdown-menu">
<li viewmode="timeline" viewmodesecondary="timeline"><a id="linkTimelineDay">Jour<i class='dropdownFiltreImage'></i></a>
</li>
<li viewmode="timeline" viewmodesecondary="timeline"><a id="linkTimelineWeek">Semaine<i class='dropdownFiltreImage'></i></a>
</li>
<li viewmode="timeline" viewmodesecondary="timeline"><a id="linkTimelineMonth">Mois<i class='dropdownFiltreImage'></i></a>
</li>
</ul>
</li>
</ul>

If your click handler is being called twice it is probably being set twice. Try changing your selector. This may not be the ultimate class structure you want but I'll bet if you add the same class to each of your list elements and then use that class in the selector for the click handler your problem goes away.