Develop Reference

slide children ul of parent from left to right jquery

I have a div that contains a menu, that menu slide from left to rigth when the user click on a button, everything is ok until here, but i can't replied the same effect when I tried to show the next target.
The skeleton of the menu is below:
<button id="icons-header" class="hamburguer">
Push me!
</button>
<div id="sideBar" class="container-fluid sidebar visible">
<div class="row">
<div class="menu-left">
<ul id="mm-1" class="mm-list visible"> /This is the principal menu
<li><a class="mm-next" href="#" data-target="#women">Women</a></li>
<li><a class="mm-next" href="#" data-target="#men">Men</a></li>
<li><a class="mm-next" href="#" data-target="#kids">Kids</a></li>
</ul>
<!-- from here to the final are the sub elements -->
<ul id="men" class="mm-list">
<li><a class="mm-next icon" href="#" data-target="#mm-1">
<i class="glyphicon glyphicon-triangle-left"></i> Home</a></li>
<li class="menu-title"><span> Men</span></li>
<li><a class="mm-next" href="#" data-target="#men-clothing">clothes</a></li>
<li><a class="mm-next" href="#" data-target="#mm-bags">stuff</a></li>
</ul>
<ul id="men-clothing" class="mm-list">
<li><a class="men-bags" href="#" data-target="#men">
<i class="glyphicon glyphicon-triangle-left"></i> Men</a></li>
<li class="menu-title"><span> clothes</span></li>
<li>element</li>
<li>element</li>
<li>element</li>
<li>element</li>
<li>element</li>
</ul>
The first effect to show the menu is this:
var hidden = $('#sideBar');
var element = $('#mm-1');
if ((hidden.hasClass('visible')) && (element.hasClass('visible'))){
hidden.animate({"left":"-1000px"}, "slow").removeClass('visible');
} else {
hidden.animate({"left":"0px"}, "slow").addClass('visible');
}
That code I replied to show the new segment but not works, my complete code is jsfiddle

#victor, In this case you can do something like this(I just made changes in JS). Please take a look at once.
<script>
$(function(){
$(".hamburguer").click(function(){
var button = $(this).attr('class');
console.log(typeof button);
if(button == "hamburguer")
{
$(this).removeClass('hamburguer');
$(this).addClass('blueCross');
$('#mm-1').show();
/*$('#sideBar').show(300);*/
}else
{
$(this).removeClass('blueCross');
$(this).addClass('hamburguer');
$(".mm-list").hide();
}
var hidden = $('#sideBar');
var element = $('#mm-1');
if ((hidden.hasClass('visible')) && (element.hasClass('visible'))){
hidden.animate({"left":"-1000px"}, "slow").removeClass('visible');
} else {
hidden.animate({"left":"0px"}, "slow").addClass('visible');
$('#mm-1').show();
}
});
$(document).on('click', '.mm-next', function (e) {
e.preventDefault();
var hidden = $('#sideBar');
var target = $(this).data("target");
var others = $("div.menu-left").find(".mm-list").not(target);
others.hide();
hidden.animate({"left":"-1000px"}, "slow").removeClass('visible');
hidden.animate({"left":"0px"}, "slow").removeClass('visible');
$(target).show();
return false;
});
});
</script>
Let me know if it helped.

There is error in your code, You class name is different in you javascript. I have made some changes in your javascript please take a look into it and let me know if it doesn't work
$(function(){
$(".hamburguer").click(function(){
var button = $(this).attr('class');
console.log(typeof button);
if(button == "hamburguer")
{
$(this).removeClass('hamburguer');
$(this).addClass('blueCross');
$('#mm-1').show();
/*$('#sideBar').show(300);*/
}else
{
$(this).removeClass('blueCross');
$(this).addClass('hamburguer');
$(".mm-list").hide();
}
var hidden = $('#sideBar');
var element = $('#mm-1');
if ((hidden.hasClass('visible')) && (element.hasClass('visible'))){
hidden.animate({"left":"-1000px"}, "slow").removeClass('visible');
} else {
hidden.animate({"left":"0px"}, "slow").addClass('visible');
}
});
$(document).on('click', '.mm-next', function (e) {
e.preventDefault();
var target = $(this).data("target");
var others = $("div.menu-left").find(".mm-list").not(target);
others.hide();
$(target).show();
return false;
});
});

