javascript positioning prob

[JhayAnn]

Ok, I have an external javascript popup menu (activated via mouseover a button image) but the popup doesn't always appear on/beside the button. It sometimes pops up across the screen, or basically anywhere unexpected. How do I position the popup menu correctly so it appears by the button image that sets it off? Here's the javascript if this helps:

//JAVASCRIPT CSS POPUP MENU

var linkset=new Array()

//PRELOAD BODY ROLLOVER IMAGES
foryou_OUT = new Image (128,39)
foryou_OUT.src = "r2_c1-05_normal.gif"
foryou_OVER = new Image (128,39)
foryou_OVER.src = "r2_c1-05_over.gif"
foryou_DOWN = new Image (128,39)
foryou_DOWN.src = "r2_c1-05_down.gif"
contact_OUT = new Image (141,39)
contact_OUT.src = "r11_c1-22_normal.gif"
contact_OVER = new Image (141,39)
contact_OVER.src = "r11_c1-22_over.gif"
contact_DOWN = new Image (141,39)
contact_DOWN.src = "r11_c1-22_down.gif"


//FOR YOU MENU
linkset[0]='<div class=&quot;menuitems&quot;><a href=&quot;foryou.html&quot; target=&quot;_self&quot;>Intro...</a></div>'
linkset[0]+='<div class=&quot;menuitems&quot;><a href=&quot;updates.html&quot; target=&quot;_self&quot;>Updates</a></div>'
linkset[0]+='<div class=&quot;menuitems&quot;><a href=&quot;humor.html&quot; target=&quot;_self&quot;>Humor Me</a></div>'
linkset[0]+='<div class=&quot;menuitems&quot;><a href=&quot;games.html&quot; target=&quot;_self&quot;>Let the Games Begin</a></div>'
linkset[0]+='<div class=&quot;menuitems&quot;><a href=&quot;freebies.html&quot; target=&quot;_self&quot;>Freebies</a></div>'
linkset[0]+='<div class=&quot;menuitems&quot;><a href=&quot;tutorials.html&quot; target=&quot;_self&quot;>Tutorials</a></div>'
linkset[0]+='<div class=&quot;menuitems&quot;><a href=&quot;awards.html&quot; target=&quot;_self&quot;>Awards</a></div>'
linkset[0]+='<div class=&quot;menuitems&quot;><a href=&quot;links.html&quot; target=&quot;_self&quot;>Free4All Links*</a></div>'
linkset[0]+='<div class=&quot;menuitems&quot;><a href=&quot;gbook.html&quot; target=&quot;_self&quot;>View Guestbook*</a></div>'
linkset[0]+='<div class=&quot;menuitems&quot;><a href=&quot;index2.html&quot; target=&quot;_self&quot;>XyberCard Shoppe</a></div>'
linkset[0]+='<div class=&quot;menuitems&quot;><a href=&quot;mail.html&quot; target=&quot;_blank&quot;>XyberMail*</a></div>'

//CONTACT MENU
linkset[4]='<div class=&quot;menuitems&quot;><a href=&quot;signbook.html&quot; target=&quot;_self&quot;>Sign Guestbook*</a></div>'
linkset[4]+='<div class=&quot;menuitems&quot;><a href=&quot;webmail.html&quot;v>Send us an eMail</a></div>'
linkset[4]+='<div class=&quot;menuitems&quot;><a href=&quot;icqpanel.html&quot; target=&quot;_self&quot;>Use our ICQ Panel</a></div>'


