277 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();

});

277 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

451 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
+6 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

277 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! :)

Helpful Information

  • Please read our community guidelines. Self promotion and discussion of piracy is not allowed.
  • Open a support ticket if you would like specific help with your account, deposits or purchases.
  • Item Support by authors is optional and may vary. Please see the Support tab on each item page.

Most of all, enjoy your time here. Thank you for being a valued Envato community member.

Post Reply

Format your entry with some basic HTML. Read the Full Details, or here is a refresher:

<strong></strong> to make things bold
<em></em> to emphasize
<ul><li> or <ol><li> to make lists
<h3> or <h4> to make headings
<pre></pre> for code blocks
<code></code> for a few words of code
<a></a> for links
<img> to paste in an image (it'll need to be hosted somewhere else though)
<blockquote></blockquote> to quote somebody

:grin: :shocked: :cry: Complete List of Smiley Codes

by
by
by
by
by
by