Wednesday, November 29th, 2006
Prototype Event Extension: Event.wheel(e)
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:
-
-
/*
-
* Orginal: http://adomas.org/javascript-mouse-wheel/
-
* prototype extension by "Frank Monnerjahn" themonnie @gmail.com
-
*/
-
Object.extend(Event, {
-
wheel:function (event){
-
var delta = 0;
-
if (!event) event = window.event;
-
if (event.wheelDelta) {
-
delta = event.wheelDelta/120;
-
if (window.opera) delta = -delta;
-
} else if (event.detail) { delta = -event.detail/3; }
-
return Math.round(delta); //Safari Round
-
}
-
});
-
/*
-
* end of extension
-
*/
-
-
var counterSite=0;
-
function handleSite(e) {
-
counterSite += Event.wheel(e);
-
$('delta').innerHTML = counterSite +'#'+ Event.wheel(e) + ": " + (Event.wheel(e) <0 ? 'down' : 'up' );
-
}
-
-
var counterDIV=0;
-
function handleDIV(e) {
-
counterDIV += Event.wheel(e);
-
$('divdelta').innerHTML = counterDIV +'#'+ Event.wheel(e) + ": " + (Event.wheel(e) <0 ? 'down' : 'up' );
-
}
-
Usage
JAVASCRIPT:
-
-
Event.observe(document, "mousewheel", handleSite, false);
-
Event.observe(document, "DOMMouseScroll", handleSite, false); // Firefox
-
-
Event.observe($('divdelta'), "mousewheel", handleDIV, false);
-
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
4.4 rating from 32 votes
web 2.5 hehehehehe
Bloat 4.0 Service Pack 3
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 ;)
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 ;)
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!
I fixed the two event lines by adding the following lines to
Event.observeandEvent.stopObserving.In Event.observe add:
if (name == 'mousewheel' && (element.addEventListener)) name = 'DOMMouseScroll';And in Event.stopObserving add:
if (name == 'mousewheel' && (element.removeEventListener)) name = 'DOMMouseScroll';See my article on Event.wheel(e) here
this is my old onwheel function (18 September 2006), maybe interesting for developers that don’t use Prototype or jQuery.
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.
[…] 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. […]
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. :-)
[…] 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. […]
[…] 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. […]
[…] Event.wheel(e), by Frank Monnerjahn […]
[…] Original post by (author unknown) and software by Elliott Back […]
[…] 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 […]