var ie4=document.all&&navigator.userAgent.indexOf(&quot;Opera&quot==-1
var ns6=document.getElementById&&!document.all
var ns4=document.layers

function showmenu(e,which){

if (!document.all&&!document.getElementById&&!document.layers)
return

clearhidemenu()

menuobj=ie4? document.all.popmenu : ns6? document.getElementById(&quot;popmenu&quot : ns4? document.popmenu : &quot;&quot;
menuobj.thestyle=(ie4||ns6)? menuobj.style : menuobj

if (ie4||ns6)
menuobj.innerHTML=which
else{
menuobj.document.write('<layer name=gui bgColor=#E6E6E6 width=160 onmouseover=&quot;clearhidemenu()&quot; onmouseout=&quot;hidemenu()&quot;>'+which+'</layer>')
menuobj.document.close()
}

menuobj.contentwidth=(ie4||ns6)? menuobj.offsetWidth : menuobj.document.gui.document.width
menuobj.contentheight=(ie4||ns6)? menuobj.offsetHeight : menuobj.document.gui.document.height
eventX=ie4? event.clientX : ns6? e.clientX : e.x
eventY=ie4? event.clientY : ns6? e.clientY : e.y

//Find out how close the mouse is to the corner of the window
var rightedge=ie4? document.body.clientWidth-eventX : window.innerWidth-eventX
var bottomedge=ie4? document.body.clientHeight-eventY : window.innerHeight-eventY

//if the horizontal distance isn't enough to accomodate the width of the context menu
if (rightedge<menuobj.contentwidth)
//move the horizontal position of the menu to the left by it's width
menuobj.thestyle.left=ie4? document.body.scrollLeft+eventX-menuobj.contentwidth : ns6? window.pageXOffset+eventX-menuobj.contentwidth : eventX-menuobj.contentwidth
else
//position the horizontal position of the menu where the mouse was clicked
menuobj.thestyle.left=ie4? document.body.scrollLeft+eventX : ns6? window.pageXOffset+eventX : eventX

//same concept with the vertical position
if (bottomedge<menuobj.contentheight)
menuobj.thestyle.top=ie4? document.body.scrollTop+eventY-menuobj.contentheight : ns6? window.pageYOffset+eventY-menuobj.contentheight : eventY-menuobj.contentheight
else
menuobj.thestyle.top=ie4? document.body.scrollTop+event.clientY : ns6? window.pageYOffset+eventY : eventY
menuobj.thestyle.visibility=&quot;visible&quot;
return false
}

function contains_ns6(a, b) {
//Determines if 1 element is contained in another- by Brainjar.com
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

function hidemenu(){
if (window.menuobj)
menuobj.thestyle.visibility=(ie4||ns6)? &quot;hidden&quot; : &quot;hide&quot;
}

function dynamichide(e){
if (ie4&&!menuobj.contains(e.toElement))
hidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
hidemenu()
}

function delayhidemenu(){
if (ie4||ns6||ns4)
delayhide=setTimeout(&quot;hidemenu()&quot;,500)
}

function clearhidemenu(){
if (window.delayhide)
clearTimeout(delayhide)
}

function highlightmenu(e,state){
if (document.all)
source_el=event.srcElement
else if (document.getElementById)
source_el=e.target
if (source_el.className==&quot;menuitems&quot{
source_el.id=(state==&quot;on&quot? &quot;mouseoverstyle&quot; : &quot;&quot;
}
else{
while(source_el.id!=&quot;popmenu&quot{
source_el=document.getElementById? source_el.parentNode : source_el.parentElement
if (source_el.className==&quot;menuitems&quot{
source_el.id=(state==&quot;on&quot? &quot;mouseoverstyle&quot; : &quot;&quot;
}
}
}
}

if (ie4||ns6)
document.onclick=hidemenu

 

[mts176]

I seached the forum and found this piece of code that helped me open a pop up along with its positioning. I had to play around with the &quot;top&quot; and &quot;left&quot; valued but I finally got the box to open where I wanted it.

<SCRIPT language=javascript>
//write different style sheet for Netscape on PC

function windowOpener(url)
{
Locationwind = window.open(url, &quot;Location&quot;, &quot;location=no,menubar=no,resizable=no,scrollbars=no,status=no,titlebar=no,toolbar=no, width=265, height=130, top=420, left=90&quot
}

</SCRIPT>