I've implemented a lava lamp style navigation menu (from here) to work with my WordpPress blog's navigation menu. This function needs to select an id or class for the navigation menu link it is supposed to hover over. I set this up in the function's code to select <li class="current_page_item">, which is a class applied by WordPress to the navigation list element that corresponds to the page you're on.
The problem is that when you're on a post permalink page, category page, or on an older page, the lava lamp function doesn't work because none of the navigation list items have the current_page_item class since they're not pages that are reached by the navigation menu.
On these pages (any page not on the nav menu), I just want the slider to default to the "home" link.
The simplest solution I could think of would be to write a piece of javascript & jQuery that does the following before I run the lava lamp function: if no <li> has class="current_page_item", then addclass "current_page_item" to first <li> I just don't know enough JS or jQuery to write this.
Thanks.
You can't!
Nahhh just kidding, do it this way,
$(function(){
var $menu = $('ul#menu');
// look for <li class="current_page_item"> , .length would return greater than zero if there is matched element.
if (! $menu.find('.current_page_item').length ) {
// add the class on the first child if no matched...
$menu.children('li:first-child').addClass('current_page_item');
}
});
Related
I am developing a website and would like to add some jQuery functionality to a page. Basically, the page has a sidebar with a menu (showing all sections of this one page). I have added the functionality that when you click a menu item, the main section scrolls down to the proper section.
I've managed to add an active class on these menu items when they are clicked using jQuery. See:
$('#category-list li a').click(function(){
$('#category-list li a').removeClass("category-list-active");
$(this).addClass("category-list-active");
});
But I'd like to add the same functionality for when the user scrolls down the page (AKA when one section hits the top of the page, the corresponding menu item get's the active state class).
Since the site is in development for a client, I can't really show it but if I need to I can re-create something similar.
Thanks in advance,
Andy
You can try something like this
var fl = $("#your-section").offset().top;
$(window).scroll(function() {
if(this.scrollTop() > fl) {
// do your stuff
}
})
You may have to play with the offset to find the exact position where the transition should take place.
I have made some menu with a slide down submenu. It should work fine but for some reason it doesn't work. I mean if you look at this fiddle: http://jsfiddle.net/yJdFu/2/ , you'll see that the big menus don't slide down when the submenu toogles.
Can you tell me why isn't it working ?
It is actually working. The problem is you have a specified height to the list items. So the submenu is appearing below the existing items.
Remove the height from the list items.
Updated Fiddle
You weren't missing any closing tags. The html is correct. Error was in CSS. Also, I altered the jquery a bit. not sure why you were using .find() when the item can be called by it's class, and I specified which toggle to use.
This fiddle uses jquery which specifies the toggle only occurs on the "dashboard" link. Otherwise the sub navigation closes when one of its links is clicked.
You are missing a closing </li> tag.
<li class="dashboard"><a href="#">
<img src="assets/gfx/dashboard.png" alt="Dashboard">
<span>Dashboard</span></a>
</li>
see here http://jsfiddle.net/yJdFu/4/
As Roland said above, you may also want to look at the built-in JQuery UI Accordion before rolling your own solution.
I asked my first question last night. Can't believe how helpful this site and its members are. Thank you!
Here's my problem:
I have tabbed navigation to move within a page. There are 4 tabs and the HTML is (I had to remove the links to post bc of the spam filter):
<ol id="toc">
<li><span>Top 3</span></a></li>
<li><span>Reviews</span></a></li>
<li><span>Places to Buy</span></a></li>
<li><span>History</span></a></li>
</ol>
When you click one of those nav links (say, Top 3), you're taken to this:
<div class="tabcontent" id="Top3>
Here's content
</div>
Thanks to helpful answers on this site, I've been able to append all content in #Getit to the bottom of all the other 'tabcontent' nav areas. But when I use this code:
$('.tabcontent#Getit').clone().appendTo('.tabcontent')
It duplicates the Getit tab within the Getit tab, too. Is there anyway to make it so that if someone is viewing the Getit tab that the content won't be appended there and will only be appended to the other tabcontent classes?
Does toggle work that way?
jQuery's .toggle() merely sets an element's display to none if the element is currently visible, or sets it to the appropriate value to display the element if the it is currently hidden. It can also be passed a boolean param which says to force display (true) or hide (false) on the element.
I don't see how it's related to this at all.
If I understand the problem you're having, however, (and it's likely I don't...) you should look into the .not() filtration method:
http://jsfiddle.net/vJc6r/1/
var getit = $( '#Getit' );
getit.clone().appendTo( $( '.tabcontent' ).not( getit ) );
So I'm very much a jQuery noob and I don't know whether the following is possible - at least as I'm thinking of it - or how to do it.
The current setup
http://joelglovier.com
So I have a one page mini-site with a fixed navigation at the top of the screen. All (but one) of the navigation elements simply scroll the user down to the corresponding div down the page. I have that all set up just fine.
What I want to do...
I want to use jQuery to add a class of "active" to the list item anchors when they are positioned over their respective div on the page. Preferably it would not use the click function, so that even users who simply scroll down the page without clicking on the nav elements to get their would experience the same thing. Similar to the phpfog home page.
I peeked at the way phpfog.com has it setup and from what I could see it's using some type of calculation with the window selector to apply the class, but A) I don't completely understand what it's doing or how to build something similar, and B) I don't know if they are doing it in the most straightforward manner.
I wrote out what I want to accomplish in a plain english statement, since I don't have a mastery on jQuery enough yet to write it out in a syntax:
If .section-link is in the window on the
href value of same id, add class of
"active"
So here's the code I have (HTML only, the CSS is irrelevant bc I already know how I want to style it, just want to add the active class at the appropriate place):
<div id="site-nav">
<div class="wrap">
<ul id="nav-links">
<li class="section-title-nav top">
<h4>Home</h4>
</li>
<li class="section-title-nav skills">
<h4>Background</h4>
</li>
<li class="section-title-nav projects">
<h4>Projects</h4>
</li>
<li class="section-title-nav blog">
<h4>Blog</h4>
</li>
<li class="section-title-nav random">
<h4>Random</h4>
</li>
<li class="section-title-nav credits">
<h4>Credits</h4>
</li>
</ul>
</div>
</div>
And further down the page, sections that are linked to in the nav are marked up about like this:
<div id="random-section" class="main-section wrap clearfix">
<h2 class="section-title"><span class="bg">Random</span></h2>
<span class="section-title-border"></span>
<h2 class="coming-soon">COMING SOON</h2>
</div><!--/#random-section-->
So, and tips on how to accomplish this, or whether I'm thinking about it the wrong way is what I'm looking for. Thanks!
Here's a working example I put together; I will be the first to admit it can be improved but it might give you a decent starting point to work from.
http://jsfiddle.net/nogoodatcoding/KMwhZ/1/
The basic idea is to listen for scroll events on the window and then, for each navigation link, extract the href value and check if the corresponding element is visible or not. If it is, then it's link is selected and the previously highlighted element is deselected. I'm breaking early when the first visible section is found, you can get slightly different behaviour by going all the way through the list.
My example breaks when the divs are small enough in height that multiple divs are visible when the page is scrolled all the way to the bottom - in the case, the links for the lowest few divs will never get hightlighted. But that appears to be the case even with the phpfog page you linked to - the links for Testimonials and Free Tools never get activated because my display is tall enough to show the last 3 sections when scrolled all the way down. Note that this won't be the case if don't break early - there, the last visible section will be highlighted. But you can then see the opposite problem - the top section's link is never activated since something else is always visible.
<script type="text/javascript">
jQuery(document).ready(function($) {
var url = window.location.pathname,
urlRegExp = new RegExp(url.replace(/\/$/,'') + "$");
$("#navbar li a").each(function() {//alert('dsfgsdgfd');
if(urlRegExp.test(this.href.replace(/\/$/,''))){
$(this).addClass("active");}
});`enter code here`
});
</script>
This question already has an answer here:
How to remember last state with Jquery?
(1 answer)
Closed 7 years ago.
I have a nested ul/li list
<ul>
<li>first</li>
<li>second
<ul>
<li>Third</li>
</ul>
</li>
... and so on
I found this JQuery on the interweb to use as inspiration, but how to keep the one item i expanded open after the page has reloaded?
<script type="text/javascript">
$(document).ready(function() {
$('div#sideNav li li > ul').hide(); //hide all nested ul's
$('div#sideNav li > ul li a[class=current]').parents('ul').show().prev('a').addClass('accordionExpanded'); //show the ul if it has a current link in it (current page/section should be shown expanded)
$('div#sideNav li:has(ul)').addClass('accordion'); //so we can style plus/minus icons
$('div#sideNav li:has(ul) > a').click(function() {
$(this).toggleClass('accordionExpanded'); //for CSS bgimage, but only on first a (sub li>a's don't need the class)
$(this).next('ul').slideToggle('fast');
$(this).parent().siblings('li').children('ul:visible').slideUp('fast')
.parent('li').find('a').removeClass('accordionExpanded');
return true;
});
});
</script>
you can save the current open menu item in a cookie $.cookie('menustate')
similar: How to remember last state with Jquery?
The same way you manage state when passing data from page to page:
Querystring
Cookies
Form post / hidden field
Ajax to and from the server
I'll assume you dont like any of the previous answers since none of them have been accepted and present you with a less "correct" way of doing it. Before I get flamed to death, this is just my attempt at doing it with pure js/jq. You could parse out the URL (http://example/subsite) and select whichever piece is relevant (for the sake of ease, lets assume /subsite is what you want).
$(document).ready(function(){
var pathname = window.location.pathname;
var splitpath = pathname.split("/");
$("#nav-" + splitpath[1] + "").children().class('current')
});
Build your ID's into something like <li id=nav-subsite> and use the parsed out URL to build a selector for the correct tab/li/whatever. Is it weird? Sure, but I figured I'd throw in my $.02
This is not easily doable in JavaScript alone.
Either the server sets the accordionExpanded CSS class correctly when the page is reloaded (directly into the source HTML). This would require the server knows what <li>s the user had clicked on, naturally.
Or you avoid reloading the page at all and do partial page updates through AJAX calls. This is what most "modern" websites do.
Or you do what Glennular suggests and save state info to a cookie.
Your choice.
I'm not sure what your menu is supposed to be doing exactly, but if it's a nav menu, you could add a brief bit of markup to your body element for each base page:
<body class="home"> <!-- for homepage -->
<body class="about"> <!-- for about page -->
<body class="etc"> <!-- for etc. -->
And have jQuery look for this marker and make a decision on how to handle the list tree once the page loads based on which page it is. It wouldn't require setting any cookies, and so long as they have JS enabled (which every user should at this point), everything's kosh magosh.