We Recommend

Pro JavaScript Techniques
Pro JavaScript Techniques is the ultimate JavaScript book for the modern web developer. It provides everything you need to know about modern JavaScript, and shows what JavaScript can do for your web sites. This book doesn't waste any time looking at things you already know, like basic syntax and structures.

Posted By

scriptmakingcom on 09/03/07

Tagged

javascript popup hide mouseover mouseout

Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

bartekk
vali29

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

Plain TextExpand

<script type="text/javascript" language="JavaScript">
<!-- Copyright 2006,2007 Bontrager Connection, LLC
// http://bontragerconnection.com/ and http://willmaster.com/
// Version: July 28, 2007
var cX = 0; var cY = 0; var rX = 0; var rY = 0;
function UpdateCursorPosition(e){ cX = e.pageX; cY = e.pageY;}
function UpdateCursorPositionDocAll(e){ cX = event.clientX; cY = event.clientY;}
if(document.all) { document.onmousemove = UpdateCursorPositionDocAll; }
else { document.onmousemove = UpdateCursorPosition; }
function AssignPosition(d) {
if(self.pageYOffset) {
	rX = self.pageXOffset;
	rY = self.pageYOffset;
	}
else if(document.documentElement && document.documentElement.scrollTop) {
	rX = document.documentElement.scrollLeft;
	rY = document.documentElement.scrollTop;
	}
else if(document.body) {
	rX = document.body.scrollLeft;
	rY = document.body.scrollTop;
	}
if(document.all) {
	cX += rX; 
	cY += rY;
	}
d.style.left = (cX+10) + "px";
d.style.top = (cY+10) + "px";
}
function HideContent(d) {
if(d.length < 1) { return; }
document.getElementById(d).style.display = "none";
}
function ShowContent(d) {
if(d.length < 1) { return; }
var dd = document.getElementById(d);
AssignPosition(dd);
dd.style.display = "block";
}
function ReverseContentDisplay(d) {
if(d.length < 1) { return; }
var dd = document.getElementById(d);
AssignPosition(dd);
if(dd.style.display == "none") { dd.style.display = "block"; }
else { dd.style.display = "none"; }
}
//-->
</script>
 
 
<a 
   onmouseover="ShowContent('uniquename3'); return true;"
   onmouseout="HideContent('uniquename3'); return true;"
   href="javascript:ShowContent('uniquename3')">
[show on mouseover, hide on mouseout]
</a>
<div 
   id="uniquename3" 
   style="display:none; 
      position:absolute; 
      border-style: solid; 
      background-color: white; 
      padding: 5px;">
Content goes here.
</div>

Report this snippet

Comments

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.