Hi,
I have an HTML page which is a telephone directory. On this page there is a script which allows you to hover over someone's computer number and you get a popup menu with various options - remote control, open desktop folder etc.
The problem I've got is that the code for the telephone listing is inside a <DIV> tag so that it can be positioned correctly to leave room for a banner at the top and a menu on the left hand side. The popup menu is also in a <DIV> tag but because the first <DIV> is not closed until the end of the listing the positioning of the popup is offset by that much. That is it should appear where the mouse is when you hover over the computer number but in fact is off by 185 pixels one way and 150 the other. Is there some way I can deduct this from the positioning so it appears where it is meant to?
I have stripped out as much as possible to make it more readable:
Thanks very much
Ed
<head>
<meta http-equiv="Page-Enter" content="blendTrans(Duration=1.0)">
<style type="text/css">
<!--
.menuskin{
position:absolute;
width:165px;
background-color:menu;
border:2px solid black;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
visibility:hidden;
}
.menuskin a{
text-decoration:none;
color:black;
padding-left:-10px;
padding-right:10px;
}
#mouseoverstyle{
background-color:highlight;
}
#mouseoverstyle a{
color:white;
}
-->
</style>
<script type="text/javascript">
//Pop-it menu- By Dynamic Drive
//For full source code and more DHTML scripts, visit //This credit MUST stay intact for use
var linkset=new Array()
//SPECIFY MENU SETS AND THEIR LINKS. FOLLOW SYNTAX LAID OUT
linkset[0]='<div class="menuitems"><a href="file://bwbsrv01\users\helpdesk\vnc\connections\PC084.vnc">Remote Control</a></div>'
linkset[0]+='<div class="menuitems"><a href="file://bwbsrv01\users\downloads\wakeup\wakeup.exe -w 000d562ae0f0">Wake Up</a></div>'
linkset[0]+='<hr>' //Optional Separator
linkset[0]+='<div class="menuitems"><a href="header2.asp?MenuItem=1&UserID=194" target="directoryheader">User Desktop</a></div>'
linkset[0]+='<div class="menuitems"><a href="header2.asp?MenuItem=2&UserID=194" target="directoryheader">VisualFiles Folder</a></div>'
linkset[0]+='<hr>' //Optional Separator
linkset[0]+='<div class="menuitems"><a href="softwarereport.asp?HardwareID=PC084">Check Software</a></div>'
////No need to edit beyond here
var ie4=document.all
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("popmenu") : ns4? document.popmenu : ""
menuobj.thestyle=(ie4||ns6)? menuobj.style : menuobj
if (ie4||ns6)
menuobj.innerHTML=which
else{
menuobj.document.write('<layer name=gui bgColor=#E6E6E6 width=165 onmouseover="clearhidemenu()" onmouseout="hidemenu()">'+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="visible"
return false
}
function contains_ns6(a, b) {
//Determines if 1 element in 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)? "hidden" : "hide"
}
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("hidemenu()",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=="menuitems"){
source_el.id=(state=="on")? "mouseoverstyle" : ""
}
else{
while(source_el.id!="popmenu"){
source_el=document.getElementById? source_el.parentNode : source_el.parentElement
if (source_el.className=="menuitems"){
source_el.id=(state=="on")? "mouseoverstyle" : ""
}
}
}
}
if (ie4||ns6)
document.onclick=hidemenu
</script>
<meta http-equiv="Page-Enter" content="blendTrans(Duration=1.0)">
</head>
<body>
<div id="Layer3" style="position:absolute; left:185px; top:150px; width:780px; z-index:42">
<div id="popmenu" class="menuskin" onMouseover="clearhidemenu();highlightmenu(event,'on')" onMouseout="highlightmenu(event,'off');dynamichide(event)">
</div>
<table width="100%" border="0" cellspacing="1" cellpadding="2">
<tr height='24'>
<td width='10%'><image src="../graphics/admin2.jpg" width="14" height="16"></td>
<td width='15%'>Admin</td>
<td width='15%'></td>
<td width='15%'>Admin</td>
<td width='10%'></td>
<td width='15%'><a href="#" onMouseover="showmenu(event,linkset[0])" onMouseout="delayhidemenu()">PC084</td>
<td width='10%'>1st</td>
<td align='right' width='10%'>740</td>
</tr>
</table>
</body>
</html>
</div>
I have an HTML page which is a telephone directory. On this page there is a script which allows you to hover over someone's computer number and you get a popup menu with various options - remote control, open desktop folder etc.
The problem I've got is that the code for the telephone listing is inside a <DIV> tag so that it can be positioned correctly to leave room for a banner at the top and a menu on the left hand side. The popup menu is also in a <DIV> tag but because the first <DIV> is not closed until the end of the listing the positioning of the popup is offset by that much. That is it should appear where the mouse is when you hover over the computer number but in fact is off by 185 pixels one way and 150 the other. Is there some way I can deduct this from the positioning so it appears where it is meant to?
I have stripped out as much as possible to make it more readable:
Thanks very much
Ed
<head>
<meta http-equiv="Page-Enter" content="blendTrans(Duration=1.0)">
<style type="text/css">
<!--
.menuskin{
position:absolute;
width:165px;
background-color:menu;
border:2px solid black;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
visibility:hidden;
}
.menuskin a{
text-decoration:none;
color:black;
padding-left:-10px;
padding-right:10px;
}
#mouseoverstyle{
background-color:highlight;
}
#mouseoverstyle a{
color:white;
}
-->
</style>
<script type="text/javascript">
//Pop-it menu- By Dynamic Drive
//For full source code and more DHTML scripts, visit //This credit MUST stay intact for use
var linkset=new Array()
//SPECIFY MENU SETS AND THEIR LINKS. FOLLOW SYNTAX LAID OUT
linkset[0]='<div class="menuitems"><a href="file://bwbsrv01\users\helpdesk\vnc\connections\PC084.vnc">Remote Control</a></div>'
linkset[0]+='<div class="menuitems"><a href="file://bwbsrv01\users\downloads\wakeup\wakeup.exe -w 000d562ae0f0">Wake Up</a></div>'
linkset[0]+='<hr>' //Optional Separator
linkset[0]+='<div class="menuitems"><a href="header2.asp?MenuItem=1&UserID=194" target="directoryheader">User Desktop</a></div>'
linkset[0]+='<div class="menuitems"><a href="header2.asp?MenuItem=2&UserID=194" target="directoryheader">VisualFiles Folder</a></div>'
linkset[0]+='<hr>' //Optional Separator
linkset[0]+='<div class="menuitems"><a href="softwarereport.asp?HardwareID=PC084">Check Software</a></div>'
////No need to edit beyond here
var ie4=document.all
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("popmenu") : ns4? document.popmenu : ""
menuobj.thestyle=(ie4||ns6)? menuobj.style : menuobj
if (ie4||ns6)
menuobj.innerHTML=which
else{
menuobj.document.write('<layer name=gui bgColor=#E6E6E6 width=165 onmouseover="clearhidemenu()" onmouseout="hidemenu()">'+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="visible"
return false
}
function contains_ns6(a, b) {
//Determines if 1 element in 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)? "hidden" : "hide"
}
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("hidemenu()",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=="menuitems"){
source_el.id=(state=="on")? "mouseoverstyle" : ""
}
else{
while(source_el.id!="popmenu"){
source_el=document.getElementById? source_el.parentNode : source_el.parentElement
if (source_el.className=="menuitems"){
source_el.id=(state=="on")? "mouseoverstyle" : ""
}
}
}
}
if (ie4||ns6)
document.onclick=hidemenu
</script>
<meta http-equiv="Page-Enter" content="blendTrans(Duration=1.0)">
</head>
<body>
<div id="Layer3" style="position:absolute; left:185px; top:150px; width:780px; z-index:42">
<div id="popmenu" class="menuskin" onMouseover="clearhidemenu();highlightmenu(event,'on')" onMouseout="highlightmenu(event,'off');dynamichide(event)">
</div>
<table width="100%" border="0" cellspacing="1" cellpadding="2">
<tr height='24'>
<td width='10%'><image src="../graphics/admin2.jpg" width="14" height="16"></td>
<td width='15%'>Admin</td>
<td width='15%'></td>
<td width='15%'>Admin</td>
<td width='10%'></td>
<td width='15%'><a href="#" onMouseover="showmenu(event,linkset[0])" onMouseout="delayhidemenu()">PC084</td>
<td width='10%'>1st</td>
<td align='right' width='10%'>740</td>
</tr>
</table>
</body>
</html>
</div>
