469,326 Members | 1,607 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,326 developers. It's quick & easy.

Pop Up menu problem :(

1
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 :

Expand|Select|Wrap|Line Numbers
  1. // Function to position the nav tabs
  2.  
  3. function positionTab(div, parentObj) {
  4.   divObj = document.getElementById(div);
  5.   var top = findPosY(parentObj);
  6.   var left = findPosX(parentObj);
  7.  
  8.   divObj.style.top = top + 25;
  9.   divObj.style.left = left - 20;
  10.   divObj.style.display = 'block';
  11. }
  12.  
  13.  // Function to find the X position of an element
  14.  function findPosX(obj)
  15.   {
  16.     var curleft = 0;
  17.     if(obj.offsetParent)
  18.         while(1) 
  19.         {
  20.           curleft += obj.offsetLeft;
  21.           if(!obj.offsetParent)
  22.             break;
  23.           obj = obj.offsetParent;
  24.         }        
  25.     else if(obj.x)
  26.         curleft += obj.x;
  27.     return curleft;
  28.   }
  29.  
  30.  // Function to find the Y position of an element
  31.   function findPosY(obj)
  32.   {
  33.     var curtop = 0;
  34.     if(obj.offsetParent)
  35.         while(1)
  36.         {
  37.           curtop += obj.offsetTop;
  38.           if(!obj.offsetParent)
  39.             break;
  40.           obj = obj.offsetParent;
  41.         }
  42.  
  43.     else if(obj.y)
  44.         curtop += obj.y;
  45.     return curtop;
  46.   }
  47.  

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>
Mar 26 '08 #1
2 1241
The code works fine for me in Firefox and in Internet Explorer. The popupRewards div appears when I hover the mouse over the link.

Maybe you could post the entire code so I could find a problem. Also, check to make sure you don't have javascript turned off on Firefox.

I hope I helped.
Mar 26 '08 #2
acoder
16,027 Expert Mod 8TB
Don't forget the units (px, em, etc.) when setting the top and left properties.
Mar 27 '08 #3

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

2 posts views Thread by Jackson Yap | last post: by
8 posts views Thread by Dennis C. Drumm | last post: by
1 post views Thread by Anthony | last post: by
4 posts views Thread by TycoonUK | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by zhoujie | last post: by
reply views Thread by mdpf | last post: by
reply views Thread by harlem98 | last post: by
reply views Thread by listenups61195 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.