<pedrocorreia.net ⁄>
corner
<mySearch ⁄> <mySearch ⁄>

corner
 
corner
<mySnippets order="rand" ⁄> <mySnippets order="rand" ⁄>

corner
 
corner
<myContacts ⁄> <myContacts ⁄>

<email ⁄>


pc@pedrocorreia.net

<windows live messenger ⁄>


pedrojacorreia@hotmail.com

<myCurriculum type="pdf" ⁄>


Download
corner
 
corner
<myBlog show="last" ⁄> <myBlog show="last" ⁄>

corner
 
corner
<myNews show="rand" ⁄> <myNews show="rand" ⁄>

corner
 
corner
<myNews type="cat" ⁄> <myNews type="cat" ⁄>

corner
 
corner
<myQuote order="random" ⁄> <myQuote order="random" ⁄>

No one ever died for my sins in hell, as far as I can tell, at least the ones I got away with
corner
 
corner
<myPhoto order="random" ⁄> <myPhoto order="random" ⁄>

<pedrocorreia.net ⁄>
corner
 
corner
<myAdSense ⁄> <myAdSense ⁄>

corner
 
corner
<myVisitorsMap ⁄> <myVisitorsMap ⁄>

corner
 
 

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




clicks: 9679 9679 2010-12-23 2010-12-23 goto mySnippets mySnippets javascript  Download  Bookmark This 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

  1. #console_coordinates_viewport, #console_coordinates_window, #console_coordinates{
  2. font: normal small-caps bold 0.8em/1em Tahoma, Verdana, Arial;
  3. position: fixed;
  4. left: 10px; padding: 8px;
  5. background-color: #36393D; color: #FFFF88;
  6. }
  7.  
  8. #console_coordinates_viewport{ top: 30px; }
  9.  
  10. #console_coordinates_window{ top: 60px; }
  11.  
  12. #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.

  1. /**
  2. * Manage Events
  3. *
  4. * @see http://ejohn.org/projects/flexible-javascript-events/
  5. */
  6. var Events = function(){
  7. var
  8. _add = function(obj, type, fn) {
  9. if ( obj.attachEvent ) {
  10. obj['e'+type+fn] = fn;
  11. obj[type+fn] = function(){obj['e'+type+fn]( window.event );}
  12. obj.attachEvent( 'on'+type, obj[type+fn] );
  13. }
  14. else{ obj.addEventListener( type, fn, false ); }
  15. },
  16. _remove = function(obj, type, fn){
  17. if ( obj.detachEvent ) {
  18. obj.detachEvent( 'on'+type, obj[type+fn] );
  19. obj[type+fn] = null;
  20. }
  21. else{ obj.removeEventListener( type, fn, false ); }
  22. };
  23. return {Add: _add, Remove: _remove}
  24. }();










