Subscribe to
the Possibilities Ezine

Subscription Terms of Service
Privacy Policy

RSS feed links

Blog Article Categories

Automation

CGI

Content Protection

CSS

Debugging

HTML

JavaScript

Perl

PHP

Recommendations

Related Sites

Statistics

Web Development

Web Site Maintenance

Misc

Floating Layer At Cursor Position

By Will Bontrager

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:

Title/Link	Displays on top of or within existing content		Location where layer will display
	On top	Within	At natural location	Specified in div tag	Bottom-right of cursor
Floating Layer At Cursor Position	Yes	—	—	—	Yes
Show/Hide a Div Content Layer	Yes	—	—	Yes	—
Quick 'N Easy Layer Show/Hide	—	Yes	Yes	—	—

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 // http://bontragerconnection.com/ and http://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.

May 3, 2006

Please note: Articles on this website are presented "as is". However -

If you have a question about a CGI script, HTML, CSS, PHP, or JavaScript
Ask one of our Experts and you'll have your answer!
Click here for details.

© 1998-2001 William and Mari Bontrager
© 2001-2008 Bontrager Connection, LLC