Slow row-bgcolor in IE

[alpine]

Can anyone look at this javascript and maybe point out why it is so slow in Internet Explorer ? (IE6)
In Firefox it is all ok and very responsive, while in IE its really slow and not following the mouse as i move it over the rows.

[color=blue]var oppr_tbody_bgcolor;
function set_tbodybg(obj,col) {
oppr_tbody_bgcolor=obj.style.backgroundColor;
obj.style.backgroundColor=col;
}

function reset_tbodybg(obj) {
obj.style.backgroundColor=oppr_tbody_bgcolor;
}[/color]


Called like this:

[color=blue]<tbody id="tbody_$unique" style="background-color: $bgfarve;" onmouseout="reset_tbodybg(this);" onmouseover="set_tbodybg(this,'#dddddd');">
<tr>
<td blah..>ksgdk</td>
</tr>
</tbody>[/color]

I have another function setting the tr bgcolor something if something is done and want that color to be always on top if set, thats why i use the set/reset on tbody as this has lower priority and will be surpressed.

[alpine]

OK - i found out that it must be the tbody properties IE cant handle, and it get worse the more rows and tbody tags i have.

So i headed on another angle to switch bgcolor as IE handles TR much much faster.
Now my problem is that it works in IE (and Opera) but not in Firefox.

The following script sets onmouseover and onmouseout style bgcolor IF the current colour is not one particular.
But Firefox ignores the if condition:
[color=blue]
<tr id="tr_$unique_id" style="background-color: $bgcolor;" onmouseout="javascript: if(this.style.backgroundColor!='#ccff66')this.style.backgroundColor='$bgfarve';" onmouseover="javascript: if(this.style.backgroundColor!='#ccff66')this.style.backgroundColor='#dddddd';" onclick="blah..">[/color]

Any ideas ?

[alpine]

[color=red]if(this.style.backgroundColor!='#ccff66')[/color] works in IE and Opera but not in Firefox

while

[color=red]if(this.style.backgroundColor!='rgb(204, 255, 102)')[/color] works in Firefox but not in IE or Opera

I normally try to use things that works in all those browsers, and hate to be dependable of browserdetection scripts - but this time i really don't know...... not anyone out there that can give any answers or come up with other ideas ??

[fenway]

Just write/find a quick 3-line function to convert RGB to HEX.

[obsidian]

also, i would recommend doing something like this instead of assigning the onmouseover and onmouseout to every one of your table rows:

[code]
<script type="text/javascript">
window.onload = function() {
  x = document.getElementsByTagName('TR');
  for (i = 0; i < x.length; i++) {
    x[i].onmouseover = function() {
      this.className = 'color2';
    }

    x[i].onmouseout = function() {
      this.className = 'color1';
    }
  }
}
</script>
[/code]

also, by changing className instead of backgroundColor directly, you can assign the colors in your CSS, and they will be interpreted correctly across all browsers.

hope this helps.

[fenway]

Personally, I prefer not to "hide" event handler assignments, but you should definitely have functions for these regardless.

[obsidian]

[quote author=fenway link=topic=107621.msg438418#msg438418 date=1158799498]
Personally, I prefer not to "hide" event handler assignments, but you should definitely have functions for these regardless.
[/quote]
to me, it depends on how widespread they are on the page. i hate to see every table cell in a page with an onmouseover and onmouseout event handler. however, if there are single instances throughout the page, i would definitely create them inline. it may just be a preference thing, though. i tend to be a stickler for neat markup.

[fenway]

I too don't like messy or bulky code... but I hate not knowing when event handlers are firing, and then having to find them.  Of course, if you're writing out lots of TR/TDs anyway, if should be handled server-side, in which case it's only in one place anyway ;-)

[obsidian]

[quote author=fenway link=topic=107621.msg438432#msg438432 date=1158799951]
Of course, if you're writing out lots of TR/TDs anyway, if should be handled server-side, in which case it's only in one place anyway ;-)
[/quote]

hehe... very good point. you got me there.