Firefox compatibility

[Serena]

I have a problem whit this script. It is compatible with IE but isn't with
Firefox.

The error are:
1) "e has no properties" at----- "if(e.pageX || e.pageY) {"
2) "document.getElementById()" at------>
"popText0.style.visibility="visible"
Help me please
Serena

//
// MOUSE position
//

var posX = 0;
var posY = 0;

function setPos () {
posX = 0;
posY = 0;

if (!e)
var e = window.event

if (e.pageX || e.pageY) {
posX = e.pageX
posY = e.pageY
}

else if (e.clientX || e.clientY) {
posX = e.clientX + document.body.scrollLeft
posY = e.clientY + document.body.scrollTop
}

return
}

document.onmousemove = setPos;
//
// MENU'
//

var popShow = new Array (false, false, false);

function popup (who) {
popText0.style.visibility = "hidden";
popText1.style.visibility = "hidden";
popText2.style.visibility = "hidden";

topbutton0.style.visibility = "visible";
topbutton1.style.visibility = "visible";
topbutton2.style.visibility = "visible";
if (!popShow[who]) {
if (( who == 0 ) || ( who == 1 ))
{
eval("popText"+who+".style.left = posX + 10");
eval("popText"+who+".style.top = -38");
}
else
{
eval("popText"+who+".style.left = posX + 10");
eval("popText"+who+".style.top = -38");
}
eval("popText"+who+".style.visibility = \"visible\"");

for(var count in popShow)
popShow[count] = false;

popShow[who] = true;
eval("topbutton"+who+".style.visibility='hidden'") ;
}
else
popShow[who] = false;

return;
}

[=?ISO-8859-1?Q?G=E9rard_Talbot?=]

Serena wrote :

I have a problem whit this script. It is compatible with IE but isn't with
Firefox.

The error are:
1) "e has no properties" at----- "if(e.pageX || e.pageY) {"
2) "document.getElementById()" at------>
"popText0.style.visibility="visible"
Help me please
Serena

//
// MOUSE position
//

var posX = 0;
var posY = 0;

function setPos () {
posX = 0;
posY = 0;

posX and posY were set to 0 globally. Why do they need to be reset
again, and this time, locally?

>
if (!e)
var e = window.event

This will fail in Firefox and other DOM 2 event interface compliant
browsers. event is not a properties of the window.
You need to register an event listener on the targeted object.

DOM:element.addEventListener
http://developer.mozilla.org/en/docs/addEventListener

>
//
// MENU'
//

var popShow = new Array (false, false, false);

function popup (who) {
popText0.style.visibility = "hidden";

When you want to get access to a particular element, you must refer to
it via one of the DOM 2 methods and not just by its name attribute value
or just by its id attribute value.

This mistake is very frequent. See:

Accessing Elements with the W3C DOM
http://developer.mozilla.org/en/docs...th_the_W3C_DOM

Also

Comp.lang.javascript FAQ
Why doesn't the global variable "divId" always refer to the element with
id="divId"?
http://jibbering.com/faq/#FAQ4_41

popText1.style.visibility = "hidden";
popText2.style.visibility = "hidden";

topbutton0.style.visibility = "visible";
topbutton1.style.visibility = "visible";
topbutton2.style.visibility = "visible";
if (!popShow[who]) {
if (( who == 0 ) || ( who == 1 ))
{
eval("popText"+who+".style.left = posX + 10");

Using eval() is 99% of the time wrong.

Comp.lang.javascript FAQ
When should I use eval?
http://jibbering.com/faq/#FAQ4_40

Also, here you are trying to position an element without defining its
unit creates a CSS parsing error.
CSS 1 and CSS 2.x specifications require that non-zero values must be
specified with a length unit; otherwise, the css declaration will be
ignored. Mozilla-based browsers, MSIE 6+, Opera 7+ and other W3C
standards-compliant browsers enforce such handling of parsing error.
CSS 1 Forward-compatible parsing
http://www.w3.org/TR/REC-CSS1#forwar...atible-parsing
CSS 2.1 Rules for handling parsing errors
http://www.w3.org/TR/CSS21/syndata.html#parsing-errors

Gérard
--
Using Web Standards in your Web Pages (Updated Dec. 2006)
http://developer.mozilla.org/en/docs...your_Web_Pages

[Laurent Bugnion [MVP]]

Hi,

Gérard Talbot wrote:

Serena wrote :

>I have a problem whit this script. It is compatible with IE but isn't
with Firefox.

The error are:
1) "e has no properties" at----- "if(e.pageX || e.pageY) {"
2) "document.getElementById()" at------>
"popText0.style.visibility="visible"
Help me please
Serena

//
// MOUSE position
//

var posX = 0;
var posY = 0;

function setPos () {
posX = 0;
posY = 0;

posX and posY were set to 0 globally. Why do they need to be reset
again, and this time, locally?

Because they are global. Further in the function they are set to a
value. Since we don't know when (and how often) the function will be
called, resetting them to 0 might be necessary.

The code could be much more modular, object-oriented, and that would
remove the need for global variable.

> if (!e)
var e = window.event

This will fail in Firefox and other DOM 2 event interface compliant
browsers. event is not a properties of the window.
You need to register an event listener on the targeted object.

That's probably what she did somewhere in the code which she doesn't
show us. For example, if you have

document.onload = setPos;

then you should declare the function like this:

function setPos( e )
{
...
}

Mozilla-based browsers pass the event details to the function when the
event handler is called. I always found this way of doing confusing and
for once prefer the IE way.

Maybe a better way is to go the other way round:

function setPos( e )
{
if ( window.event )
{
e = window.event;
}

if ( !e )
{
throw "Unknow platform";
}
}

HTH,
Laurent
--
Laurent Bugnion [MVP ASP.NET]
Software engineering, Blog: http://www.galasoft-LB.ch
PhotoAlbum: http://www.galasoft-LB.ch/pictures
Support children in Calcutta: http://www.calcutta-espoir.ch