Forums

TheDark12

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?

TheDark12

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.

TheDark12

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...?

TheDark12

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

});

TheDark12

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

treehouse : what would you like to learn today?

Forums

[Solved] jQuery Help - .hover Event Isn't Triggering