Floating Layer At Cursor Position

This post shows how to implement layers that will display content over existing content just below and to the right of the cursor position.

This is one of three related posts. Each has different features. See this comparison table:

This is the "Floating Layer At Cursor Position" article.

Three different methods are provided for displaying content near the user's cursor. (The content is in a <div... tag with certain style attributes.) Each method contains a link (or links) that will reveal or hide certain content.

The examples in the list are copied and pasted right from the code presented in this article.

1. A link to toggle the display of the content — show it, if it's hidden; hide it, if it's showing. Example;

   [show on mouseover, hide on mouse over - toggle]
   Content goes here.

2. A link to show the content. Then in the content itself is a link to hide it. Example;

   [show, content has "hide" link]
   Content goes here. [hide]

3. A link to show the content when the mouse moves over it, and hide the content when the mouse moves off. Example;

   [show on mouseover, hide on mouseout]
   Content goes here.

Some JavaScript needs to be on every page where any of the display methods are used. The JavaScript only needs to be on the page one time, even if you have more than one content div to display on the page.

Here is the JavaScript. Copy 'n paste it into your web page (or into a file imported into your web page). The JavaScript can be put pretty much anywhere on the page, in the BODY or HEAD area..

<script type="text/javascript" language="JavaScript">
<!-- Copyright 2006,2007 Bontrager Connection, LLC
// https://www.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>

Below, you'll find the code for each of the three content display methods.

Toggle Display.

Here is the code to toggle the display of the content — show it, if it's hidden; hide it, if it's showing. Change the content as you please.

<a 
   onmouseover="ReverseContentDisplay('uniquename1'); return true;"
   href="javascript:ReverseContentDisplay('uniquename1')">
[show on mouseover, hide on mouse over - toggle]
</a>
<div 
   id="uniquename1" 
   style="display:none; 
      position:absolute; 
      border-style: solid; 
      background-color: white; 
      padding: 5px;">
Content goes here.
</div>

Show Content. Content Has "Hide" Link.

Here is the code to show the content. Then in the content itself is a link to hide it. Change the content as you please, keeping the "hide" link.

<a 
   onmouseover="ShowContent('uniquename2'); return true;"
   href="javascript:ShowContent('uniquename2')">
[show, content has "hide" link]
</a>
<div 
   id="uniquename2" 
   style="display:none; 
      position:absolute; 
      border-style: solid; 
      background-color: white; 
      padding: 5px;">
Content goes here. 
<a 
   onmouseover="HideContent('uniquename2'); return true;"
   href="javascript:HideContent('uniquename2')">
[hide]
</a>
</div>

Show Content On Mouseover. Hide Content On Mouseout.

Here is the code to show the content when the mouse moves over it, and hide the content when the mouse moves off. Change the content as you please.

<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>

Show Content On Mouseover. Hide Content On Mouseout. Content Follows Mouse.

Here is the code to show the content when the mouse moves over it, and hide the content when the mouse moves off. It also causes the content to follow the mouse as it moves over the link (thank you for the suggestion, Cam). Change the content as you please.

<a 
   onmousemove="ShowContent('uniquename4'); return true;"
   onmouseover="ShowContent('uniquename4'); return true;"
   onmouseout="HideContent('uniquename4'); return true;"
   href="javascript:ShowContent('uniquename4')">
[show on mouseover, hide on mouseout]
</a>
<div 
   id="uniquename4" 
   style="display:none; 
      position:absolute; 
      border-style: solid; 
      background-color: white; 
      padding: 5px;">
Content goes here.
</div>

Notes

Note that each of the above implementation example sets has a different id="______". When more than one set is used on the same page, the id="______" of each set must be unique.

Edits that may be made:

• The content in the <div... tags can be text, images, forms, whatever a "normal" div tag can contain.

• The onmouseover attribute may be removed to require a click to show the content. (This edit is not recommended if IE will be used to view the page, it tends to put the "floating" layer at the bottom of the page instead of near the cursor.)

• The href attribute can be changed to link to another web page on the internet.

• The href attribute can be disabled by giving it a "javascript:HideContent('')" attribute. Example:
  href="javascript:HideContent('')"
  (that's two single-quote characters, apostrophes, between the parenthesis above)

• The content in the div layers may be designed as you please, as may the layer's background and borders and such.

You'll find a lot of room for creativity in the above code.

Will Bontrager