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
- // 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>