jQuery Nav Plugin not generating active class

JavaScript
1

Hey guys,

I have a question concerning a plugin I found for a jQuery Navigation bar.

This is the appropriate site, let me know if you want me to type the whole code into the forum.

The plugin itself works just like the demo. Here is a link: files.www.gethifi.com/posts/sprites2/demo/example.html

But I was wondering why the active tab does not show. The demo just has one of the four tabs fixed to say class=“active”.

When I read the jQuery documentation it seems to me that the plugin should dynamically change the classes to active when clicked.

Thanks
Shibbs

2

It seems that that particular implementation is leaving is up to you to adjust which one is active on each page of yours.
The sprite2 plugin seems to use the active class to achieve two jobs. To affect the presentation of the nav item, and to prevent the attachment of an event on to that active nav item.

That can be a viable solution when clicking the item doesn’t result in a new page being loaded.

For myself, I prefer to use the body element in conjunction with the nav item to target an individual nav item without needing to set a separate active class within the navigation.

In this case, because an identifier is used on the nav items, we could use a class name on the body element.


<body class="services">
...

So that instead of .spritesnav #snservices.active a:link you could instead use the following sort of CSS to achieve the same effect: .services .spritesnav #services a:link

3

Hey thanks for the response,

I’m sorry but I don’t understand your answer in its entirety. CSS/JS is so not my thing :confused:

So I am using the nav bar to sort php generated tables which means the site never refreshes in its entirety so according to you making the classes active dynamically should be possible right?

I currently have it set up like this:


<div>
<ul id="live" class="spritesnav">
		<li id="snhome"  ><a href="#"></a></li>
		<li id="snabout"  ><a href="#"></a></li>
		<li id="snservices" ><a href="#"></a></li>
		<li id="sncontact" ><a href="#"></a></li>
	</ul>
</div>

Where the a href are replaced with php code.

The example you gave me seems strange.

HTML Code:

<body class=“services”>
…

Would I put class=“services” into the div tag surrounding the ul? And how would it work? Would the class always change according to whichever one is active? I.E. if I click on About, would the class change to class=“about”?
I guess the core thing which I don’t understand is how the code recognizes which one is supposed to be active, shouldn’t there be some onclick function or something like that?

Thanks a lot!
Shibbs

4

Indeed - how that happens, is whenever you click on a nav link, you would remove the active class from all of the nav links, and then add the active class to the one that was clicked on.
Lastly, because the code prevents a click event from being attached to the active link, you will need to stop that prevention from occurring, and instead exit out early from the click event if the clicked link is currently active.

That’s because it’s unrelated to your particular usage needs. Ignore it.

5

Ok, thanks for the info.

So basically add stuff to the jQuery.sprites2.js file

I’ll try to create something tomorrow, its getting pretty late here.
I’ll let you know about my progress!

Thanks again.

6

So I chose to implement a simpler navi bar just for the start and read up on the other one later.

The bar works perfectly when tested in isolation but on the php site it resets when I order the table.

The way I order the table is by using a variable [PHP$order_var

 which changes the php extension at the top.
Since the nav bar is resetting everytime I click an items I assume the page is refreshing in a way?

Is it even possible to make something like that work?

Here is the javascript I am using

$(document).ready (function() {
$(“a.cp_btns”).click(function() {
$(“a.cp_btns.active”).removeClass(“active”);
$(this).addClass(“active”);
});
});



And here is the setup

div id=“cp_menu” >

<a class="cp_btns "<?php echo’<a href=“indexB.php?order_var=’ . $id_var . '”‘;?>>Most Recent</a></a>
<a class=“cp_btns” <?php echo’<a href=“indexB.php?order_var=’ . $fn_var . '”‘;?>>Best Rated</a></a>
<a class=“cp_btns” <?php echo’<a href=“indexB.php?order_var=’ . $ln_var . '”';?>>Most Viewed</a></a>

</div>



Thank you
Shibbs
7

Just wanted to let you know that I opened a post on the PHP forum about this because it seems to have changed to being more of a PHP problem