MouseCoordinates.js, our main class.

  1. /**
  2. * MouseCoordinates Class
  3. *
  4. * @author: pedrocorreia.net
  5. */
  6.  
  7. /**
  8. * Get Mouse Coordinates in Viewport and Browser Window
  9. * @param Event
  10. *
  11. * @return Function ViewPortX X-Coordinate
  12. * @return Function ViewPortY Y-Coordinate
  13. * @return Function ViewPort [X-Coordinate, Y-Coordinate]
  14. * @return Function WindowX X-Coordinate
  15. * @return Function WindowY Y-Coordinate
  16. * @return Function Window [X-Coordinate, Y-Coordinate]
  17. * @return Function ToString
  18. */
  19. var MouseCoordinates = function(e){
  20. e = e || window.event;
  21.  
  22. var
  23. //cache document variables
  24. _d = document, _dBody = _d.body, _dDocEl = _d.documentElement, _o = null,
  25.  
  26. //calculate scroll values
  27. _scroll_left = _dDocEl.scrollLeft ? _dDocEl.scrollLeft : 0 + _dBody.scrollLeft ? _dBody.scrollLeft : 0,
  28. _scroll_top = _dDocEl.scrollTop ? _dDocEl.scrollTop : 0 + _dBody.scrollTop ? _dBody.scrollTop : 0,
  29.  
  30. /**
  31. * Get mouse position in browser window
  32. *
  33. * @property Int X Window Mouse Pointer Position
  34. * @property Int Y Window Mouse Pointer Position
  35. */
  36. window_pos = {
  37. _x: (e.pageX || e.clientX) + _scroll_left, _y: (e.pageY || e.clientY) + _scroll_top
  38. },
  39.  
  40. /**
  41. * Get mouse position in viewport
  42. *
  43. * @property Int X Window Mouse Pointer Position
  44. * @property Int Y Window Mouse Pointer Position
  45. */
  46. viewport_pos = {
  47. _x: (e.pageX || e.clientX), _y: (e.pageY || e.clientY)
  48. },
  49.  
  50. /**
  51. * Output coordinates
  52. *
  53. * @param Object
  54. * @param String [viewport, window]
  55. */
  56. _console = function(o, type) {
  57. o = (typeof o === "object") ? o : _d.getElementById(o);
  58. o.innerHTML = type + " = [ " +
  59. " X: " + ((type === "viewport") ? viewport_pos._x : window_pos._x) +
  60. " Y: " + ((type === "viewport") ? viewport_pos._y : window_pos._y) +
  61. " ] Foo: " + Math.random()
  62. };
  63.  
  64. return {
  65. ViewPortX: viewport_pos._x,
  66. ViewPortY: viewport_pos._y,
  67.  
  68. WindowX: window_pos._x,
  69. WindowY: window_pos._y,
  70.  
  71. ViewPort: [viewport_pos._x, viewport_pos._y],
  72. Window: [window_pos._x, window_pos._y],
  73.  
  74. ToString: _console
  75. };
  76. };




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

  1. /**
  2. * @author pedrocorreia.net
  3. */
  4. Events.Add(window, "load", function(){
  5. var
  6. _d = document,
  7. _console_viewport = _d.getElementById("console_coordinates_viewport"),
  8. _console_window = _d.getElementById("console_coordinates_window");
  9. _console = _d.getElementById("console_coordinates");
  10.  
  11. Events.Add(_d, "mousemove", function(e){
  12. var _coordinates = MouseCoordinates(e);
  13.  
  14. _coordinates.ToString(_console_viewport, "viewport");
  15. _coordinates.ToString(_console_window, "window");
  16.  
  17. _console.innerHTML = "ViewPort: (" + _coordinates.ViewPort[0] + ", " + _coordinates.ViewPort[1] + ") | " +
  18. "Window: (" + _coordinates.Window[0] + ", " + _coordinates.Window[1] + ") | " +
  19. "Foo: " + Math.random() + ")";
  20. });
  21. });




index.htm, a simple html example file

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.  
  4. <head>
  5. <title>Mouse Coordinates</title>
  6. <link rel="Stylesheet" href="style.css" />
  7. <script type="text/javascript" src="Events.js"></script>
  8. <script type="text/javascript" src="MouseCoordinates.js"></script>
  9. <script type="text/javascript" src="Init.js"></script>
  10. </head>
  11.  
  12. <body>
  13. <div id="lipsum">
  14. <p>
  15. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eget purus
  16. odio, non consectetur risus. Duis et lobortis nunc. Donec bibendum mauris sit
  17. amet lectus vulputate non aliquet quam auctor. Lorem ipsum dolor sit amet,
  18. consectetur adipiscing elit. Aliquam vel placerat elit. Nulla facilisi. Ut
  19. elementum nibh porta justo molestie dignissim. In hac habitasse platea dictumst.
  20. Nulla venenatis quam sapien. Aenean lorem ligula, bibendum cursus dictum et,
  21. aliquam ut odio. Vivamus lacinia, dui in sodales scelerisque, augue nibh
  22. suscipit nunc, vitae dapibus mauris nibh eu tellus. Aliquam erat volutpat.
  23. Mauris quis justo tortor. Donec sit amet arcu congue nibh facilisis
  24. sollicitudin. Duis semper erat vel libero ultricies blandit. Pellentesque ipsum
  25. tortor, faucibus eget adipiscing nec, pulvinar et urna. Proin interdum eros et
  26. arcu congue sit amet dictum purus dignissim. Curabitur eget sapien lectus, sit
  27. amet varius sem.
  28. </p>
  29. (....)
  30. </div>
  31.  
  32. <span id="console_coordinates_viewport"></span>
  33. <span id="console_coordinates_window"></span>
  34. <span id="console_coordinates"></span>
  35.  
  36.  
  37. </body>
  38. </html>






Here's a demo of this script:











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









clicks: 9679 9679 2010-12-23 2010-12-23 goto mySnippets mySnippets javascript  Download  Bookmark This Bookmark This