Class name 'hamburguer' create issue as they seems non-identical in supplied javascript. Please check it once. Let me know if it helped.

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>

combine change active li and reload part of page javascript

I have two simple function on click in my page with js, first is to change css active in current li and the other is to reload content only .
change active li
$(".list li").on("click", function(){
$(".list li").removeClass('active');
$(this).addClass('active');
});
reload content only
$('.content').load('Passtel/dashboard');
$('ul.list li a').click(function(){
var page = $(this).attr('href');
$('.content').load('Passtel/'+page);
return false;
});
the problem is, it just function reload content only works if there two are running, but I've tested each of function works as it is.
How can I make both of function works together?
this is my content structure
<!-- Menu -->
<div class="menu">
<ul class="list">
<li class="active">
<a href="dashboard">
<i class="material-icons">home</i>
<span>DASHBOARD</span>
</a>
</li>
<li>
<a href="check">
<i class="material-icons">text_fields</i>
<span>CHECK SITE</span>
</a>
</li>
<li>
<a href="datek">
<i class="material-icons">layers</i>
<span>DATA TEKNIS</span>
</a>
</li>
</ul>
</div>

You can accomplish that with only one function. Hope it helps!
jsbin.com
const ul = $(".list");
const list = ul.find('li');
ul.on("click", 'li a', function(e){
e.preventDefault();
list.removeClass('active');
$(this).parent().addClass('active');
var page = $(this).attr('href');
// replace this with your $('.content').load('Passtel/'+page);
$('.content').load('https://jgatjens.com/?' + page);
});

