homepage Welcome to WebmasterWorld Guest from 54.226.213.228
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
IE7/8 mouseenter/mouseover/mouseout/mouseleave performance
hbmehta




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

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

 

WesleyC




msg:4171695
 5:34 pm on Jul 16, 2010 (gmt 0)

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.

hbmehta




msg:4171775
 7:44 pm on Jul 16, 2010 (gmt 0)

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

Fotiman




msg:4171781
 7:59 pm on Jul 16, 2010 (gmt 0)

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.

hbmehta




msg:4171782
 8:01 pm on Jul 16, 2010 (gmt 0)

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved