Pop Up menu problem :( 1

[gia999]

Hi there,

I am trying to get a menu (a div which will contain a list of links) to pop up when you rollover a link and this pop ups just beneath the link which calls it. I have it working in IE and Opera, but it just will not work in Mozilla Firefox .

I have been trying different things for the past 4 hours and just don't know how to get it to work.. can anyone help me? Im so desperate to get this working

I include my code below, it will be a life saver for me... thank you in advance for any help you can offer.

Gia999

The Link which calls it :

<li><a href="#" onMouseOver="positionTab('popupRewards', this);">Directory</a></li>

The Javascript :

// Function to position the nav tabs

function positionTab(div, parentObj) {
divObj = document.getElementById(div);
var top = findPosY(parentObj);
var left = findPosX(parentObj);

divObj.style.top = top + 25;
divObj.style.left = left - 20;
divObj.style.display = 'block';
}

// Function to find the X position of an element
function findPosX(obj)
{
var curleft = 0;
if(obj.offsetParent)
while(1)
{
curleft += obj.offsetLeft;
if(!obj.offsetParent)
break;
obj = obj.offsetParent;
}
else if(obj.x)
curleft += obj.x;
return curleft;
}

// Function to find the Y position of an element
function findPosY(obj)
{
var curtop = 0;
if(obj.offsetParent)
while(1)
{
curtop += obj.offsetTop;
if(!obj.offsetParent)
break;
obj = obj.offsetParent;
}

else if(obj.y)
curtop += obj.y;
return curtop;
}



The CSS style of menu :

div.popupBox {
display: none;
width: 410px;
padding: 10px;
border: 1px solid #cd3173;
background-color: #FFF;
opacity: .9;
filter: alpha(opacity=90);
position: absolute;
z-index:100;
}

The pop up div menu itself :

<div class="popupBox" id="popupRewards">
<h3>test title</h3>
<p>menu here</p>
</div>

 

[kaht]

You aren't specifying units when assigning left and top - I don't know if this is your only problem since it's the first thing I saw. But, I know for a fact that firefox will not work correctly w/o them and IE will:

function positionTab(div, parentObj) {
  divObj = document.getElementById(div);
  var top = findPosY(parentObj);
  var left = findPosX(parentObj);
  
  divObj.style.top = [!]([/!]top + 25[!]) + "px"[/!];
  divObj.style.left = [!]([/!]left - 20[!]) + "px"[/!];
  divObj.style.display = 'block';
}

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson

[small]<P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <.</B>[/small]

 

[BillyRayPreachersSon]

Pipped to the post ;-). That was my hunch anyhoo...

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

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

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

[/tt]

 

[gia999]

Thank you SOOOOOOOOOOO MUCH to you both, something so simple and I have been trying all sorts of crazy things. I would never have thought of that.

Life savers!! thank you again