You can use something like this:
$(function () {
$('.content').load('Passtel/dashboard');
$('ul.list li a').click(function () {
e.preventDefault();
$(".list li").removeClass('active');
$(this).parent().addClass('active'); //added parent() here
var page = $(this).attr('href');
$('.content').load('Passtel/' + page);
return false;
});
});
//$('.content').load('Passtel/dashboard');
$('ul.list li a').click(function (e) {
e.preventDefault();
$(".list li").removeClass('active');
$(this).parent().addClass('active');
var page = $(this).attr('href');
//$('.content').load('Passtel/' + page);
return false;
});
.active {
background-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="menu">
<ul class="list">
<li class="active">
<a href="dashboard">
<i class="material-icons">home</i>
<span>DASHBOARD</span>
</a>
</li>
<li>
<a href="check">
<i class="material-icons">text_fields</i>
<span>CHECK SITE</span>
</a>
</li>
<li>
<a href="datek">
<i class="material-icons">layers</i>
<span>DATA TEKNIS</span>
</a>
</li>
</ul>
</div>

Showing active menu on a drop down side menu on Bootstrap (AdminLTE)

I want to highlight the active page on the side bar menu.
I am using Bootstrap (AdminLTE).
I have tried a number of javascript ways to no avail. Kindly anyone help out. Below is the side bar menu.
<ul class="sidebar-menu" >
<li class=""><i class="fa fa-dashboard"></i> <span>Dashboard</span> </li>
<br>
<li class="treeview">
<i class="fa fa-cogs"></i> <span> Account Configuarion</span> <i class="fa fa-angle-left pull-right"></i>
<ul class="treeview-menu">
<li class="treeview">
<i class="fa fa-mobile fa-lg"></i> <span>M-PESA C2B</span> <i class="fa fa-angle-left pull-right"></i>
<ul class="treeview-menu">
<li class=""><i class="fa fa-arrow-circle-right"></i>C2B Settings</li>
<li class=""><i class="fa fa-arrow-circle-right"></i> Online CheckOut</li>
<li class=""><i class="fa fa-arrow-circle-right"></i> STK Push</li>
</ul>
</li>
<li class="treeview">
<i class="fa fa-mobile fa-lg"></i> <span>M-PESA B2C</span> <i class="fa fa-angle-left pull-right"></i>
<ul class="treeview-menu">
<li><i class="fa fa-arrow-circle-right"></i> B2C Settings</li>
</ul>
</li>
<li class="treeview">
<i class="fa fa-send"></i> <span>SMS</span> <i class="fa fa-angle-left pull-right"></i>
<ul class="treeview-menu">
<li class=""><i class="fa fa-arrow-circle-right"></i>SMS Settings</li>
<li class=""><i class="fa fa-arrow-circle-right"></i>Subscription SMS Settings</li>
</ul>
</li>
</ul>
</li>
<li class="treeview ">
<i class="fa fa-cogs"></i> <span>Account Info</span> <i class="fa fa-angle-left pull-right"></i>
<ul class="treeview-menu">
<li class=""><i class="fa fa-arrow-circle-right"></i> Buy Units</li>
<li class=""><i class="fa fa-arrow-circle-right"></i>Account Details</li>
<li class=""><i class="fa fa-arrow-circle-right"></i>Account Users</li>
</ul>
</li>
</ul>
I tried with this javascript code but ends up opening all the dropdowns. All the same, it does highlight the current item. But I would want the other items remain closed and only active remains open.
<script>
$(document).ready(function() {
var url = window.location;
var element = $('ul.sidebar-menu a').filter(function() {
return this.href == url || url.href.indexOf(this.href) == 0; }).parent().addClass('active');
if (element.is('li')) {
element.addClass('active').parent().parent('li').addClass('active')
}
});
</script>

/** Try this ** >
for sidebar and treeview menu in adminLTE, it will add active when clicked and remove any previous active class
/** to add active class and remove previously clicked menu */
var url = window.location;
// for sidebar menu but not for treeview submenu
$('ul.sidebar-menu a').filter(function() {
return this.href == url;
}).parent().siblings().removeClass('active').end().addClass('active');
// for treeview which is like a submenu
$('ul.treeview-menu a').filter(function() {
return this.href == url;
}).parentsUntil(".sidebar-menu > .treeview-menu").siblings().removeClass('active menu-open').end().addClass('active menu-open');

Finally I figured it out!
I included the script below;
<script>
/** add active class and stay opened when selected */
var url = window.location;
// for sidebar menu entirely but not cover treeview
$('ul.sidebar-menu a').filter(function() {
return this.href == url;
}).parent().addClass('active');
// for treeview
$('ul.treeview-menu a').filter(function() {
return this.href == url;
}).parentsUntil(".sidebar-menu > .treeview-menu").addClass('active');
</script>
Then included on all <ul class="treeview-menu"> I believe this prevented the lists from opening unless clicked.
This ultimately sorted everything.

Try this:v2.3.0
var url = window.location;
// for sidebar menu entirely but not cover treeview
$('ul.sidebar-menu a').filter(function() {
return this.href == url;
}).parent().addClass('active');
// for treeview
$('ul.treeview-menu a').filter(function() {
return this.href == url;
}).parentsUntil(".sidebar-menu > .treeview-menu").addClass('active');

Please check below-mentioned solution :
<script type="text/javascript">
$(document).ready(function(){
var url = window.location.href.substr(window.location.href.lastIndexOf("/") + 1);
$('.treeview-menu li').removeClass('active');
$('[href$="'+url+'"]').parent().addClass("active");
$('.treeview').removeClass('menu-open active');
$('[href$="'+url+'"]').closest('li.treeview').addClass("menu-open active");
});
</script>

NOTE: This code for new AdminLTE 3 dev with bootstrap 4
var url = window.location;
const allLinks = document.querySelectorAll('.nav-item a');
const currentLink = [...allLinks].filter(e => {
return e.href == url;
});
currentLink[0].classList.add("active")
currentLink[0].closest(".nav-treeview").style.display="block";
currentLink[0].closest(".has-treeview").classList.add("active");

I don't want this question to be polluted by another answer but none of them worked for AdminLTE-3.0.1.So I created an updated solution.Here is
const url = window.location;
/*remove all active and menu open classes(collapse)*/
$('ul.nav-sidebar a').removeClass('active').parent().siblings().removeClass('menu-open');
/*find active element add active class ,if it is inside treeview element, expand its elements and select treeview*/
$('ul.nav-sidebar a').filter(function () {
return this.href == url;
}).addClass('active').closest(".has-treeview").addClass('menu-open').find("> a").addClass('active');

If anyone need to fix this on Admin LTE 4 this is working:
<script>
/** add active class and stay opened when selected */
var url = window.location;
// for sidebar menu entirely but not cover treeview
$('ul.nav-sidebar a').filter(function() {
return this.href == url;
}).addClass('active');
// for treeview
$('ul.nav-treeview a').filter(function() {
return this.href == url;
}).parentsUntil(".nav-sidebar > .nav-treeview").addClass('menu-open').prev('a').addClass('active');
</script>

This a follow up to GMK Hussain answer for AdminLTE 3. I ran into the null issue and undefined in his code(undefined because I have some pages that are not in nav links at all). I would get jS console errors. Here is what I am using:
$(document).ready(function () {
var url = window.location;
const allLinks = document.querySelectorAll('.nav-item a');
const currentLink = [...allLinks].filter(e => {
return e.href == url;
});
//fix for "cannot read property 'style' of null" on windows.location urls not in the nav, indefined on edit/create pages with id number
if (typeof currentLink[0] !== 'undefined') {
if (currentLink[0].closest(".nav-treeview") !== null) {
currentLink[0].classList.add("active");
currentLink[0].closest(".nav-treeview").style.display = 'block';
currentLink[0].closest(".has-treeview").classList.add("active");
currentLink[0].closest(".has-treeview").classList.add("menu-open");
}
}
});
I also added: currentLink[0].closest(".has-treeview").classList.add("menu-open");
This will toggle the collapsing of the higher level item possible, without it you had to click the higher level nav twice before it would toggle close.

Adminlte4
$(document).ready(function(){
const url = window.location;
$('ul.nav-sidebar a').filter(function() {
return this.href == url;
}).parent().addClass('active');
$('ul.nav-treeview a').filter(function() {
return this.href == url;
}).parentsUntil(".sidebar-menu > .nav-treeview").addClass('menu-open');
$('ul.nav-treeview a').filter(function() {
return this.href == url;
}).addClass('active');
$('li.has-treeview a').filter(function() {
return this.href == url;
}).addClass('active');
$('ul.nav-treeview a').filter(function() {
return this.href == url;
}).parentsUntil(".sidebar-menu > .nav-treeview").children(0).addClass('active');
});

Solution without JQuery :
JS Code :
function isActiveElement (route, device, domain, classAsked) {
var pathName = window.location.pathname;
var routeName = pathName.split("/")[1];
var deviceName = pathName.split("/")[2];
var domainName = pathName.split("/")[3];
var className = ""
if(route !== "" && routeName === route) {
className = classAsked;
}
if(domain !== "" && domainName !== domain) {
className = "";
}
if(device !== "" && deviceName !== device) {
className = "";
}
return className;
}
HTML Code :
<li className={"nav-item has-treeview " + isActiveElement(route, "", domain, "menu-open")}>
<a href="#" className={"nav-link " + isActiveElement(route, "", domain, "active")}>

I'm using this code to add active class depending of the page.
This is working ok except for multi level submenus any clue how to fix this,
add active class and stay opened when selected
var url = window.location;
// for sidebar menu entirely but not cover treeview
$('ul.sidebar-menu a').filter(function() {
return this.href == url;
}).parent().addClass('active');
// for treeview
$('ul.treeview-menu a').filter(function() {
return this.href == url;
}).closest('.treeview').addClass('active');
**HTML**
<li class="treeview">
<a href="#">
<i class="fa fa-gears"></i>
<span>Settings</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li>
<a href="#">
<i class="fa fa-bars"></i>
Specials Settings
</a>
<ul class="treeview-menu">
<li>Setting 1</li>
</ul>
</li>
</ul>
</li>

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.