SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2012
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jQuery Nav Plugin not generating active class

    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.
    http://www.gethifi.com/blog/css-spri...-jquery-plugin

    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. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Shibbs View Post
    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".
    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.

    Quote Originally Posted by Shibbs View Post
    When I read the jQuery documentation it seems to me that the plugin should dynamically change the classes to active when clicked.
    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.

    HTML Code:
    <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
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2012
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 :/

    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:
    Code:
    <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. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Shibbs View Post
    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?
    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.

    Quote Originally Posted by Shibbs View Post
    The example you gave me seems strange.
    That's because it's unrelated to your particular usage needs. Ignore it.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Enthusiast
    Join Date
    Sep 2012
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #6
    SitePoint Enthusiast
    Join Date
    Sep 2012
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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[/PHP] 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
    Code:
    $(document).ready (function() {
              $("a.cp_btns").click(function() {
    		  $("a.cp_btns.active").removeClass("active");
    		  $(this).addClass("active");
    		  });
    });
    And here is the setup
    Code:
    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. #7
    SitePoint Enthusiast
    Join Date
    Sep 2012
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •