Absolute positioning in DHTML_javascript tips

The following shows
how to best display a DIV next to an Element in a complex situation.
Of course, you can scroll the window so that the button is close to the left/top/right/bottom of the window and observe the pop-up position of the menu.
All codes:

Copy code The code is as follows:

 
 
 

table1	table1
table1	div1 start        ClickMe       div1 end

 

-

 
 
 
 

table2	table2
table2	div2 start        div2menu     div2menu     div2menu     div2menu     div2menu        div2 end

 
 
//get the position of a element ( by the scroll offset ) 
function LostinetWebGetScrollPostion(e) 
{ 
 var b=e.document.body; 
 if(e==b)return {left:0,top:0}; 
 with(e.getBoundingClientRect()) 
 { 
  return {left:b.scrollLeft left,top:b.scrollTop top}; 
 } 
} 
//get the position of a element ( by the client offset ) 
function LostinetWebGetClientPosition(e) 
{ 
 var b=e.document.body; 
 if(e==b)return {left:-b.scrollLeft,top:-b.scrollTop}; 
 with(e.getBoundingClientRect()) 
 { 
  return {left:left-b.clientLeft,top:top-b.clientTop}; 
 } 
} 
//get absolute or relative parent 
function LostinetWebGetStandParent(e) 
{ 
 for(var p=e.parentElement;p!=null;p=p.parentElement) 
 { 
  var sp=p.currentStyle.position; 
  if(sp=='absolute'||sp=='relative') 
   return p; 
 } 
 return e.document.body; 
} 
//calc the position of floate that relative to e 
function LostinetWebCalcPosition(floate,e) 
{ 
 var epos=LostinetWebGetScrollPostion(e); 
 var spos=LostinetWebGetScrollPostion(LostinetWebGetStandParent(floate)); 
 var s=LostinetWebGetStandParent(floate); 
 return {left:epos.left-spos.left-s.clientLeft,top:epos.top-spos.top-s.clientTop}; 
} 
//get the best position to put the floate 
function LostinetWebAdjustMirror(floate,e,pos) 
{ 
 //c:Client,f:floate,e:e,p:floate's StandParent,m:Mirror 
 var cw=e.document.body.clientWidth; 
 var ch=e.document.body.clientHeight; 
 var fw=floate.offsetWidth; 
 var fh=floate.offsetHeight; 
 var ew=e.offsetWidth; 
 var eh=e.offsetHeight; 
 var ecpos=LostinetWebGetClientPosition(e); 
 var empos={left:ecpos.left ew/2,top:ecpos.top eh/2}; 
 var pcpos=LostinetWebGetClientPosition(LostinetWebGetStandParent(floate)); 
 var fcpos=LostinetWebGetClientPosition(floate); 
 var fmpos={left:pcpos.left pos.left fw/2,top:pcpos.top pos.top fh/2}; 
 //left<-->right 
 if( (fmpos.leftcw)&&((empos.left*2-fmpos.left)-fw/2>=0)) ) 
  fmpos.left=empos.left*2-fmpos.left; 
 //top<-->bottom 
 if( (fmpos.topch)&&((empos.top*2-fmpos.top)-fh/2>=0)) ) 
  fmpos.top=empos.top*2-fmpos.top; 
 pos.left=fmpos.left-pcpos.left-fw/2; 
 pos.top=fmpos.top-pcpos.top-fh/2; 
} 
document.attachEvent('onclick',function f() 
{ 
 if(div1button.contains(event.srcElement))return; 
 if(div2menu.contains(event.srcElement))return; 
 div2menu.runtimeStyle.display='none'; 
}); 
function div1button.onclick() 
{ 
 div2menu.runtimeStyle.display='block'; 
 var pos=LostinetWebCalcPosition(div2menu,div1button); 
 pos.top =div1button.offsetHeight; 
 LostinetWebAdjustMirror(div2menu,div1button,pos); 
 div2menu.runtimeStyle.left=pos.left; 
 div2menu.runtimeStyle.top=pos.top; 
}