Home arrow DHTML arrow Page 3 - Dynamically Positioned Layers by Mouse Position
DHTML

Dynamically Positioned Layers by Mouse Position


One method of providing additional options to users is to present a menu that displays itself when necessary, such as when users click or just hover over an item. This article explains how to produce such a DHTML menu, which dynamically positions itself where the user’s mouse is.

Author Info:
By: Justin Cook
Rating: 4 stars4 stars4 stars4 stars4 stars / 44
June 14, 2005
TABLE OF CONTENTS:
  1. · Dynamically Positioned Layers by Mouse Position
  2. · The XHTML
  3. · The JavaScript

print this article
SEARCH DEVARTICLES

Dynamically Positioned Layers by Mouse Position - The JavaScript
(Page 3 of 3 )

To accomplish this task, I’ve split the areas of functionality into three separate methods, one for locating the object in the DOM, one for detecting the mouse position and moving the layer, and finally one for displaying or hiding the layer.

It could all be lumped together in one big method, but for the sake of modularity and re-usability, it is just easiest and most maintenance-friendly to split it up. I’ll explain the methods one at a time, line by line. First of all, the function to retrieve the DOM reference to the object:

function getObject( obj ) {

  // step 1
  if ( document.getElementById ) {
    obj = document.getElementById( obj );

  // step 2
  } else if ( document.all ) {
    obj = document.all.item( obj );

  //step 3
  } else {
    obj = null;
  }

  //step 4
  return obj;
  }

Steps explained:

  1. Here we look for the object with the standards friendly reference, with its element ID. Most if not all new browsers will simply locate the object here, and go straight to step 4
  2. document.all is only if we have to, perhaps with Internet Explorer 4.0. Here you could add in any number of successive ‘else if’ statements to locate the object in any probable way imaginable, such as in other frames. For the sake of simplicity, I’ll leave it at one recourse.
  3. The object could not be found in any of the possible methods, so we return a null reference, instead of simply the string value that was passed in. This way we can build null checks into any consuming methods.
  4. The reference is returned, the function exits.

Now, here’s the function to capture the mouse position and move the layer. For Mozilla based browsers, it’s important that ‘e’ is one of the parameters. As we saw in the HTML code, e represents the event that fires the method, in this case ‘onmouseover’. Once again, I’ll outline the steps afterwards.

function moveObject( obj, e ) {

  // step 1
  var tempX = 0;
  var tempY = 0;
  var offset = 5;
  var objHolder = obj;

  // step 2
  obj = getObject( obj );
  if (obj==null) return;

  // step 3
  if (document.all) {
    tempX = event.clientX + document.body.scrollLeft;
    tempY = event.clientY + document.body.scrollTop;
  } else {
    tempX = e.pageX;
    tempY = e.pageY;
  }

  // step 4
  if (tempX < 0){tempX = 0}
  if (tempY < 0){tempY = 0}

  // step 5
  obj.style.top  = (tempY + offset) + 'px';
  obj.style.left = (tempX + offset) + 'px';

  // step 6
  displayObject( objHolder, true );
  }

Steps explained:

  1. Variables are declared to hold mouse coordinates, and set the layer position accordingly. The offset variable is optional, you can set it to ‘0’ if you want the menu to appear precisely where the mouse is. Also, an ‘objHolder’ keeps the original reference to the object name for use later in the function.
  2. An object reference is retrieved. If it can’t be located, a null reference is returned and the function exits to prevent script errors. If this is happening to you, check your spelling of the layer ID both in the ID attribute, and the parameter being passed into the method, make sure they’re precisely the same, including casing.
  3. The mouse coordinates are retrieved. Different methods are used by IE and other browsers. Perhaps with IE 7 this will be rectified, but until then we’re forced to code for both.
  4. This is simple error prevention. We wouldn’t want the menu appearing off the screen, so we make sure that the absolute minimum value the left or top position can have is 0.
  5. Here the retrieved values are added to the default offset, turned into a string, and set as the pixel location of the menu.
  6. The menu is now changed from invisible to visible, showing up in its new, mouse-determined position.

Last but not least, here’s the simple function to toggle a layers visibility:

function displayObject( obj, show ) {

  // step 1
  obj = getObject( obj );
  if (obj==null) return;

  // step 2
  obj.style.display = show ? 'block' : 'none';
  obj.style.visibility = show ? 'visible' : 'hidden';
  }

Steps Explained:

  1. Same as before, an object reference is retrieved. If it can’t be located, a null reference is returned and the function exits to prevent script errors.
  2. The two important modifiers are display and visibility. They are set to either ‘block’ and ‘visible’, or ‘none’ and ‘hidden’ depending on whether the ‘show’ Boolean flag is true or false. You can reuse this code in many places.

Conclusion

This code is extremely useful, and very extensible to whatever application you can conjure up. It can lend enormously to usability and the sleekness of a website, if used appropriately. Feel free to post any questions or interesting uses in the discussion area!


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

blog comments powered by Disqus
DHTML ARTICLES

- Text-Justify, Volume, and Other Style Sheet ...
- Ruby-Position, Size, and Other Style Sheet P...
- Padding, Pages, and More Style Sheet Propert...
- Marks, Orphans, and More Style Sheet Propert...
- Layouts, Margins, and Other Style Sheet Prop...
- Floats, Fonts, and Other Style Sheet Propert...
- Color, Filters, and Other Style Sheet Proper...
- Borders and More with Style Sheets
- Learning Style Sheet Properties
- Style Sheet Property Reference
- Completing a Noisy Image Application
- An Object-Based Approach to Building Noisy I...
- A Basic Method for Building Noisy Images
- Adding More Features to Sliders with the Scr...
- Using Sliders with the Scriptaculous Framewo...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials