Welcome to WebmasterWorld Guest from 54.167.157.247

Forum Moderators: open

Message Too Old, No Replies

IE7/8 mouseenter/mouseover/mouseout/mouseleave performance

   
4:15 pm on Jul 16, 2010 (gmt 0)

5+ Year Member



Hi,

I have a very strange issue and I have done almost everything to make code simple.

The issue is - I have a horizontal menu and onmouseover of it I am changing its background. It works fine if that page doesnt have any row in the table. But if table has 50 or more rows the menu performance changes drastically in IE7/8 (Haven't checked older versions), it works fit and fine in FF and Chrome (No matter how many rows are there in the table).

Code -
onMouseOver="this.style.backgroundColor='#d0d0d0'" onMouseOut="this.style.backgroundColor=''"

even this doesn't work good if table has 50 or more rows.

Any help is greatly appreciated.

Thanks and Regards,
Hardik
5:34 pm on Jul 16, 2010 (gmt 0)

5+ Year Member



One thing you could try is to use CSS to do the rollovers instead of Javascript. In an external stylesheet, add something like...


.row {
background-color: #121212;
}
.row:hover {
background-color: #d0d0d0;
}


Then, in your HTML...

<tr class="row">...</tr>


CSS allows you to do rollover cosmetic changes without the need to write any Javascript, which should let you circumvent the whole problem.
7:44 pm on Jul 16, 2010 (gmt 0)

5+ Year Member



Thanks for the reply. Until I know :hover selectors only works with a element in IE. I will try what said though.

I feel problem is I am using Dojo 1.4 and that slows down all the js execution on that page. Any dojo experts can help me, because I already tried profiling and layering and etc.

Thanks and Regards,
Hardik
7:59 pm on Jul 16, 2010 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



I don't know if it will help your particular case, but I recall reading once that it was more efficient to change the class than it was to directly modify the style of an element. So maybe you could try onmousover adding a class (that has style rule defined for background-color: #d0d0d0) and onmouseout removing that class? Just a thought.
8:01 pm on Jul 16, 2010 (gmt 0)

5+ Year Member



Thanks fotiman...You are correct indeed. I also read it somewhere but in my case even thats not helping me. As I said I think its dojo framework creating problem. Either I am not using it properly or it already have problem with the performance.