jQuery Help – .hover Event Isn’t Triggering

[Anonymous]

http://fatatominternetmarketing.com/preview/fatatom/2012/subpage.html

I have Javascript in place on this page to add/remove classes depending on what circle you hover over in that triad under “How Fat Atom is Unique”. I’ve also set up a click event for the paragraph on the page to slide up, just for testing purposes.

For some reason my code isn’t working. I tried placing the entire page’s HTML, CSS, and Javascript into a jsFiddle and it works fine in that environment.

Here’s the custom javascript I have in place for this page:

var fatatomball = "#fatatomball";

var supportball = "#supportball";

var accountball = "#accountball";

var marketingball = "#marketingball";

var creativeball = "#creativeball";



$(accountball).hover(function(){

$(this).addClass("topzindex");

$(marketingball).removeClass("topzindex");

$(creativeball).removeClass("topzindex");

});

$(marketingball).hover(function(){

$(this).addClass("topzindex");

$(accountball).removeClass("topzindex");

$(creativeball).removeClass("topzindex");

});

$(creativeball).hover(function(){

$(this).addClass("topzindex");

$(accountball).removeClass("topzindex");

$(marketingball).removeClass("topzindex");

});



$("p").click(function(){

$(this).slideUp();

});



//stuff for the home page - could be the problem so I included it...

$(window).bind("load", function() {

var slidecontentheight = $('div#slide-one div.slide-content').height()/2;

$('div#slide-one div.slide-content').css({'margin-top' : -slidecontentheight});



var slidecontentheight = $('div#slide-two div.slide-content').height()/2;

$('div#slide-two div.slide-content').css({'margin-top' : -slidecontentheight});



var slidecontentheight = $('div#slide-three div.slide-content').height()/2;

$('div#slide-three div.slide-content').css({'margin-top' : -slidecontentheight});



var slidecontentheight = $('div#slide-four div.slide-content').height()/2;

$('div#slide-four div.slide-content').css({'margin-top' : -slidecontentheight});

});

Anyone have an idea why this isn’t working? I’m new to Javascript/jQuery so it could be something obvious.

Thanks guys.

[Senff]

You have a URL for the jsfiddle you made?

[Anonymous]

Yep. It’s a bit messy as the path to images/fonts are messed up.

http://jsfiddle.net/5EzLs/

[Senff]

You forgot some quotes and ID signs in your jQuery. Change:

$(#accountball).hover(function(){

to:

$('#accountball').hover(function(){

And the same for the other two hover functions.

[Anonymous]

I have tried that so many times, but doing it that way doesn’t change a thing. I have variables in place to call those elements instead because a lot more work is going into this part of the site. If the ID ever changes I wanted to able to just change a variable value instead of changing it all over the file.

Doesn’t explain why the paragraph still isn’t sliding up too. :/

Thanks for taking time to help.

[Senff]

Oh, I see what you did now, making it variables. But why would the IDs change? I believe you’re adding an unnecessary step in the process by doing that.

Anyways, when I try your fiddle, the hovers actually work for me, and the paragraph slides up when I click on it, so now I’m not sure what the problem is exactly…?

[Anonymous]

That’s the problem though. It works in the fiddle but not on the site when it’s the exact same code.

[Senff]

Ah, ok. I think it’s because your fatatom.js functions are not loaded on document.ready (in jsfiddle they are because that’s the default):

Try wrapping everything in this:

$(document).ready(function(){



// ALL YOUR FATATOM.JS CODE GOES HERE



});

[Anonymous]

That did the trick! Thanks a ton for your help! :)

[Author]

Posts