Highlight effect not working correctly in IE

[thecrumb]

Highlight effect does not appear to work correctly in IE6/7 (WinXP).

Interface demo site:

• Works fine in Firefox: blinks to white and the fades into green.
• In IE: It blinks white, fades into green and then turns white again.

[uk]

i experiend this bug either. firefox works fine, msie turns white after a short period after the effect.

[cyberusfaust]

After tinkering around with this, it appears that right after the call, the browser thinks the background-color of the element is still the same as the highlight color. Even Firefox does this, however, Firefox then sets back to the original color while IE6 hangs there... therefore I wrote my Highlight script as follows:

$(currentName).Highlight('normal','#f8e076'); if($(currentName).css('background-color') == '#f8e076') {

$(currentName).Highlight('fast', '#ffffff');

}

where #ffffff is the original base color and #f8e076 is the highlight color.

note the lowercase letters in the color definitions! IE6 rewrites the definitions to lowercase internally. Therefore, if you write:

$(currentName).Highlight('normal','#F8E076'); if($(currentName).css('background-color') == '#F8E076') {

$(currentName).Highlight('fast', '#FFFFFF');

}

IE will not register the boolean statement in the 'if' clause as true. Basically, it parses this internally to "if('#f8e076' == '#F8E076')", which is, of course, never true. Thus, I now write all my color definitions in lowercase.

As an aside, when the color is #f8e076, Firefox equates $(currentName).css('background-color') as "rgb(248, 224, 118)" but you don't need to test for this since the Highlight function works just fine on Firefox.

Furthermore, if I use color names instead of HEX values ('yellow' instead of '#FFFF00') IE6 internalizes this as "yellow" while Firefox internalizes it as "rgb(255, 255, 0)". Using color names, however does not fix the bug in IE6 though. You would still need an if clause such as: "if($(currentName).css('background-color') == 'yellow')" and then to change the background-color back to the base color by force.

[scott.gonzal]

Interface is no longer supported; consider switching to ​jQuery UI.