Problem with ternary operator in Mozilla 1

[starway]

This is a question to all Mozilla users/developers.
I while ago I've created such a function:

function highlight(elem, overColor, outColor) {
obj = document.getElementById(elem).style;
obj.backgroundColor = (obj.backgroundColor == overColor) ? outColor : overColor;
}

It is called like this:
<p id=&quot;one&quot; onmouseover=&quot;highlight('one', '#eeccff', 'white')&quot; onmouseout=&quot;highlight('one', '#eeccff', 'white')&quot;>

It works excellent in Opera 6 and IE5, but by some unclear reason doesn't work in Mozilla 1.1: color changes only once to 'highlighted' state, and doesn't change back to 'normal' when you move mouse out of an element.
I tested this also in Netscape 6.2 to make sure that it isn't some small bug in the latest build of Gecko engine. It really isn't - I've seen the same behavior there as well.
It dosn't matter what element do you apply this to: I tested <p>, <div> as well as table elements. The behaviour is the same in all cases: Opera 6 and IE5 are OK, but Mozilla fails.

Unlike this, such a thing:
function showHide(element) {
obj = document.getElementById(element).style;
obj.visibility = (obj.visibility == &quot;visible&quot ? &quot;hidden&quot; : &quot;visible&quot;;
}
works well in all 3 browsers. So what happens with the same ternary operator, but applied to different style property??

Please don't suggest me to change it to if...else, or split it into 2 different functions. The whole point was to make one function, short and simple using ternary operator.

I treat this situation as a rather serious Mozilla's problem. To tell the truth, this had changed my faith in this browser as being &quot;the most ...&quot; as it is advertised, bacause such a basic language structure shouldn't cause any problems.

So what do you say, Mozilla fans?
Fight for your favourite browser!

P.S. If no solution or explanation will be found, please post this to BugZilla on my behalf.

 

[xutopia]

That is weird but I'd like to apply the KISS principle on it (keep it simple stupid) that a mentor passed down to me.

In this case you could replace your code with this :

function highlight(elem, color)
{
elem.style.backgroundColor = color;
elem.onmouseout = resetBackGround;
}

function resetBackGround(event)
{
var target = document.all ? window.event.srcElement : ((event.target.nodeType == 3)? event.target.parentNode : event.target ) ;
target.style.backgroundColor = &quot;transparent&quot;;
}


<p onmouseover=&quot;highlight(this, '#eeccff')&quot;>This is much simpler and works in IE, NS6, Mozilla and hopefully even with Opera</p>

I hope this helps. Gary

http://www.xutopia.com

Haran

 

[starway]

With small modifications your script works in all 3 browsers:

document.getElementById(elem).style.backgroundColor = color;
instead of:
elem.style.backgroundColor = color;

and

outColor = &quot;white&quot;; //global var
. . .
target.style.backgroundColor = outColor;
instead of:
target.style.backgroundColor = &quot;transparent&quot;;

But this didn't prove me anything. Suspicion about Mozilla bug remains. Anyway, your method is not so flexible: I can't define both colors in function call, which is the most convenient way.

Also, do you really think that your suggestion is a KISS example? Compare the number of code lines and DOM structures involved in both methods.

 

[wray]

I've not tested but from the evidence (ternary operator works with other style attributes) it looks like your function will work if you spell 'white' -- '#ffffff'. Perhaps Mozilla doesn't recognize those two strings have identical meanings in context.

As to code efficiency (simple, easy to implement and maintain) how about --

function hiLiteOn(hiColor) {
  this.svColor = this.style.backgroundColor
  this.style.backgroundColor = hiColor
}
function hiLiteOff() {
  this.style.backgroundColor = this.svColor
}

called by

<p onmouseover=&quot;hiLiteOn('#ffffff');&quot; onmouseout=&quot;hiLiteOff();&quot;>

Simpler parameter handling, fewer decisions (less chance for logic errors ...)

(I've been passing the object reference from the mouse events to the highlight functions using

this

. While typing here it dawned that the highlight functions should recognize who

this

is implicitly. I could be wrong.)

 

[xutopia]

unfortunatly you are wrong! I was so excited that it might work. Gary

http://www.xutopia.com

Haran

 

[starway]

wray, your function desn't work.
BUT - your idea about 'white'/'#ffffff' values is correct! To say truth, I kept in mind this option but didn't even think that this could be a reason of the problem!

Anyway, my function works in all 3 browsers if you call it like this:
onmouseover=&quot;highlight('two', '#f5deb3', '#ffffff')&quot;
By the way, a shortened version of color definition: '#fff' (as it is acceptable by CSS2) works as well. So why doesn't Mozilla like a common 'white'? This is still a mistery...

Thanks for pointing to such an obvious thing that I didn't check. A star is yours!

 

[wray]

Those functions may not work but they should. They do work if the <td> reference is passed explicitly --

function hiLiteOn(obj,hiColor) {
  obj.svColor = obj.style.backgroundColor
  obj.style.backgroundColor = hiColor
}
function hiLiteOff(obj) {
  obj.style.backgroundColor = obj.svColor
}

called by

<p onmouseover=&quot;hiLiteOn(this,'#ffffff');&quot; onmouseout=&quot;hiLiteOff(this);&quot;>

The mystery here -- what does

this

mean in the applied context? I assumed (reasonably?) a reference to the event-launching element. After wandering the Gecko DOM reference for a while I think they think (working examples would make this reference much clearer) the

event

object is the proper meaning of

this

in context. Fair enough. (

event.target

offers a clear path to the source element.)

I set up a small test to query the browsers as to what

this

means in context. My Mozilla 1.0.1 returns a reference to the Window object. Redundant, not very useful.

IE 5.5 offers an object I didn't immediately recognize but said object includes a path to the originating object --

this.event.toElement

Under IE 5.5 the functions work by substituting

this.event.toElement

for

this

in hiLiteOn(),

this.event.fromElement

for

this

in hiLiteOff(). Explicitly passing the element reference looks better to me.

Whether

hiLiteOn()

and

hiLiteOff()

improve the

highlight()

functions is ultimately a judgement question. To their credit -- there is no runtime decision making, they work with whatever original background color they find, they don't overwrite the element's

onmouseout

.


(BTW, using IE 5.5 to wander the internet is apparently not the brightest thing ... see thread253-383196. I'm going to upgrade real soon.)