Wednesday, November 29th, 2006

Prototype Event Extension: Event.wheel(e)

Category: Library, Prototype

<>p>Frank Monnerjahn took the work from here and created a Prototype Event extension which makes it trivial to use the mouse wheel in Prototype with Event.observe(..).

The demo shows this in action.

The Code

javascript
< view plain text >
  1. /*
  2.  * Orginal: http://adomas.org/javascript-mouse-wheel/
  3.  * prototype extension by "Frank Monnerjahn" themonnie @gmail.com
  4.  */
  5. Object.extend(Event, {
  6.     wheel:function (event){
  7.         var delta = 0;
  8.         if (!event) event = window.event;
  9.         if (event.wheelDelta) {
  10.             delta = event.wheelDelta/120;
  11.             if (window.opera) delta = -delta;
  12.         } else if (event.detail) { delta = -event.detail/3; }
  13.         return Math.round(delta); //Safari Round
  14.     }
  15. });
  16. /*
  17.  * end of extension
  18.  */
  19.  
  20. var counterSite=0;
  21. function handleSite(e) {
  22.     counterSite +=  Event.wheel(e);
  23.     $('delta').innerHTML = counterSite +'#'+ Event.wheel(e) + ": " + (Event.wheel(e) &lt; 0 ? 'down' : 'up' );
  24. }
  25.  
  26. var counterDIV=0;
  27. function handleDIV(e) {
  28.     counterDIV +=   Event.wheel(e);
  29.     $('divdelta').innerHTML = counterDIV +'#'+ Event.wheel(e) + ": " + (Event.wheel(e) &lt; 0 ? 'down' : 'up' );
  30. }

Usage

javascript
< view plain text >
  1. Event.observe(document, "mousewheel", handleSite, false);
  2. Event.observe(document, "DOMMouseScroll", handleSite, false); // Firefox
  3.  
  4. Event.observe($('divdelta'), "mousewheel", handleDIV, false);
  5. Event.observe($('divdelta'), "DOMMouseScroll", handleDIV, false); // Firefox

Of course, taking control of this event could confuse the user, so only do so if it enhances the experience.

UPDATE: jQuery support has been added too

Related Content:

Posted by Dion Almaer at 12:50 am
13 Comments

++++-
4.2 rating from 39 votes

13 Comments »

Comments feed TrackBack URI

web 2.5 hehehehehe

Comment by Ignacio — November 29, 2006

Bloat 4.0 Service Pack 3

Comment by Roger Svensson — November 29, 2006

Nice one Franky, nice one to get yourself – but as I told you yesterday this one wolud be really awesome if the eventhandler would be wrapped to reduce the code to one line. Will come in the 2.0 i guess ;)

Comment by .mario — November 29, 2006

Nice one Franky, nice one to get yourself here – but as I told you yesterday this one wolud be really awesome if the eventhandler would be wrapped to reduce the code to one line. Will come in the 2.0 i guess ;)

Comment by .mario — November 29, 2006

Frank an me also digged the jQuery plugin for the mousewheel event out of the Google Cache and linked it under the example DIVs for the folks who like jQuery more than Prototype (like me *g*)

Credits for that go to brandonaaron.net but at the moment his site is down.

So go folks and bulid your own Google Reader!

Comment by .mario — November 29, 2006

Yes! Ad space for my blog. Finally. If you’re going to spam at least try to make it look legitimate. I agree that in some cases the mouse wheel event is useful to capture in a web application. I have found it especially handy when simulating zooming, but it definitely has to be used sparingly.

Comment by Dan — November 29, 2006

[...] No creo que lleguemos a tanto, pero casi. Via Ajaxian descubro una forma de expandir el objeto Event del framework Prototype añadiendolé funcionalidad a la rueda del ratón. De esta forma podemos observar tambien este tipo de evento y usarlo en nuestras aplicaciones junto con el resto de funcionalidades de Prototype. [...]

Pingback by Prototype hasta en la sopa - aNieto2K — November 29, 2006

The obvious implementation of mousewheel is for scrolling content… If your design implements a specially designed scrollbar, rather than whatever is default on your OS, it can only be accessed by the scrollwheel through an event handler like this. I for one am greatly relieved someone has finally realized the scrollwheel motion is just as valid as an input mechanism as a mousedown or mouseclick, etc. Since you can’t be sure any given user who visits actually has a scrollwheel, it’s pretty obvious you’d have to use this event only as an enhancement to navigation (or, as someone else suggested, for “gauge”-style functions) for those who do.

Anyone with a scrollwheel (and a Mac) who’s used a Dashboard Widget realizes that Apple had already figured this out. Since widgets by default use specially-designed scrollbars made of CSS/JavaScript, Apple had to provide an onscrollwheel function… and they did. I’m delighted someone has finally brought this event handler into the “real” world. :-)

Comment by Leland Scott — November 29, 2006

[...] Take a look at the demo page. Innovate usage of the mousewheel inside divs.read more | digg story Share and Enjoy:These icons link to social bookmarking sites where readers can share and discover new web pages. [...]

Pingback by Prototype Event Extension: Event.wheel(e) at There was Code; Then there was AJAX! — November 29, 2006

[...] If you are looking for a service where you can upload/download files without any other features try DropBoks. It is a single page application which makes use of Ajaxian Prototype. You can store upto 1GB of data. The UI is clean, No bells, no whistles, easy signup with very simple navigation and is ad free.  But individual files cant be larger than 50MB, and only one file can be downloaded at a time. [...]

Pingback by DropBoks « My Den — November 30, 2006

[...] Event.wheel(e), by Frank Monnerjahn [...]

Pingback by Built from source. » Blog Archive » Prototype extensions — November 30, 2006

[...] Original post by (author unknown) and software by Elliott Back [...]

Pingback by Zeitgeist Blog » Blog Archive » Ajaxian » Prototype Event Extension: Event.wheel(e)Populicious. New popular sites (48h). — December 2, 2006

[...] J’en avais parlé dans un précédent billet, voici une extension de la librairie Prototype permettant de gérer les évènements de la molette de la souris. Voici une démo. in categories: JavaScript / Rétrolien / Laisser un commentaire [...]

Pingback by j’Alias » Prototype Mouse Wheel — December 3, 2006

Leave a comment

You must be logged in to post a comment.