266 posts
  • Has been part of the Envato Community for over 6 years
  • Has referred 100+ members
  • Has sold $40,000+ on Envato Market
  • Had an item featured in an Envato Bundle
+5 more
JoeMC says

I’m having issues with the addClass/removeClass functions… not sure what I’m doing wrong.

Here’s the site: http://www.metaphorcreations.com/ortho/about.html

I’m working with the menu on the bottom left just trying to get the selected menu item to be red and the un-selected items to be gray.

I can’t get the removeClass to trigger until I roll of the de-selected menu. When I trace the results in Firefox, it says that the class is removed, but the color of the text does not change back to gray until I roll over the menu item again.

Any help would be greatly appreciated! Frustration has set in about an hour ago.

HTML Code:

<ul class="bioMenu">
    <li><a href="#" id="1">Rick Peterson</a></li>
    <li><a href="#" id="2">Parker Sewell</a></li>
    <li><a href="#" id="3">Flip Gallegos</a></li>
    <li><a href="#" id="4">Travis Lawson</a></li>
    <li><a href="#" id="5">Zach Snider</a></li>
    <li><a href="#" id="6">Ryan Clark</a></li>
    <li><a href="#" id="7">James Monroe</a></li>
</ul>

CSS :

.bioMenu {list-style:none;}
.bioMenu li {margin-bottom:6px;}
.bioMenu li a {font-size:23px; color:#58595B;}
.bioMenu li a:hover {color:#FF0000;}
.bioMenu li a.normal {color:#58595B;}
.bioMenu li a.selected {color:#FF0000;}

jQuery:

$(".bioMenu").children("li").children("a").click(function(e) {

    // Prevent default
    e.preventDefault();

    // Reset the currSelect
    $(".selected").removeClass("selected").addClass("normal");
    $(this).removeClass("normal").addClass("selected");

    // Hide the bio blocks
    $(".bioBlock").hide();

    // Get the id
    var id = $(this).attr("id");

    // Fade in the new bio
    $(".bioBlock::nth-child("+id+")").fadeIn();

});

266 posts
  • Has been part of the Envato Community for over 6 years
  • Has referred 100+ members
  • Has sold $40,000+ on Envato Market
  • Had an item featured in an Envato Bundle
+5 more
JoeMC says

Not sure if it matters, but I’m using jquery-1.4.2.min.js

374 posts
  • Has been part of the Envato Community for over 5 years
  • Has referred 1+ members
  • Has sold $1,000+ on Envato Market
  • Has collected 10+ items on Envato Market
+3 more
_rohan says

Your jQuery is fine – the Cufon isn’t re-rendering. Use Cufon.refresh()http://wiki.github.com/sorccu/cufon/api

443 posts Don't be a HATER!
  • Has referred 10+ members
  • Has sold $125,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
+5 more
webinpixels says

do you have try use each function?

var link = $(".bioMenu").find("a");

link.each(function(){
   $(this).click(function(e){
       // Prevent default
       e.preventDefault();

       // Get the id
       var id = $(this).attr("id");

       // Reset the currSelect
       $(".selected").removeClass("selected").addClass("normal");
       $(this).removeClass("normal").addClass("selected");

       // Hide the bio blocks
       $(".bioBlock").hide();

       // Fade in the new bio
       $(".bioBlock::nth-child("+id+")").fadeIn();
    });
});

Good Luck :)

136 posts
  • Has been part of the Envato Community for over 5 years
  • Has referred 1+ members
  • Has sold $1,000+ on Envato Market
  • Has collected 10+ items on Envato Market
+2 more
Raspo says

_rohan is right, you should refresh cufon.

Try this:

$(".bioMenu").find("a").click(function() {
    // Reset the currSelect
    $(".selected").removeClass("selected");
    Cufon.refresh();
    $(this).addClass("selected");
    // Get the id
    var id = $(this).attr("id");
    // Hide the bio blocks
    $(".bioBlock").hide();
    // Fade in the new bio
    $(".bioBlock::nth-child("+id+")").fadeIn();
    return false;
});

and BTW you don’t need to add any “normal” class, cause it’s useless

266 posts
  • Has been part of the Envato Community for over 6 years
  • Has referred 100+ members
  • Has sold $40,000+ on Envato Market
  • Had an item featured in an Envato Bundle
+5 more
JoeMC says
_rohan is right, you should refresh cufon. and BTW you don’t need to add any “normal” class, cause it’s useless

Sweet, thanks! I wasn’t even thinking of it being a Cufon issue… I was going crazy because I knew it should work.

I took out the ‘normal’ class now. That was just something I threw in to test with after it wasn’t working originally.

Learn something new every day!

Thanks for the help everyone! :)

by
by
by
by
by
by