Code:
function show_div(element)
{
for (var loop = 0; loop < divs.length; loop++)
{
Element.hide(divs[loop]);
}
makePositionedCoords(element,-yMousePos+(.4*yMousePos),xMousePos);
Element.show(element);
}
function makePositionedCoords(element,x,y)
{
element = $(element);
var pos = Element.getStyle(element, 'position');
if (pos == 'static' || !pos)
{
element._madePositioned = true;
element.style.position = 'absolute';
if (window.opera)
{
element.style.top = 0;
element.style.left = 0;
}
}
element.style.top = -x;
element.style.left = y;
}
function captureMousePosition(e)
{
if (document.layers)
{
xMousePos = e.pageX;
yMousePos = e.pageY;
xMousePosMax = window.innerWidth+window.pageXOffset;
yMousePosMax = window.innerHeight+window.pageYOffset;
}
else if (document.all)
{
xMousePos = window.event.x+document.body.scrollLeft;
yMousePos = window.event.y+document.body.scrollTop;
xMousePosMax = document.body.clientWidth+document.body.scrollLeft;
yMousePosMax = document.body.clientHeight+document.body.scrollTop;
}
else if (document.getElementById)
{
xMousePos = e.pageX;
yMousePos = e.pageY;
xMousePosMax = window.innerWidth+window.pageXOffset;
yMousePosMax = window.innerHeight+window.pageYOffset;
}
}
function hide_div(element)
{
Element.hide(element);
}
That is my javascript that I have to display a hidden div
Code:
<div style="display:none; position:absolute;" id="foo"><table style="border:solid;"><tr><td>Insert foo <a href="">Link</a></td></tr></table></div>
I want the div to appear whenever they have the event onmouseover
Code:
<li class="linav"><a class="sidenav" onmouseover="show_div('foo');" href="">foo</a></li>
Unfortunately, the div appears in the upper left-hand corner of the browser. How do I get this to appear at the coordinates of the mouse and also to not disappear if they go into the <div>. I have placed all the hidden div's after the footer.