onmouseover, the popup box always shown on the top of the page

firehorse24 · May 18, 2011

Hi,

I'm tring to do onmouseover to each row in a <table>. I'd like the popup box shown next to each row when I move the mouse over. But the popup box always shown on the same position in the page.

If I don't use <table>, then the popup box follow the rows.

please see my code with <table>

Code:

<html> 
 <head>  
<title>Popup Box</title>  
 <style> 
 #messageBox{  
    border-right: 1px solid #000000;  
     position: absolute;
	 width: 300px;  
     height: 100px;  
     z-index: 1;  
     background-color: #FFFFFF;  
    border-style: solid;  
    border-width: 1px;  
    display:none;  
 } 

 } 

 #contents{  
    width: 300px;  
    height: 100px;  
    z-index: 2;  
 }  

</style>  

<script language="javascript">  

function show(obj){  
 messageBox.style.top=obj.offsetTop
 messageBox.style.left=obj.offsetLeft+obj.offsetWidth+ 5 +"px"
 
 contents.innerHTML = "test"
 messageBox.style.display="block" 

 }  

 </script>  

 </head>  

   

 <body> 
 <table border="1">
 
<tr><td>
<a href="#" onmouseover="show(this)" onmouseout="messageBox.style.display='none'">go to google </a>
</td></tr>

<tr><td>A</td></tr>
 
<tr><td>
<a href="#" onmouseover="show(this)" onmouseout="messageBox.style.display='none'">go to msn </a>
</td></tr>

<tr><td>A</td> </tr>
<tr><td>B</td> </tr>
<tr><td>S</td> </tr>
<tr><td>D</td> </tr>
 
<tr><td>
<a href="#" onmouseover="show(this)"   onmouseout="messageBox.style.display='none'">go to DIC</a>
</td></tr>

<tr><td>S</td> </tr>
<tr><td>D</td> </tr>
 
</table> 
 
 <div id="messageBox" onmouseout="this.style.display='none'" >  
    <div id="contents"></div>  
 </div>  
 

 </body>  

 </html>

Following is the HTML code without <table>

Code:

<body> 
 
<p>
<a onmouseover="show(this)" onmouseout="messageBox.style.display='none'" href="#">go to google</a>
</p>

<p>
<a onmouseover="show(this)" onmouseout="messageBox.style.display='none'" href="#">go to msn</a>
</p>

<br>
<br>

<p>
<a onmouseover="show(this)" onmouseout="messageBox.style.display='none'" href="#">go to DIC</a>
</p>

<div id="messageBox">  
  <div id="contents"></div>  
</div>  

</body>

Thank you a lot ahead!

ChrisHirst · May 19, 2011

Absolutely positioned elements are removed from the document flow and positioned from the top and left edges nearest non-static positioned ancestor.
If there is no positioned ancestor it will take the top and left edges from the body element.

You need to set position relative on the element you want to act as parent to the absolute elements.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

firehorse24 · May 19, 2011

Thank you for the reply, Chris.

Can you please post some sample code for me? I've tried to change to position: relative inside style #messageBox. It didn't work. I don't understand why onmouseover wasn't working for table.

Thanks again.

ChrisHirst · May 22, 2011

If you want the messagebox to appear alongside or over the top the triggerpoint, you will need to pass the mouseX and mouseY parameters to the top and left setting for the messagebox.

http://www.quirksmode.org/js/events_properties.html

http://javascript.about.com/library/blmousepos.htm

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

firehorse24 · May 23, 2011

Thank you Chris,

I'll try that!

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

onmouseover, the popup box always shown on the top of the page

firehorse24

Programmer

ChrisHirst

IS-IT--Management

firehorse24

Programmer

ChrisHirst

IS-IT--Management

firehorse24

Programmer

Similar threads

Part and Inventory Search

Sponsor