Javascript not working on Firefox

mpartarrieu · Nov 21, 2006

This code is working perfectly on IE, but not on Firefox or Opera. It basically shows a hidden div when onmouseover an image and the hides it again. It also place the div on the right corner of the image. Any ideas would be appreciated. Thanks in advance.

<code>

var cm=null;
document.onclick = new Function("show(null)");

function getPos(el,sProp)
{
var iPos = 0;
while (el!=null)
{
iPos+=el["offset" + sProp];
el = el.offsetParent;
}
return iPos;
}

function show(el,m)
{
if (m)
{
m.style.display='';
m.style.pixelLeft = getPos(el,"Left") + el.offsetWidth;
m.style.pixelTop = getPos(el,"Top");
}
if ((m!=cm) && (cm)) cm.style.display='none';
cm=m;
}

<code>

BillyRayPreachersSon · Nov 21, 2006

Where is your image? Where is the onmouseover code? I see neither!

Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

mpartarrieu · Nov 21, 2006

Sorry. Just wrote the javascript functions. Here's the rest:

<script>

</script>

<style type="text/css">

</style>

</head>

<body>

<table width="170" border="0" cellspacing="0" cellpadding="0">
<tr><td><img src="icn/en_menu_1.gif" width="170" height="42" alt="" title="" border="0" onmouseover="show(this,ds1); return true;" onmouseout="window.status=''; show(null); return true;" /></td></tr>
<tr><td><img src="icn/en_menu_2.gif" width="170" height="42" alt="" title="" border="0" onmouseover="show(this,ds2); return true;" onmouseout="window.status=''; show(null); return true;" /></td></tr>
<tr><td><img src="icn/en_menu_3.gif" width="170" height="42" alt="" title="" border="0" onmouseover="show(this,ds3); return true;" onmouseout="window.status=''; show(null); return true;" /></td></tr>
</table>

<div id="ds1" class="sub_box" style="display: none; width: 120;" onmouseover="keep(this,ds2);" onmouseout="show(null)">This text is shown onmouseover image 1</div>
<div id="ds2" class="sub_box" style="display: none; width: 120;" onmouseover="keep(this,ds2);" onmouseout="show(null)">This text is shown onmouseover image 2</div>
<div id="ds3" class="sub_box" style="display: none; width: 120;" onmouseover="keep(this,ds2);" onmouseout="show(null)">This text is shown onmouseover image 3</div>

cLFlaVA · Nov 21, 2006

first thing i noticed is your implicit reference to the div ids.

1) use [ignore]

Code:

tags around your code so it's easier to read[/ignore]
2) always indent your code - it helps with debugging astronomically
3) don't implicitly reference your object id. call your function like this:

Code:

onmouseover="keep(this,[red]'[/red]ds2[red]'[/red]);

and change your function to:

Code:

function show(el,m) {
    var m = document.getElementById(m);
    if (m) {
        m.style.display='';
        m.style.pixelLeft = getPos(el,"Left") + el.offsetWidth - 3;
        m.style.pixelTop = getPos(el,"Top") + 17;
    }
    if ((m!=cm) && (cm))
        cm.style.display='none';
    cm=m;
}

*cLFlaVA
----------------------------
[tt]"quote goes here"[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

mpartarrieu · Nov 21, 2006

Thanks cLFlaVA for your advice. The main function show() is now working for both IE and Firefox. I still have a problem with the secondary function getPos(), which locates the hidden div in the right position depending on the image you mouseover.

Code:

[COLOR=#ff0000][b]function getPos(el,sProp) {
    var iPos = 0;
    while (el!=null) {
        iPos+=el["offset" + sProp];
        el = el.offsetParent;
        }
    return iPos;
}[/b][/color]

function show(el,m) {
    var m = document.getElementById(m);
    if (m) {
        m.style.display='';
        [COLOR=#ff0000]m.style.pixelLeft = getPos(el,"Left") + el.offsetWidth;
        m.style.pixelTop = getPos(el,"Top") + 17;[/color]
    }
    if ((m!=cm) && (cm))
        cm.style.display='none';
    cm=m;
}

By the way, the main function is called this way:

Code:

onmouseover="show(this,'ds2'); return true;"

Thanks again for your help....

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Javascript not working on Firefox

mpartarrieu

Programmer

BillyRayPreachersSon

Programmer

mpartarrieu

Programmer

cLFlaVA

Programmer

mpartarrieu

Programmer

Similar threads

Part and Inventory Search

Sponsor