http://removed.com/jquery/# First time playing with jQuery, and kind of stuck already. I'm expecting the background to change to red on hover, but it's not for some reason. Can anyone give me a hand? Thanks!
+4
A:
Try moving the jQuery code for div.sidenavOff inside the ready defintion, like so
<script type="text/javascript">
$(document).ready(function(){
$("a").click(function(event){
alert("Thanks for visiting!");
});
$("div.sidenavOff").mouseover(function(){
$(this).removeClass().addClass("sidenavOver");
}).mouseout(function(){
$(this).removeClass().addClass("sidenavOff");
});
});
</script>
Jonathan
2010-04-22 00:16:57
This worked! Does every jQuery thing have to be in the ready function?
Doug
2010-04-22 00:30:17
If you are going to work with the DOM or you have your scripts in the head. You either need to run it in $(document).ready() or move your script to the bottom of the page where it can be run after the DOM has been loaded onto the page.
RedWolves
2010-04-22 00:36:44
A:
You need to place the calls to .mouseover and .mouseout in your $(document).ready(function() {... block. As you have it, when the selector $("div.sidenavOff") is called, those elements don't exist yet, and no handlers are attached. Moving them into document.ready will call them after the elements have been loaded.
kevingessner
2010-04-22 00:17:10
A:
you could also do smth like
$(document).ready(function(){
$("div.sidenavOff").mouseover(
function(){
$(this).toggleClass("sidenavOver").toggleClass("sidenavOff",true);
}
)
}
)
it has the same functionality as Jonathan's example,but it's less code to write:)
gion_13
2010-04-22 07:18:01