By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
464,556 Members | 934 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 464,556 IT Pros & Developers. It's quick & easy.

ScrollTop Issue in Firefox

P: 46
Hi all,

I was showing the popup while hovering over an element under overflow div. so i am getting top and left of current hovering element to display popup with that top and left position.
In IE it positioned exactly where i was hovering, But in firefox it was misplaced under the overflow div[Not exactly what position i hovered]

My sample code
Expand|Select|Wrap|Line Numbers
  1. <div id="overflowdiv" style="overflow:scroll;height:100;width:100">
  2.     <ul style="list-style-type:none">
  3.         <li><a href="javascript:void(0);" onMouseOver="getScrollTop(this)">Test Element 1</a></li>
  4.         <li><a href="javascript:void(0);" onMouseOver="getScrollTop(this)">Test Element 2</a></li>
  5.         <li><a href="javascript:void(0);" onMouseOver="getScrollTop(this)">Test Element 3</a></li>
  6.         <li><a href="javascript:void(0);" onmouseover="getScrollTop(this)">Test Element 4</a></li>
  7.         <li><a href="javascript:void(0);" onmouseover="getScrollTop(this)">Test Element 5</a></li>
  8.         <li><a href="javascript:void(0);" onmouseover="getScrollTop(this)">Test Element 6</a></li>
  9.         <li><a href="javascript:void(0);" onmouseover="getScrollTop(this)">Test Element 7</a></li>
  10.         <li><a href="javascript:void(0);" onmouseover="getScrollTop(this)">Test Element 8</a></li>
  11.         <li><a href="javascript:void(0);" onmouseover="getScrollTop(this)">Test Element 9</a></li>
  12.         <li><a href="javascript:void(0);" onMouseOver="getScrollTop(this)">Test Element 10</a></li>
  13.         <li><a href="javascript:void(0);" onmouseover="getScrollTop(this)">Test Element 11</a></li>
  14.         <li><a href="javascript:void(0);" onmouseover="getScrollTop(this)">Test Element 12</a></li>
  15.         <li><a href="javascript:void(0);" onmouseover="getScrollTop(this)">Test Element 13</a></li>
  16.         <li><a href="javascript:void(0);" onmouseover="getScrollTop(this)">Test Element 14</a></li>
  17.         <li><a href="javascript:void(0);" onmouseover="getScrollTop(this)">Test Element 15</a></li>
  18.         <li><a href="javascript:void(0);" onmouseover="getScrollTop(this)">Test Element 16</a></li>
  19.     </ul>
  20. </div>
  21. <div id="showdiv" style="left:-100;top:-100;position:absolute;background-color:#FFFF00;color:#000000">Please help me to resolve this issue</div>
  22. <script language="javascript">
  23.     function getScrollTop( element ){
  24.         var l = t = 0;        
  25.         while( element != null ) {
  26.             l += element.offsetLeft;
  27.             t += element.offsetTop;                        
  28.             if ( element.nodeName != 'BODY' ){                 
  29.                 l -= element.scrollLeft;
  30.                 t -= element.scrollTop;
  31.             }
  32.             element = element.offsetParent;
  33.         }
  34.         document.getElementById('showdiv').style.left = l;
  35.         document.getElementById('showdiv')  = t;
  36.     }
  37. </script>
Please tell me what is the problem
Jun 17 '08 #1
Share this Question
Share on Google+
3 Replies

Expert Mod 15k+
P: 16,027
When setting top/left, you need to add the units, e.g. "px".
Jun 17 '08 #2

P: 46
When setting top/left, you need to add the units, e.g. "px".
Thanks for your reply.

After applying this also, it shouldn't work at all.
Jun 17 '08 #3

Expert Mod 15k+
P: 16,027
Ah I see. There's no need to work out offsetLeft, etc. if all you want is the mouse position. See this link.
Jun 17 '08 #4

Post your reply

Sign in to post your reply or Sign up for a free account.