Back To Programming / Scripting / Coding Forum

I'd like the selected tab to stay rasied

  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Joined: Aug 04, 2008
  • Posts: 846
  • Status: Offline

Post July 3rd, 2009, 8:17 pm

So I have a navigation bar with an animation. When a user clicks on a navigation item, I want it to stay raised.

Here's the navigation bar:
http://xaetrex.net/voltecdesign/ctdrums/navbar.html

this is the javascript for the raise effect:
Code: [ Select ]
$(document).ready(function(){

$("li.navitem").hover(
function () {
    $(this).animate({
        top: "0px"
     }, 150 );
    $(this).animate({
        top: "10px"
     }, 50 );
},

function () {
    $(this).animate({
        top: "20px"
     }, 100 );
}
);
                        
});
  1. $(document).ready(function(){
  3. $("li.navitem").hover(
  4. function () {
  5.     $(this).animate({
  6.         top: "0px"
  7.      }, 150 );
  8.     $(this).animate({
  9.         top: "10px"
  10.      }, 50 );
  11. },
  13. function () {
  14.     $(this).animate({
  15.         top: "20px"
  16.      }, 100 );
  17. }
  18. );
  19.                         
  20. });

when a user clicks on a navbar item, I need it to stick at "top:10px;"

How would I implement this?
Use your words like arrows to shoot toward your goal.
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post July 3rd, 2009, 8:17 pm

  • joebert
  • Sledgehammer
  • Genius
  • No Avatar
  • Joined: Feb 10, 2004
  • Posts: 13458
  • Loc: Florida
  • Status: Offline

Post July 3rd, 2009, 8:22 pm

Instead of altering CSS properties, add and remove a classname that includes the properties.

When a page loads, the active tab should include that classname.

If you're using AJAX or something and your page is not refreshing, you can attach the hover listener to the click event as well, but within the click event you detach the hover event before reattaching it to the previously active tab.
Strong with this one, the sudo is.
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Joined: Aug 04, 2008
  • Posts: 846
  • Status: Offline

Post July 3rd, 2009, 9:03 pm

so...something like this? it's not working, but I'm wondering if I'm on the right track:
Code: [ Select ]
$("li.navitem").click(
function () {
    $("#menu > li").addClass("navitem");
    $("li.navitem").removeClass("selected");
    $(this).removeClass("navitem");
    $(this).addClass("selected");
}
);
  1. $("li.navitem").click(
  2. function () {
  3.     $("#menu > li").addClass("navitem");
  4.     $("li.navitem").removeClass("selected");
  5.     $(this).removeClass("navitem");
  6.     $(this).addClass("selected");
  7. }
  8. );
Use your words like arrows to shoot toward your goal.

Page 1 of 1

Post Information

  • Total Posts in this topic: 3 posts
  • Users browsing this forum: No registered users and 136 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.