I have a question for you.
I have a sidebar with a dropdown "toggle buttons". The code HTML are the following.
<div class="container-fluid">
<div class="row">
<nav class="col-md-2 d-none d-md-block bg-dark sidebar">
<div class="sidebar-sticky">
<ul class="nav flex-column">
<li class="nav-item" id="sidebar">
<a class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1" href="#firstSubmenu" data-toggle="collapse"
aria-expanded="false" class="dropdown-toggle">Performance Monitoring<span data-feather="plus-circle"></span></a>
<ul class="collapse list-unstyled" id="firstSubmenu">
<li>
<a class="nav-link" href="#">
<span data-feather="monitor"></span>
Dashboard</a>
</li>
<li>
<a class="nav-link" href="/conto_economico">
<span data-feather="trending-up"></span>
Conto Economico</a>
</li>
....
All works perfectly, but If I open my dropdown menu and after I update or change the url page, the dropdown menu collapse and I'm force do open it again.
So I looked for a jQuery code that give me the possibility to achive my aim. I fund that it's possibile to use localStorage to memorize if a dropdown menu is open or not and when upload the page give the same opened and closed dropdown menu.
I have tried to adapt the code for my aim, but I'm not good at jQuery code. I have tried the following code but does not work
$("#sidebar li a").on("click", function() {
// get index of parent `<li>` within it's siblings
var container = $(this).closest("li");
var selected_item_index = $("#sidebar li").index(container);
localStorage.setItem("sidebar_selected", selected_item_index);
});
$(function() {
$("#sidebar li").eq(parseInt(localStorage.getItem("selected_item_index "))).addClass("active").siblings().removeClass('active');
});
You have set the container as li element and you are trying to find its index in set of anchor element. You need to instead find the index in set of li element. like this
var container = $(this).closest("li");
var selected_item_index = $("#sidebar li").index(container);
Also, You may want to remove the active class from other sibling elements after setting the li class active using setStorage. Also, the keyname used for getstorage and setstorage are different. They should be same instead
$("#sidebar li").eq(parseInt(localStorage.getItem("sidebar_selected "))).addClass("active").siblings().removeClass('active');
Related
So, the website I'm working on is: http://wtr2022.webparity.net/. The link for the example is below.
How to change active class while click to another link in bootstrap use jquery?
So, I'll show the code I'm using and wrote and where to find it in the JS file.
HTML:
The below starts on line 77 when you open the DEBUG console or scroll to the tag.
<nav class="navbar navbar-expand-lg navbar-dark ftco_navbar bg-dark ftco-navbar-light sticky-top" id="ftco-navbar">
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#ftco-nav" aria-controls="ftco-nav" aria-expanded="false" aria-label="Toggle navigation">
<span class="fa fa-bars"></span> Menu
</button>
<div class="collapse navbar-collapse" id="ftco-nav">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">Home</li>
<li class="nav-item">About</li>
<li class="nav-item">Services</li>
<li class="nav-item">Project</li>
<li class="nav-item">Blog</li>
<li class="nav-item">Roofing</li>
<li class="nav-item">Contact</li>
</ul>
<div class="d-flex align-items-center justify-content-center">
<img src="images/logos/weathertight-logo.png" class="logosmaller" alt=""/>
<!-- <span class="flaticon-roof-2"></span> -->
</div>
<div class="col-3 d-flex justify-content-end align-items-center">
<div class="social-media">
<p class="mb-0 d-flex">
<span class="fa fa-facebook"><i class="sr-only">Facebook</i></span>
<span class="fa fa-twitter"><i class="sr-only">Twitter</i></span>
<span class="fa fa-instagram"><i class="sr-only">Instagram</i></span>
<span class="fa fa-dribbble"><i class="sr-only">Dribbble</i></span>
</p>
</div>
</div>
</div>
</div>
</nav>
<!-- END nav -->
JS:
The below starts on line: 194 or scroll until you find this code.
$('.navbar-nav li a').click((e) => {
$('.active').removeClass('active');
console.log("Argument for CLICK FUNCTION: ", e.currentTarget.innerHTML);
console.log("CURRENT TARGET for CLICK FUNCTION: ", e.currentTarget.parentElement);
if (e.currentTarget.innerHTML === "Services") {
funcs.changeAboutImage('sprayfoam');
}
// add the active class to the link we clicked
// console.log("THIS: ", $(this));
$(this).addClass('active');
// e.preventDefault();
});
/* Code for changing active link on clicking */
let btns = $("#ftco-nav .navbar-nav .nav-link");
for (let i = 0; i < btns.length; i++) {
btns[i].addEventListener("click",
() => {
let current = document.getElementsByClassName("active");
console.log("CURRENT: ", current);
// current[0].className = current[0].className.replace(" active", "");
// this.className += " active";
});
}
/* Code for changing active
link on Scrolling */
$(window).scroll(() => {
let distance = $(window).scrollTop();
// console.log($(window).scrollTop());
if ($(window).scrollTop() > 701) {
$('#ftco-navbar').addClass('navbar-fixed');
}
if ($(window).scrollTop() < 700) {
$('#ftco-navbar').removeClass('navbar-fixed');
}
$('.ftco-section').each(function (i) {
if ($(this).position().top <= distance + 250) {
$('.navbar-nav a.active').removeClass('active');
$('.navbar-nav a').eq(i).addClass('active');
}
});
}).scroll();
Here's what happens:
FIRST:
When I click on the FIRST SLIDE, "Learn more..." button, it needs to scroll to the GET A QUOTE section so the YELLOW bar with the words, GET A QUOTE appear. It's not.
SECOND:
If you start from the base URL http://wtr2022.webparity.net/ and SCROLL until the menu appears, you'll see HOME as active. BUT, when you click on About, or any other menu, the active menu fails to become highlighted.
THIRD
When you start at the base URL and SCROLL to "Roofing Services We Offer", below, you'll see SPRAY FOAM ROOFING already active, BUT, whenever you click on a menu, the ACTIVE spray foam menu and content is not active and nothing is there UNLESS you click on it.
This is what happens when you CLICK on a menu and scroll to Roofing Services We offer:
I think that the ACTIVE menu is TIED together, meaning, when the addEventListener() is hit, it REMOVES ALL active classes from everything, hence, the reason.
If anyone can assist me, I'd appreciate it. Thank you.
Your click handler on the <a> tags is adding/removing the .active class to the <a> tag but it should be doing it to the parent <li> tag:
$('#ftco-nav .navbar-nav li a').click((e) => {
$('#ftco-nav .active').removeClass('active');
$(e).parent().addClass('active');
// ...
}
Your scroll handler has a similar problem. It should be adding/removing the .active class from the <li class="nav-item"> tags, not the <a> tags:
if ($(this).position().top <= distance + 250) {
$('#ftco-nav .navbar-nav .nav-item.active').removeClass('active');
$('#ftco-nav .navbar-nav a').eq(i).parent().addClass('active');
}
I am trying to display the content of the selected side navigation item, but somehow my data-toggle ="tab" is not working. I have searched it on several forums, made changes accordingly but still could not get it to work. As was suggested, I included the jquery link before the bootstrap link and I am using Bootstrap v3.3.7 (http://getbootstrap.com).
script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"
The part of the code is as follows:
<script>
$(document).ready(function () {
$('#sidebarCollapse').on('click', function () {
$('#sidebar').toggleClass('active');
});
});
</script>
<div class="container">
<div class="row">
<div class="wrapper">
<nav id="sidebar">
<div class="sidebar-header">
<li>Events<span class="caret"></span>
<ul class="collapse list-unstyled" id="eventSubmenu">
<li > Link1 </li>
<li > Link2 </li>
</ul>
</li>
As you can see in the image the data-toggle does not change its color, in short it is not considered as a keyword
I am trying to take content from a nav bar, and then modify and append it to a mobile menu. The nav bar html looks like
<div id="top_bar" class="nav">
<div class="container">
<div class="row">
<nav class="clearfix">
<span>My Account</span>
<span> Rewards</span>
<span>Customer Service</span>
</nav>
</div>
</div>
</div>
I need to append the anchors above to the following menu and have them work in the format below.
<ul id="stmobilemenu" class="visible-xs visible-sm show">
<li class="stmlevel0">first</li>
<li class="stmlevel0">second</li>
<li class="stmlevel0">third</li>
</ul>
I tried to do this like
var add_to_menu;
$('#top_bar nav a').each(function(){
var line = '<li class="stmlevel0">';
$(this).addClass('ma_level_0');
line += $(this).html();
line += '</li>';
add_to_menu += line;
})
$('#stmobilemenu').append(add_to_menu);
The result of this was it added undefined, then it added only the content
so appeneded was in this type of format.
<li class="stmlevel0"><span>My account</span></li>
what I want it to add is in this type
<li class="stmlevel0"><span>My account</span></li>
Another thing I tried was
$('#stmobilemenu').append(
$('#top_bar nav a').each(function(){
$(this).prepend('<li class="stmlevel0">');
$(this).addClass('ma_level_0');
$(this).append('</li>');
}));
I had a few problems with this though, first of all the append and prepend were not actually surrounding the html I want. It comes out like
<a href="http://127.0.1.1:8080/my-account" class="top-bar-link ma_level_0">
<li class="stmlevel0"></li>
<span>My account</span>
</a>
So I need that li to actually surround the a. Also it actually removed the content of #top_bar nav a from its original spot, which is not what I want it to do. I want it only to copy and add to the mobile menu. Can someone help?
Use clone() to make a copy of each <a>
var $mobMenu= $('#stmobilemenu');// store reference to menu element
$('#top_bar nav a').each(function(){
var $link = $(this).clone().removeClass().addClass('ma_level_0');
$('<li class="stmlevel0">').append($link).appendTo( $mobMenu);
});
var anchors = $('#top_bar nav').children();
anchors.each(function(){
var $this = $(this),
$li = $('<li class="stmlevel0"></li>');
$this.removeClass().addClass('ma_level_0').appendTo($li);
$li.appendTo('#stmobilemenu');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="top_bar" class="nav">
<div class="container">
<div class="row">
<nav class="clearfix">
<span>My Account</span>
<span> Rewards</span>
<span>Customer Service</span>
</nav>
</div>
</div>
</div>
<ul id="stmobilemenu" class="visible-xs visible-sm show">
<li class="stmlevel0">first</li>
</ul>
I am using Bootstrap and I want when the user clicks a nav link to remove class from current < li > (this works) and add active class to the clicked one (this does not).
The second thing is that I want to update the .container-fluid div using AJAX .load() but for some reason does not work. I have a separate html file. I did it before but not using Bootstrap and code worked so I do not know what is the problem now.
Code below
$('nav a').on('click', function(event) {
event.preventDefault();
/* Act on the event */
var url = this.href;
$('nav li.active').removeClass('active');
$(this).addClass('active');
$(".content").remove();
$(".container-fluid").load(url + '.container-fluid').hide().fadeIn('slow');
});
HTML - nav
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
<other bits>
<ul class="nav navbar-nav">
<li class="active">One </li>
<li>Two</li>
<li>Three</li>
And HTML - just the divs responsible for swapping divs on both HTML sites look like this.
<div class="container-fluid">
<div class="content">
<div class="row">
<div class="col-xs-12 col-sm-10 col-md-10 col-sm-offset-1 col-md-offset-1">
<div class="row">
you need to add class to li
change your code to
$(this).parent("li").addClass('active');
which will add the active class to li that has wrapped a
I've asked this question here but another problem came up so I decided to keep the old one for reference purposes. Old question here.
The old question was just about updating the class of a main-menu based on the url but now things have changed. I will provide the new sidebar below.
Sidebar without any active class yet
<div class="sidebar-scroll">
<div id="sidebar" class="nav-collapse collapse">
<!-- BEGIN SIDEBAR MENU -->
<ul class="sidebar-menu">
<li class="sub-menu">
<a class="" href="panel-admin.php">
<i class="icon-dashboard"></i>
<span>Dashboard</span>
</a>
</li>
<li class="sub-menu">
<a href="javascript:;" class="">
<i class="icon-calendar"></i>
<span>Scheduling</span>
<span class="arrow"></span>
</a>
<ul class="sub">
<li><a class="" href="admin-foreign.php">Foreign Languages</a></li>
<li><a class="" href="admin-esl.php">ESL Local</a></li>
<li><a class="" href="admin-workshop.php">Summer Workshops</a></li>
</ul>
</li>
</ul>
<!-- END SIDEBAR MENU -->
</div>
</div>
It would look like this:
Dashboard
Scheduling
--> Foreign Languages
--> ESL Local
--> Summer Workshops
As you can see Scheduling has a sub-menu.
Then how it would look like if I am on the dashboard. The sidebar would look like this
<div class="sidebar-scroll">
<div id="sidebar" class="nav-collapse collapse">
<!-- BEGIN SIDEBAR MENU -->
<ul class="sidebar-menu">
<li class="sub-menu [active]"> //without the []
<a class="" href="panel-admin.php">
<i class="icon-dashboard"></i>
<span>Dashboard</span>
</a>
</li>
<li class="sub-menu">
<a href="javascript:;" class="">
<i class="icon-calendar"></i>
<span>Scheduling</span>
<span class="arrow"></span>
</a>
<ul class="sub">
<li><a class="" href="admin-foreign.php">Foreign Languages</a></li>
<li><a class="" href="admin-esl.php">ESL Local</a></li>
<li><a class="" href="admin-workshop.php">Summer Workshops</a></li>
</ul>
</li>
</ul>
<!-- END SIDEBAR MENU -->
</div>
</div>
So the Dashboard would be highlighted in this scenario
And how it would look like if Im on any of the sub-menu under Scheduling
<div class="sidebar-scroll">
<div id="sidebar" class="nav-collapse collapse">
<!-- BEGIN SIDEBAR MENU -->
<ul class="sidebar-menu">
<li class="sub-menu">
<a class="" href="panel-admin.php">
<i class="icon-dashboard"></i>
<span>Dashboard</span>
</a>
</li>
<li class="sub-menu [active]">
<a href="javascript:;" class="">
<i class="icon-calendar"></i>
<span>Scheduling</span>
<span class="arrow"></span>
</a>
<ul class="sub">
<li [class="active"]><a class="" href="admin-foreign.php">Foreign Languages</a></li>
<li><a class="" href="admin-esl.php">ESL Local</a></li>
<li><a class="" href="admin-workshop.php">Summer Workshops</a></li>
</ul>
</li>
</ul>
<!-- END SIDEBAR MENU -->
</div>
Since I am in the Foreign Languages section. The main header Scheduling and this Foreign Langauges would be active but different class. The active class of Scheduling is sub-menu active while Foreign Languages would just have active only.
And javascript that I've tried no longer applies here since it only handles menus without any dropdown. And it didn't work anyway
Old javascript
<script type="text/javascript">
jQuery(function($) {
var path = window.location.href; // because the 'href' property of the DOM element is the absolute path
//alert($('ul a').length);
$('ul a').each(function() {
if (this.href === path) {
$(this).addClass('sub-menu active');
}
//alert(this.href);
});
});
</script>
The goal here is to put a "active" class to the section of the sidebar based on the url the user is in. I've just include('sidebar.php') this sidebar so I would only change this file rather than put a sidebar in each php page file. But then the main heading and the dropdown menu has different active classes.
Found the solution with the help of gecco. The javascript is below:
<script type="text/javascript">
jQuery(function($) {
var path = window.location.href; // because the 'href' property of the DOM element is the absolute path
$('ul a').each(function() {
if (this.href === path) {
$(this).addClass('sub-menu active');
$(this).parent().closest("li").addClass('active'); //added this line to include the parent
$(this).parent().parent().closest("li").addClass('active');
}
});
});
</script>
I was already halfway with using php to do this HAHAHAHA. if current_url = db_page_url then put echo class=active. HAHAHA.
<script type="text/javascript">
jQuery(function($) {
var path = window.location.href; // because the 'href' property of the DOM element is the absolute path
$('ul a').each(function() {
if (this.href === path) {
$(this).addClass('sub-menu active');
$(this).parent().parent().closest("li").addClass('active2');
}
});
});
</script>
The only change I have done here is adding another line to your JS
$(this).parent().parent().closest("li").addClass('active2');
And here is my style sheet
.active2 > a{
color:red; //what ever the styles you want
}
OR
You can do it without a style
jQuery(function($) {
var path = window.location.href;
$('ul a').each(function() {
if (this.href === path) {
$(this).addClass('sub-menu active');
$( this ).parent().parent().closest("li").addClass('active2');
$('.active2 a:first').addClass('active'); //add the active class to the parent node
}
});
});