Posted By

scriptmakingcom on 09/03/07


Tagged

javascript popup hide mouseover mouseout


Versions (?)

Who likes this?

3 people have marked this snippet as a favorite

bartekk
vali29
abunda


Show floating div near cursor on mouseover, hide on mouseout


 / Published in: JavaScript
 

URL: http://willmaster.com/blog/css/Floating_Layer_At_Cursor_Position.html

  1. <script type="text/javascript" language="JavaScript">
  2. <!-- Copyright 2006,2007 Bontrager Connection, LLC
  3. // http://bontragerconnection.com/ and http://willmaster.com/
  4. // Version: July 28, 2007
  5. var cX = 0; var cY = 0; var rX = 0; var rY = 0;
  6. function UpdateCursorPosition(e){ cX = e.pageX; cY = e.pageY;}
  7. function UpdateCursorPositionDocAll(e){ cX = event.clientX; cY = event.clientY;}
  8. if(document.all) { document.onmousemove = UpdateCursorPositionDocAll; }
  9. else { document.onmousemove = UpdateCursorPosition; }
  10. function AssignPosition(d) {
  11. if(self.pageYOffset) {
  12. rX = self.pageXOffset;
  13. rY = self.pageYOffset;
  14. }
  15. else if(document.documentElement && document.documentElement.scrollTop) {
  16. rX = document.documentElement.scrollLeft;
  17. rY = document.documentElement.scrollTop;
  18. }
  19. else if(document.body) {
  20. rX = document.body.scrollLeft;
  21. rY = document.body.scrollTop;
  22. }
  23. if(document.all) {
  24. cX += rX;
  25. cY += rY;
  26. }
  27. d.style.left = (cX+10) + "px";
  28. d.style.top = (cY+10) + "px";
  29. }
  30. function HideContent(d) {
  31. if(d.length < 1) { return; }
  32. document.getElementById(d).style.display = "none";
  33. }
  34. function ShowContent(d) {
  35. if(d.length < 1) { return; }
  36. var dd = document.getElementById(d);
  37. AssignPosition(dd);
  38. dd.style.display = "block";
  39. }
  40. function ReverseContentDisplay(d) {
  41. if(d.length < 1) { return; }
  42. var dd = document.getElementById(d);
  43. AssignPosition(dd);
  44. if(dd.style.display == "none") { dd.style.display = "block"; }
  45. else { dd.style.display = "none"; }
  46. }
  47. //-->
  48. </script>
  49.  
  50.  
  51. <a
  52. onmouseover="ShowContent('uniquename3'); return true;"
  53. onmouseout="HideContent('uniquename3'); return true;"
  54. href="javascript:ShowContent('uniquename3')">
  55. [show on mouseover, hide on mouseout]
  56. </a>
  57. <div
  58. id="uniquename3"
  59. style="display:none;
  60. position:absolute;
  61. border-style: solid;
  62. background-color: white;
  63. padding: 5px;">
  64. Content goes here.
  65. </div>

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: Delirium211 on July 2, 2008

This is nice coding! Works out for me whichever div I apply it to. Thanks! You're the man!

Posted By: bykrmom on July 9, 2008

I appreciate you making this available. Good code, very simple, and I can use it in many areas. I would like to know how to change the shape/color of border on the popup, but all in all this is a really nice little snippet.

Thanks, bykrmom

Posted By: bykrmom on July 9, 2008

I appreciate you making this available. Good code, very simple, and I can use it in many areas. I would like to know how to change the shape/color of border on the popup, but all in all this is a really nice little snippet.

Thanks, bykrmom

Posted By: iamjoe on November 7, 2008

How can I make the pop up windows appear over the cursor? Thanks

Posted By: manjushree on June 19, 2009

Amazing code!! Thanks a lot for that. I need a slight modification to this please. If you can just tell me a way in which instead of the mouse it takes up the position of the div or anchor on which we have applied the onmouseover and out.

To describe in brief, I have a for loop in which I am showing info related to every element on hover. But using your code I am getting the first elements value only onhover for all the elements. Probably coz it uses getElementbyId, not sure. Please if you can help me out.

Thanks

Posted By: brennsuppa on July 9, 2009

very nice! i would add a z-index in the CSS to be sure the div is in front!

Posted By: rajat on October 28, 2009

a cool easy code.

Posted By: yanjin on December 18, 2009

very cool and works like a charm. Thanks a lot. I really apprieciate your posting.

Posted By: jberg on October 1, 2011

Anyone know how I could edit this script to allow for the

d.style.left = (cX+10) + "px"; d.style.top = (cY+10) + "px";

to be set dynamically in the onmouseover="ShowContent('uniquename3'); return true;"

So it could be different for each rollover. ? Thanks.

Posted By: abunda on May 18, 2012

MUCHISIMAS GRACIAS !!

Posted By: abunda on May 18, 2012

MUCHISIMAS GRACIAS !!

You need to login to post a comment.