...

View Full Version : Using mouseover mouseout slow to react



dsalo
12-03-2009, 10:27 PM
I pretty sure just looking at this that there must be a simpler way of executing this.

I have a number of objects (always varies) coming into the div tag #apply_row and has the class .rotate_color and .highlight



<div id="apply_row" class="rotate_color highlight">
milk
</div>
<div id="apply_row" class="rotate_color highlight">
coffee
</div>
<div id="apply_row" class="rotate_color highlight">
cheese
</div>


And I have the javascript written to give a different color for :odd and :even and to add a highlight color when user puts the mouse over.




$(document).ready(function()
{
//alternate div colors
$("div.rotate_color:odd").css("background-color", "#FFFFFF");
$("div.rotate_color:even").css("background-color", "#F9F5E8");

//highlight and return back to original color on mouseout
$("div.highlight").mouseover(function(){
$(this).css("background-color", "#F6E9D0");
$("div.highlight").mouseout(function(){
//clear background color to none
$(this).css("background-color", "");
//change back to original
$("div.rotate_color:odd").css("background-color", "#FFFFFF");
$("div.rotate_color:even").css("background-color", "#F9F5E8");
});
});



});


This does seem a bit excessive, but it does work except that it is *really slow to make the css changes. I couldn't really get .hover to work either with changing the background back to the original. The way the site is set up right now, it would be best to leave the background-color for these particular ID's and Classes out of the CSS file itelf (blah, too long to explain why).

Any suggestions???


Thanks,
Daniel

glenngv
12-03-2009, 11:46 PM
Why are you setting the mouseout during mouseover? I think that's where it's slowing down. Move the mouseover out and it will be faster.


BTW, id should be unique in a document. You have 3 divs with id=apply_row

dsalo
12-03-2009, 11:52 PM
ah, yeah that helped, i just didn't even see that.

im changing out the ID's for classes, was a weird transition from some old code to new :(

thanks!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum