<Javascript get mouse coordinates/ position in Viewport/ Window ⁄ >

5438

2010-12-23

mySnippets javascript

Download

Bookmark This

I already made a snippet about this specific subject, although this will work as an update.

Besides being an update I also add some functionalities, this is, we'll be able to get viewport and window mouse positions, as different coordinates.

style.css

#console_coordinates_viewport, #console_coordinates_window, #console_coordinates{
  font: normal small-caps bold 0.8em/1em Tahoma, Verdana, Arial;
  position: fixed;
  left: 10px; padding: 8px;
  background-color: #36393D; color:  #FFFF88; 
}
 
#console_coordinates_viewport{ top: 30px; }
 
#console_coordinates_window{ top: 60px; }
 
#console_coordinates{ top: 90px; }

Events.js, this file's responsible for events management, that is, our page has elements and those elements will react to events/ triggers, with this class we'll be able to add or remove events, such as onchange, onload, etc, etc.

/**
  * Manage Events
  *
  * @see http://ejohn.org/projects/flexible-javascript-events/
*/
var Events = function(){
  var
    _add = function(obj, type, fn) {
      if ( obj.attachEvent ) {
        obj['e'+type+fn] = fn;
        obj[type+fn] = function(){obj['e'+type+fn]( window.event );}
        obj.attachEvent( 'on'+type, obj[type+fn] );
      }
      else{ obj.addEventListener( type, fn, false ); }
    },
    _remove = function(obj, type, fn){
      if ( obj.detachEvent ) {
        obj.detachEvent( 'on'+type, obj[type+fn] );
        obj[type+fn] = null;
      }
      else{ obj.removeEventListener( type, fn, false ); }
    };
  return {Add: _add, Remove: _remove}
}();

MouseCoordinates.js, our main class.

/**
* MouseCoordinates Class
*
* @author: pedrocorreia.net
*/
 
/**
* Get Mouse Coordinates in Viewport and Browser Window
* @param Event
*
* @return Function ViewPortX X-Coordinate
* @return Function ViewPortY Y-Coordinate
* @return Function ViewPort [X-Coordinate, Y-Coordinate]
* @return Function WindowX X-Coordinate
* @return Function WindowY Y-Coordinate
* @return Function Window [X-Coordinate, Y-Coordinate]
* @return Function ToString
*/
var MouseCoordinates = function(e){
  e = e || window.event;
 
  var
    //cache document variables
    _d = document, _dBody = _d.body, _dDocEl = _d.documentElement, _o = null,
 
    //calculate scroll values
    _scroll_left = _dDocEl.scrollLeft ? _dDocEl.scrollLeft : 0 + _dBody.scrollLeft ? _dBody.scrollLeft : 0,
    _scroll_top = _dDocEl.scrollTop ? _dDocEl.scrollTop : 0 + _dBody.scrollTop ? _dBody.scrollTop : 0,
 
    /**
    * Get mouse position in browser window
    *
    * @property Int X Window Mouse Pointer Position
    * @property Int Y Window Mouse Pointer Position
    */
    window_pos = {
      _x: (e.pageX || e.clientX) + _scroll_left, _y: (e.pageY || e.clientY) + _scroll_top
    },
 
    /**
    * Get mouse position in viewport
    *
    * @property Int X Window Mouse Pointer Position
    * @property Int Y Window Mouse Pointer Position
    */
    viewport_pos = {
      _x: (e.pageX || e.clientX), _y: (e.pageY || e.clientY)
    },
 
    /**
    * Output coordinates
    *
    * @param Object
    * @param String [viewport, window]
    */
    _console = function(o, type) {
      o = (typeof o === "object") ? o : _d.getElementById(o);
      o.innerHTML = type + " = [ " +
          " X: " + ((type === "viewport") ? viewport_pos._x : window_pos._x) +
          " Y: " + ((type === "viewport") ? viewport_pos._y : window_pos._y) +
          " ] Foo: " + Math.random()
    };
 
  return {
    ViewPortX: viewport_pos._x,
    ViewPortY: viewport_pos._y,
 
    WindowX: window_pos._x,
    WindowY: window_pos._y,
 
    ViewPort: [viewport_pos._x, viewport_pos._y],
    Window: [window_pos._x, window_pos._y],
 
    ToString: _console
  };
};

Init.js, create event handlers and output the info given by MouseCoordinates

/**
* @author pedrocorreia.net
*/
Events.Add(window, "load", function(){
  var
    _d = document,
    _console_viewport = _d.getElementById("console_coordinates_viewport"),
    _console_window = _d.getElementById("console_coordinates_window");
    _console = _d.getElementById("console_coordinates");
 
  Events.Add(_d, "mousemove", function(e){
    var _coordinates = MouseCoordinates(e);
 
    _coordinates.ToString(_console_viewport, "viewport");
    _coordinates.ToString(_console_window, "window");
 
    _console.innerHTML = "ViewPort: (" + _coordinates.ViewPort[0] + ", " + _coordinates.ViewPort[1] + ") | " +
                                         "Window: (" + _coordinates.Window[0] + ", " + _coordinates.Window[1] + ") | " +
                                         "Foo: " + Math.random() + ")";
  });
});

index.htm, a simple html example file

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
  <title>Mouse Coordinates</title>
  <link rel="Stylesheet" href="style.css" />
  <script type="text/javascript" src="Events.js"></script>
  <script type="text/javascript" src="MouseCoordinates.js"></script>
  <script type="text/javascript" src="Init.js"></script>
</head>
 
<body>
  <div id="lipsum">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eget purus 
      odio, non consectetur risus. Duis et lobortis nunc. Donec bibendum mauris sit 
      amet lectus vulputate non aliquet quam auctor. Lorem ipsum dolor sit amet, 
      consectetur adipiscing elit. Aliquam vel placerat elit. Nulla facilisi. Ut 
      elementum nibh porta justo molestie dignissim. In hac habitasse platea dictumst. 
      Nulla venenatis quam sapien. Aenean lorem ligula, bibendum cursus dictum et, 
      aliquam ut odio. Vivamus lacinia, dui in sodales scelerisque, augue nibh 
      suscipit nunc, vitae dapibus mauris nibh eu tellus. Aliquam erat volutpat. 
      Mauris quis justo tortor. Donec sit amet arcu congue nibh facilisis 
      sollicitudin. Duis semper erat vel libero ultricies blandit. Pellentesque ipsum 
      tortor, faucibus eget adipiscing nec, pulvinar et urna. Proin interdum eros et 
      arcu congue sit amet dictum purus dignissim. Curabitur eget sapien lectus, sit 
      amet varius sem.
    </p>
    (....)
  </div>
 
  <span id="console_coordinates_viewport"></span>
  <span id="console_coordinates_window"></span>  
  <span id="console_coordinates"></span>  
 
 
</body>
</html>

Here's a demo of this script:

If you have any doubt or found any error, please drop me an email.

5438

2010-12-23

mySnippets javascript

Download

Bookmark This