Forum Moderators: open

Message Too Old, No Replies

Lozenge follow w/tables

Script working normally, but not in a table!

         

adni18

10:36 pm on Feb 20, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi. I wrote the script below, and it works normally, but when you put the divs in a table, the lozenge will not follow the selected div. Try it. You will see what I mean. Any solutions?

<BODY ONRESIZE="fixinit()" margintop=0 marginleft=0>

<DIV style="width:170px;height:25px;background-color:#A7C0FF;z-index:1;position:absolute;left:-180px;top:-30px" id="boxie"></DIV>
<DIV style="margin:0px;width:170px;height:25px;border:1px solid #AAAAAA;background-color:transparent;z-index:5;position:relative" onMouseOver="mo(this)" id="topOne">Everyone</DIV>
<DIV style="margin:0px;width:170px;height:25px;border:1px solid #AAAAAA;background-color:transparent;z-index:5;position:relative;border-top:0px" onMouseOver="mo(this)">Nobody</DIV>
<DIV style="margin:0px;width:170px;height:25px;border:1px solid #AAAAAA;background-color:transparent;z-index:5;position:relative;border-top:0px" onMouseOver="mo(this)">Somebody</DIV>
<DIV style="margin:0px;width:170px;height:25px;border:1px solid #AAAAAA;background-color:transparent;z-index:5;position:relative;border-top:0px" onMouseOver="mo(this)">The body</DIV>


<script language="javascript">
function voidinit()
{
document.getElementById("boxie").style.left=document.getElementById("topOne").offsetLeft+"px";
document.getElementById("boxie").style.top=document.getElementById("topOne").offsetTop+"px";
}
function fixinit()
{
document.getElementById("boxie").style.left=document.getElementById("topOne").offsetLeft+"px";
document.getElementById("boxie").style.top=document.getElementById("boxie").style.top;
}
voidinit();
var impressive=null;
function mo(d)
{
impressive=d;
if(document.getElementById("boxie").style.left!=d.offsetLeft+"px" ¦¦ document.getElementById("boxie").style.top!=d.offsetTop+"px")
{
window.setTimeout("mo(impressive)",5);
}
if(document.getElementById("boxie").style.left<d.offsetLeft+"px")
{
document.getElementById("boxie").style.left=eval(document.getElementById("boxie").style.left.split("px")[0])+eval(1)+"px";
}
if(document.getElementById("boxie").style.left>d.offsetLeft+"px")
{
document.getElementById("boxie").style.left=eval(document.getElementById("boxie").style.left.split("px")[0])-eval(1)+"px";
}
if(document.getElementById("boxie").style.top<d.offsetTop+"px")
{
document.getElementById("boxie").style.top=eval(document.getElementById("boxie").style.top.split("px")[0])+eval(1)+"px";
}
if(document.getElementById("boxie").style.top>d.offsetTop+"px")
{
document.getElementById("boxie").style.top=eval(document.getElementById("boxie").style.top.split("px")[0])-eval(1)+"px";
}
}
</script>

Bernard Marx

11:28 pm on Feb 20, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi adni. Did a little strip-down job, before working out what the script does.
Funnily enough, it works in IE & Firefox now. Nice

// + a couple of new globals to carry elm refs
var impressive=null;
var box;
var topOne;

function voidinit()
{
box = document.getElementById("boxie");
topOne = document.getElementById("topOne");

box.style.left = topOne.offsetLeft+"px";
box.style.top = topOne.offsetTop+"px";
}

function fixinit()
{
box.style.left = topOne.offsetLeft+"px";
// whassat?
// document.getElementById("boxie").style.top
// = document.getElementById("boxie").style.top;
}

function mo(d)
{
var boxLeft = parseInt(box.style.left);
var boxTop = parseInt(box.style.top);

impressive = d;
if ( boxLeft!= d.offsetLeft ¦¦
boxTop!= d.offsetTop )
{
window.setTimeout("mo(impressive)",5);
}

if (boxLeft < d.offsetLeft)
box.style.left = boxLeft+1 +"px";
else if (boxLeft > d.offsetLeft)
box.style.left = boxLeft-1 +"px";
if (boxTop < d.offsetTop)
box.style.top=boxTop+1 +"px";
else if (boxTop > d.offsetTop)
box.style.top=boxTop-1 +"px";
}

[edited by: jatar_k at 3:50 pm (utc) on Oct. 5, 2005]

Bernard Marx

11:39 pm on Feb 20, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Oh, I see. It was meant to be working anyway! (probably was too).

It's to do with table cells and offsetParent.
Can be tricky. How about setting CSS:

td{position:relative;top:0;left:0;}