So I have a simple menu and I'm trying to remove/add an active class to the clicked menu item.
$(function(){
$('ul.navbar-nav li').click(function(){
$('ul.navbar-nav li').removeClass('active');
$(this).addClass('active');
});
});
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>work</li>
<li>methods</li>
<li>blog</li>
<li>team</li>
<li>contact</li>
</ul>
The issue I'm having is this works but since going to a new page refreshes the site once I'm in the new page the active class always goes back to the initial active class in my HTML. I feel like I've done this a number of times and never had this issue. Maybe I'm missing something.
As you redirecting new page on each link click, so dynamically added active class is removed on page load. You can do it like following.
Remove the active class from home menu and add specific href to this like below.
<li class="active">Home</li>
jQuery
$(function () {
$('ul.navbar-nav > li > a').each(function () {
if (window.location.pathname.indexOf($(this).attr('href')) > -1) {
$(this).closest('li').addClass('active');
return false;
}
});
});
There is more than just one file in your project, right?
I would copy the whole ul navbar and paste it into every single page. All you have to do after that, is to put the active class on the respective li element.
Update: None of your li's should have an active class and then add the active class on page load.
/menu.html
<ul class="nav navbar-nav">
<li class="home">Home</li>
<li class="work">work</li>
<li class="methods">methods</li>
<li class="blog">blog</li>
<li class="team">team</li>
<li class="contact">contact</li>
</ul>
js could be something like this
var page = window.location.pathname.split('/')[1];
$('li.' + page).addClass('active');
You can try following things
$(function()
{
$('ul.navbar-nav li').click(function(event)
{
$('ul.navbar-nav li').removeClass('active');
$(this).addClass('active');
event.preventDefault();
});
});
Prevent default would avoid anchor tag tag default action to reload the page. So this should work.
Or if you do not need to go to another page then you can use div instead anchor tag.You can simulate anchor tag behaviour using :hover css selector.
div:hover
{
color:blue;
cursor:pointer;
font-style:underline;
}
This seems to be working:
HTML:
<ul class="nav navbar-nav">
<li id="liHome">home</li>
<li id="liWork">work</li>
<li id="liMethods">methods</li>
<li id="liBlog">blog</li>
<li id="liTeam">team</li>
<li id="liContact">contact</li>
</ul>
The event handler:
$('ul.navbar-nav li').click(function(){
window.sessionStorage.activeMenuItem = this.id;
});
When the page has loaded:
if (window.sessionStorage.activeMenuItem) {
$("#"+sessionStorage.activeMenuItem).addClass('active');
}
From https://developer.mozilla.org/en/docs/Web/API/Window/sessionStorage:
A page session lasts for as long as the browser is open and survives over page reloads and restores.
One problem with this solution is that you cannot open links in a new window, since:
Opening a page in a new tab or window will cause a new session to be initiated, which differs from how session cookies work.
You're likely in one of three scenarios:
A) You have a collection of static HTML pages with unique content.
B) You're using a server-side language and doing some basic includes
C) You're using a framework with routing logic.
A If you have two pages both containing the menu code, then it's as simple as moving the default active class.
<!-- Home -->
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>work</li>
…
</ul>
<!-- Work -->
<ul class="nav navbar-nav">
<li>Home</li>
<li class="active">work</li>
…
</ul>
B Assuming you're using PHP then something like the following is an easy way to pass this info around:
// menu.php
<ul class="nav navbar-nav">
<li <?php if($page = 'home'){ echo 'class="active"' } ?>>Home</li>
…
</ul>
// home.php
<?php
$page = 'home';
include(menu.php);
…
C This will largely depend on the framework you're using, but most will have template helpers that can access the current route, something like:
<ul class="nav navbar-nav">
<li <% is_route('home') class="active" %>>Home</li>
But adding classes after DOM load with javascript or using session or cookie states is likely over the top.
Related
I have a menu with several options, I would like to know how to load different HTML into the same div (called #content) depending on the buttons you press of the menu.
I have this code for the menu:
<div id="mainmenu">
<ul id="menu">
<li>Accueil</li>
<li>Qui suis-je?
<ul>
<li>Biographie</li>
<li>Discographie</li>
</ul>
</li>
<li>Porfolio</li>
<li>Contact</li>
</ul>
</div>
What do I need to do to send, for example, "index.html" into div#content when I press in the menu the option "Accueil"?
Using jQuery ajax you can do it
HTML
<div id="mainmenu">
<ul id="menu">
<li>Accueil</li>
<li>Qui suis-je?
<ul>
</div>
JAVASCRIPT(jQuery)
$(function(){
$('#menu li a').on('click', function(e){
e.preventDefault();
var page_url=$(this).prop('href');
$('#content').load(page_url);
});
});
jQuery load
You can use jQuery, it makes stuff like this easy:
Then you can do this:
$('#content>div').load('index.html');
You can either put this in onclick on some button, or in other place in your javascript code...
Is there a simple way to toggle the active link in a basic bootstrap navbar without writing any javascript?
Here's my navbar
<div class="navbar navbar-static-top">
<div class="navbar-inner">
<div class="container">
<div>
<ul class="nav" ng-show="isAuthenticated">
<li class="active">Create Activity</li>
<li>Manage Activities</li>
<li>Super User</li>
</ul>
</div>
</div>
</div>
</div>
Well, im not 100% sure (im not that good with javascript), but you could do a few if statements.
if($url=="/activity/create") {echo "class='active'";}
This is the php syntax. Try something out with JS.
BTW you are using node.js which is JS, so you wouldnt be able to do it without JS.
You can set the class attribute to "active" via JS. I do this with an external script, here's a snippet:
setActive();
function setActive() {
activePath = document.location.pathname; //get the url of current page
switch(activePath) {
//evaluate activePath (more efficient than nested IFs)
case "/uptime/":
//if current page path is /uptime/
document.getElementById('navuptime').className = "active";
//set class of element with ID='navuptime' to "active"
break;
//break out of switch statement, we're all done
case "/uptime/domain/":
//if current page path is /uptime/domain/
document.getElementById('navuptime').className = "active";
//just like above, set class of element with ID='navuptime' to "active"
document.getElementById('navdomain').className = "active";
//also set the nested navbar element class attribute to "active"
break;
//break out of switch statement, we're all done
default:
//used if no match was found
break;
//i don't do anything if no match was found
}
When adding a page to the site you have to update the script as well, but it's just one more case inside the switch statement.
Here is a snippet of my navbar HTML:
<div class="collapse navbar-collapse navbar-ex1-collapse nudge-left">
<ul class="nav navbar-nav navbar-right">
<li><a id="navwifi" href="/wifi">Guest WiFi</a></li>
<li class="dropdown"><a id="navuptime" class="dropdown-toggle" data-toggle="dropdown" href="#">Uptime Monitoring<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a id="navwan1" href="/uptime/wan1">WAN 1 Connection</a></li>
<li><a id="navwan2" href="/uptime/wan2">WAN 2 Connection</a></li>
<li><a id="navdomain" href="/uptime/domain">Domain</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
You can see each navbar element has a unique ID for the JS to update. This method is manageable for my small site (less than 50 pages).
If page urls such as domain.com/uptime/page.html are used the switch statement won't find a match as it's written above... document.location.pathname would return /uptime/page.html.
I always use an index.html file in each directory to keep the URL clean and my visitors only have to type domain.com/uptime.
I've been trying out solutions to similar cases but none of them work so far.
Here's the problem, I have 2 html files total. On my navigation bar, I have 4 options. 3 of them refer to id's on the same page(index) and the 4th refers to the separate page. Now coming from the separate page back to the index, the active menu item isn't the right "active" one. Like if I click on 'about' on the support page, the active menu item is 'home'. or if I click on 'contact', the active menu item becomes 'about'. The content that appears is correct. But the active menu item isn't.
Here's from the index.html file:
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="current">Home</li>
<li>About</li>
<li class="support" >Support</li>
<li >Contact</li>
</ul>
</div>
and here's from support.html:
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>About</li>
<li class="current">Support</li>
<li >Contact</li>
</ul>
</div>
This is one of the solutions that I tried with no results:
https://stackoverflow.com/a/11539359
JS is not my strong suit, thank you so much for your help!
There were lot of issues with the way you are loading scripts for example
$(document).ready(function() {
$('#ind').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
});
you are calling this before the jquery is loaded so it gives $ is undefined error, so the solution is to move all the script at the end, and there is one inline script also for menu handler, move that to document ready functions
I have included the fix in the following file HTML Zip files, you will find all JS moved to end. Its working fine for me now
One more thing make your contact height same as other container or remove extra margin/padding from Physicians section
I am trying to make a jquery menu that when I click on one of the links (with reloading the page), it changes its class to "active" and removes this class when I click on another link.
here is my code :
enter code here`$(document).ready(function(){
$(function(){
$("a").click(function(){
$(this).parent().addClass('inny').siblings().removeClass('inny');
});
});
});
<ul id="mainMenu">
<li class="hover-width1">STRONA GŁÓWNA</li>
<li class="hover-width3">OFERTA</li>
<li class="hover-width3">CENNIK</li>
<li class="hover-width2">PRZEPISY</li>
<li class="hover-width2">GALERIA</li>
<li class="hover-width1">NASI KLIENCI</li>
<li class="hover-width2">NARZĘDZIA</li>
<li class="hover-width1">CIEKAWOSTKI</li>
<li class="hover-width2">KONTAKT</li>
</ul>
Can someone tell me why my code is not working when I reload the page:(
You can use $(document).ready(function(){ or $(function(){ to init jquery code, but not both at the same time.
$(function(){
$("a").click(function(){
$(this).parent().addClass('inny').siblings().removeClass('inny');
});
});
The code should work fine, and when you reload the page the markup changes won't stay up, so you must make use of the uri / cookies to determine what item to show active.
I have looked around for a solution to this problem, but it's so wonky that I doubt many people have considered it. A web application that I've recently inherited as a web administrator runs on Drupal (version 6). Unfortunately, I am unable to edit the Drupal install or create a custom theme until May due to other obligations that must be tended to first.
First off, I realize and whole-heartedly agree that there are more efficient (and elegant) ways of solving this problem, but for the time being, this is what the client wants and is comfortable with implementing.
Anyways, the old administrator was using Drupal to develop the site's navigation. The code that Drupal spits out on the HTML page is:
<ul class="menu">
<li class="expanded first">Housing
<ul class="menu">
<li class="leaf first">Housing Roster</li>
<li class="leaf">My Floor</li>
<li class="leaf">Photo Viewer</li>
<li class="leaf last">Building Maintenance</li>
</ul>
</li>
<li class="expanded">Reports
<ul class="menu">
<li class="leaf first">Build Floor Report</li>
<li class="leaf">Submit Incident Report</li>
<li class="leaf last">Submit Lockout</li>
</ul>
</li>
<li class="expanded">Office
<ul class="menu">
<li class="leaf first">Check In Package</li>
<li class="leaf">Check Out Building Package</li>
<li class="leaf">Check Out Campus Package</li>
<li class="leaf last">Check Equipment Out</li>
</ul>
</li>
<li class="expanded">Staff
<ul class="menu">
<li class="leaf first">Pre Programs</li>
<li class="leaf">Post Program</li>
<li class="leaf">Programming Database</li>
<li class="leaf last">Staff Downloads</li>
</ul>
</li>
<li class="leaf">My account</li>
<li class="leaf last">Log out</li>
The biggest concern I have with this output is that there is a ul element with the class attribute of "menu" nested inside of another ul element with the class attribute of "menu."
The goal of the JavaScript function that I am writing is to
Allow for jQuery to expand and collapse the child ul element whenever the respective li element with a class of "expanded" is clicked
Change the href attribute of ONLY the li elements with a class of "expanded" to "javascript:void(null)" so that they don't redirect the user to any page
Here is the JavaScript function that I've got going so far:
<script type="text/javascript">
$(function() {
//Hide the nested lists
$('ul.menu li.expanded ul.menu').hide();
//Change the destination of the header links
$('ul.menu li.expanded a').attr("href", "javascript:void(null)");
//Toggle the display of the nested lists
$('ul.menu li.expanded a').click(function() {
$(this).next().slideToggle('normal');
});
});
</script>
This works just fine, except it changes the href attribute of the nested li elements to "javascript:void(null)" as well. Is there a way that I can alter my JavaScript function to make sure that it applies the new href attribute ONLY to the li elements with a class of "expanded" and not to the li elements with a class of "leaf?"
At this point, I'm really only interested in an alteration of my JavaScript function. Like I said, I know and agree that there are better methods (such as altering the html output of the Drupal theme to begin with), but if I can get a quick fix in as a temporary solution while I rebuild the entire application, that would be awesome!
Please let me know if you have any suggestions!!!
THANKS!!!
Use a more specific selector:
$('ul.menu > li.expanded > a').attr( ...
The > matches only immediate children instead of all children.
If you're just trying to prevent the browser from following the href, you don't need the "javascript:void(null)". What you want to do instead is to stop the event from propagating:
$("ul.menu li.expanded > a").click(function(event) {
event.stopPropagation();
...
});
You could try
$('ul.menu li.expanded>ul.menu').hide();
This makes it apply only to the next element.
Another way would be to use
$('ul.menu li.expanded ul.menu:first').hide();
You can use the direct child selector ">".
e.g:
<script type="text/javascript">
$(function() {
//Hide the nested lists
$('ul.menu li.expanded ul.menu').hide();
//Change the destination of the header links
$('ul.menu li.expanded > a').attr("href", "javascript:void(null)");
//Toggle the display of the nested lists
$('ul.menu li.expanded > a').click(function() {
$(this).next().slideToggle('normal');
});
});
</script>