Jump to content


Photo

Slow row-bgcolor in IE


  • Please log in to reply
8 replies to this topic

#1 alpine

alpine
  • Members
  • PipPipPip
  • Advanced Member
  • 756 posts
  • LocationNorway

Posted 11 September 2006 - 08:24 AM

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.

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;
}



Called like this:

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


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.

#2 alpine

alpine
  • Members
  • PipPipPip
  • Advanced Member
  • 756 posts
  • LocationNorway

Posted 12 September 2006 - 10:11 AM

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:

<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..">


Any ideas ?

#3 alpine

alpine
  • Members
  • PipPipPip
  • Advanced Member
  • 756 posts
  • LocationNorway

Posted 13 September 2006 - 12:41 PM


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

while

if(this.style.backgroundColor!='rgb(204, 255, 102)') 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 ??



#4 fenway

fenway
  • Staff Alumni
  • MySQL Si-Fu / PHP Resident Alien
  • 16,199 posts
  • LocationToronto, ON

Posted 20 September 2006 - 01:45 PM

Just write/find a quick 3-line function to convert RGB to HEX.
Seriously... if people don't start reading this before posting, I'm going to consider not answering at all.

#5 obsidian

obsidian
  • Staff Alumni
  • Advanced Member
  • 3,202 posts
  • LocationSeattle, WA

Posted 20 September 2006 - 02:12 PM

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

<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>

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.
You can't win, you can't lose, you can't break even... you can't even get out of the game.

<?php
while (count($life->getQuestions()) > 0)
{   $life->study(); } ?>
  LINKS: PHP: Manual MySQL: Manual PostgreSQL: Manual (X)HTML: Validate It! CSS: A List Apart | IE bug fixes | Zen Garden | Validate It! JavaScript: Reference Cards RegEx: Everything RegEx

#6 fenway

fenway
  • Staff Alumni
  • MySQL Si-Fu / PHP Resident Alien
  • 16,199 posts
  • LocationToronto, ON

Posted 21 September 2006 - 12:44 AM

Personally, I prefer not to "hide" event handler assignments, but you should definitely have functions for these regardless.
Seriously... if people don't start reading this before posting, I'm going to consider not answering at all.

#7 obsidian

obsidian
  • Staff Alumni
  • Advanced Member
  • 3,202 posts
  • LocationSeattle, WA

Posted 21 September 2006 - 12:49 AM

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

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.
You can't win, you can't lose, you can't break even... you can't even get out of the game.

<?php
while (count($life->getQuestions()) > 0)
{   $life->study(); } ?>
  LINKS: PHP: Manual MySQL: Manual PostgreSQL: Manual (X)HTML: Validate It! CSS: A List Apart | IE bug fixes | Zen Garden | Validate It! JavaScript: Reference Cards RegEx: Everything RegEx

#8 fenway

fenway
  • Staff Alumni
  • MySQL Si-Fu / PHP Resident Alien
  • 16,199 posts
  • LocationToronto, ON

Posted 21 September 2006 - 12:52 AM

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 ;-)
Seriously... if people don't start reading this before posting, I'm going to consider not answering at all.

#9 obsidian

obsidian
  • Staff Alumni
  • Advanced Member
  • 3,202 posts
  • LocationSeattle, WA

Posted 21 September 2006 - 12:57 AM

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 ;-)


hehe... very good point. you got me there.
You can't win, you can't lose, you can't break even... you can't even get out of the game.

<?php
while (count($life->getQuestions()) > 0)
{   $life->study(); } ?>
  LINKS: PHP: Manual MySQL: Manual PostgreSQL: Manual (X)HTML: Validate It! CSS: A List Apart | IE bug fixes | Zen Garden | Validate It! JavaScript: Reference Cards RegEx: Everything RegEx




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users