Firefox - Javascript

[brvaland]

Hi experts

I have a javascript code working fine on IE but not working properly on Firefox. Also i have the software called firebug installed for the Firefox v2.0.

No errors discovered for the Javascript code on Firebug.

The code display a popup window with address of the customer on mouseover event of the browser.


function showTooltip(ccdstatus, event)
{
document.getElementById("td0").innerHTML=ccdstatus;
x = event.clientX + document.body.scrollLeft;
y = event.clientY + document.body.scrollTop + 10;

document.getElementById("Popup").style.display="block";
document.getElementById("Popup").style.left = x;
document.getElementById("Popup").style.top = y;

}

function HideTooltip()
{
document.getElementById("Popup").style.display="none";
}




<div id="Popup" class="transparent">
<div style="background-color:#6B696B; font-family:Verdana; font-size:10pt" align="center" >
<b><span>New Address</span></b>
</div>
<div>
<table width="100%" border=0 cellpadding=0 cellspacing=0 style="font-family:Verdana; font-size:10pt">
<tr>
<td id="td0" align="left" class="runtext1"></td>
</tr>
</table>
</div>
</div>


<td align="center" style="color: Blue; font-weight: normal; font-style: normal; text-decoration: underline;" onmouseout="this.style.cursor=''; HideTooltip();" onmouseover="this.style.cursor='hand'; showTooltip('12 AB Sample Street <br> Sample Town <br>SP1 2ST', event);">Y</td>


I require my application to working with IE and Firefox, can anyone suggest want changes i might need to make to existing code to work on Firefox 2.0 or later.

Kind Regards
Bhavesh

[Fang]

Accessing the event object (http://www.reloco.com.ar/mozilla/compat.html)

[brvaland]

Thanks for your reply.

I am accessing the event object by passing the event on the "onmouseover".

onmouseover="this.style.cursor='hand'; showTooltip('12 AB Sample Street <br> Sample Town <br>SP1 2ST', event);"

[Fang]

It functions the same in both browsers. What difference do you see?

[Declan1991]

window.event is IE only, so the best way to do it is:
function showTooltip(ccdstatus, e)
{
e = e || window.event;
document.getElementById("td0").innerHTML=ccdstatus;
x = e.clientX + document.body.scrollLeft;
y = e.clientY + document.body.scrollTop + 10;

document.getElementById("Popup").style.display="block";
document.getElementById("Popup").style.left = x;
document.getElementById("Popup").style.top = y;

}

function HideTooltip()
{
document.getElementById("Popup").style.display="none";
}

onmouseover="this.style.cursor='hand'; showTooltip('12 AB Sample Street <br> Sample Town <br>SP1 2ST');"
And remember that is IE only code so,
var getXY = function(e){
if (e.pageX || e.pageY) {
getXY = function(e) {
return {"x":e.pageX,"y":e.pageY};
};
}
else if (e.clientX || e.clientY) {
getXY = function(e) {
var x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft,
y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
return {"x":x,"y":y};
};
}
else {
return false;
}
getXY(e);
}
function showTooltip(ccdstatus, e)
{
document.getElementById("td0").innerHTML=ccdstatus;
var el = document.getElementById("Popup").style, xy = getXY(e||window.event);
el.left = xy.x;
el.top = xy.y;
el.display="block";

}

function HideTooltip()
{
document.getElementById("Popup").style.display="none";
}

[Fang]

pageX/pageY are obsolete, modern browsers support clientX/clientY

[Declan1991]

Right you are. I haven't used that script in a while.