I've now fixed the fix so that it also works in Safari. :-) And also modified the API to support horizontal scrolling (currently only available in Safari 3 though).
Tested to work correctly with the following browser/platform/version combinations: o Safari/Mac 3.1 o Firefox/Mac 2.0 o Opera/Mac 9.5 o IE/Mac 6.0 (emulated in CrossOver) I'd be interested to know if this works in MSIE 7 and FF 3 (on Windows). http://mochikit.com/examples/mouse_events/index.html http://mochikit.com/tests/index.html Cheers, /Per On Thu, Jun 12, 2008 at 3:25 PM, Per Cederberg <[EMAIL PROTECTED]> wrote: > An initial version of mouse wheel support has now been committed to > svn trunk in [1386]. It differs from the provided patch in a number of > API-incompatible ways: > > o New property MochiKit.Signal.Event.mouse().wheel contains the > numerical mouse wheel offset. > o The wheel offset number is inverted, i.e. positive for scrolling > down and negative for scrolling up. Seemed more logical to use the > Mozilla numbers to me. > > Docs and tests have been updated. Try it out here: > > http://mochikit.com/examples/mouse_events/index.html > http://mochikit.com/tests/index.html > > I've only been able to test in FF3 under Linux, so any further testing > would be much appreciated. Reply with any bugs found here and I'll try > to take a look at them asap. > > Cheers, > > /Per > > On Thu, Jun 12, 2008 at 1:25 AM, [EMAIL PROTECTED] > <[EMAIL PROTECTED]> wrote: >> >> Ah magic numbers don't you love them :) >> >> The following link points to a blog entry that goes into detail >> about normalising the mouse wheel event so that it can be used >> cross browser without going insane. >> >> http://blog.paranoidferret.com/index.php/2007/10/31/javascript-tutorial-the-scroll-wheel/ >> >> Most of what I did just stems from that but has been made to be >> friendly with MochiKit. >> >> On Jun 3, 5:39 pm, "Per Cederberg" <[EMAIL PROTECTED]> wrote: >>> Thanks! I'll apply this patch shortly to the svn repository. It will >>> be committed in parts, separating the actual mouse wheel stuff from >>> code fixing other issues in signal(), etc. >>> >>> One question though. I see that the Mozilla "event.details" value is >>> considered equivalent to "-event.wheelDelta / 40". But where does this >>> magic number 40 come from? I see from MSDN that wheelDelta is always >>> returned in multiples of 120. Is this just assuming that a wheel event >>> always scrolls 3 lines? >>> >>> Cheers, >>> >>> /Per >>> >>> On Tue, Jun 3, 2008 at 8:55 AM, [EMAIL PROTECTED] >>> >>> <[EMAIL PROTECTED]> wrote: >>> >>> > Below is a patch for adding mousewheel handling to mochikit. It has >>> > been made against SVN 1383. >>> >>> > It contains changes to Signal.js and some demo pages that end up in >>> > examples. >>> >>> > My main need for this is to try and suppress the scrolling of a page >>> > after the contents of a div have been fully scrolled. The example >>> > manages to do this for FF but fails in IE if you scroll quickly >>> > enough. If anybody has any ideas on how to make this work reliably in >>> > IE I'd love to hear about it. >>> >>> > This patch makes no attempt at making all of the signal handling late >>> > bound (as mentioned in by Per in a previous message), it just >>> > refactors Signal.connect a bit to create custom handlers for mouse >>> > wheel events and for the existing mouseenter/leave stuff. >>> >>> > - Sim >>> >>> > diff -r 3354b0497e7a MochiKit/Signal.js >>> > --- a/MochiKit/Signal.js Fri May 30 12:43:36 2008 +1000 >>> > +++ b/MochiKit/Signal.js Tue Jun 03 16:45:16 2008 +1000 >>> > @@ -63,7 +63,7 @@ >>> > str += '}'; >>> > } >>> > } >>> > - if (this.type() == 'mouseover' || this.type() == 'mouseout' >>> > || >>> > + if (this.type() == 'mouseover' || this.type() == 'mouseout' >>> > || >>> > this.type() == 'mouseenter' || this.type() == >>> > 'mouseleave') { >>> > str += ', relatedTarget(): ' + >>> > repr(this.relatedTarget()); >>> > } >>> > @@ -94,6 +94,13 @@ >>> > /** @id MochiKit.Signal.Event.prototype.target */ >>> > target: function () { >>> > return this._event.target || this._event.srcElement; >>> > + }, >>> > + >>> > + wheelData: function() { >>> > + if (! this._wheelData) { >>> > + this._wheelData = this._event.detail ? this._event.detail * >>> > -1 : this._event.wheelDelta / 40; >>> > + } >>> > + return this._wheelData; >>> > }, >>> >>> > _relatedTarget: null, >>> > @@ -516,10 +523,10 @@ >>> > if (sig === 'onload' || sig === 'onunload') { >>> > return function (nativeEvent) { >>> > obj[func].apply(obj, [new E(src, nativeEvent)]); >>> > - >>> > + >>> > var ident = new MochiKit.Signal.Ident({ >>> > source: src, signal: sig, objOrFunc: obj, >>> > funcOrStr: func}); >>> > - >>> > + >>> > MochiKit.Signal._disconnect(ident); >>> > }; >>> > } else { >>> > @@ -531,10 +538,10 @@ >>> > if (sig === 'onload' || sig === 'onunload') { >>> > return function (nativeEvent) { >>> > func.apply(obj, [new E(src, nativeEvent)]); >>> > - >>> > + >>> > var ident = new MochiKit.Signal.Ident({ >>> > source: src, signal: sig, objOrFunc: func}); >>> > - >>> > + >>> > MochiKit.Signal._disconnect(ident); >>> > }; >>> > } else { >>> > @@ -576,6 +583,69 @@ >>> > }; >>> > }, >>> >>> > + _makeMouseEnterListener: function(self,src, sig, func, obj) { >>> > + var listener = self._mouseEnterListener(src, sig.substr(2), >>> > func, obj); >>> > + self._addEventListener(src, >>> > + (sig === "onmouseenter") ? >>> > "onmouseover" : "onmouseout", >>> > + listener ); >>> > + return listener; >>> > + }, >>> > + >>> > + _mouseWheelListener: function (src, sig, func, obj) { >>> > + var E = MochiKit.Signal.Event; >>> > + >>> > + // return a closure that smooths over the differences between >>> > browsers >>> > + return function (nativeEvent) { >>> > + var e = new E(src, nativeEvent); >>> > + e.type = function () { return sig; }; >>> > + >>> > + // let the connected function deal with it >>> > + if (typeof(func) == "string") { >>> > + return obj[func].apply(obj, [e]); >>> > + } else { >>> > + return func.apply(obj, [e]); >>> > + } >>> > + }; >>> > + }, >>> > + >>> > + _makeMouseWheelListener: function (self,src,sig,func,obj) { >>> > + var listener = self._mouseWheelListener(src, sig.substr(2), >>> > func, obj); >>> > + >>> > + // takes care of IE, Opera, etc >>> > + self._addEventListener(src, "onmousewheel", listener ); >>> > + >>> > + // Mozilla has a totally different name >>> > + if (src.addEventListener) { >>> > + src.addEventListener("DOMMouseScroll", listener, false); >>> > + } >>> > + return listener; >>> > + }, >>> > + >>> > + _addEventListener: function(src, sig, listener) { >>> > + if (src.addEventListener) { >>> > + src.addEventListener(sig.substr(2), listener, false); >>> > + } else if (src.attachEvent) { >>> > + src.attachEvent(sig, listener); // useCapture unsupported >>> > + } >>> > + }, >>> > + >>> > + _makeDOMListener: function(self, src, sig, func, obj) { >>> > + // simulated mouse event for those browsers that need it >>> > + if ((sig === "onmouseenter" || sig === "onmouseleave") >>> > + && !self._browserAlreadyHasMouseEnterAndLeave()) { >>> > + return self._makeMouseEnterListener(self,src,sig,func,obj); >>> > + } >>> > + // special mouse wheel handling >>> > + else if (sig === "onmousewheel") { >>> > + return self._makeMouseWheelListener(self,src,sig,func,obj); >>> > + } >>> > + >>> > + // default dom listener >>> > + var listener = self._listener(src, sig, func, obj, true); >>> > + self._addEventListener(src, sig, listener ); >>> > + return listener; >>> > + }, >>> > + >>> > _getDestPair: function (objOrFunc, funcOrStr) { >>> > var obj = null; >>> > var func = null; >>> > @@ -613,32 +683,17 @@ >>> > obj = src; >>> > } >>> >>> > - var isDOM = !!(src.addEventListener || src.attachEvent); >>> > - if (isDOM && (sig === "onmouseenter" || sig === >>> > "onmouseleave") >>> > - && !self._browserAlreadyHasMouseEnterAndLeave()) { >>> > - var listener = self._mouseEnterListener(src, >>> > sig.substr(2), func, obj); >>> > - if (sig === "onmouseenter") { >>> > - sig = "onmouseover"; >>> > - } else { >>> > - sig = "onmouseout"; >>> > - } >>> > - } else { >>> > - var listener = self._listener(src, sig, func, obj, >>> > isDOM); >>> > - } >>> > - >>> > - if (src.addEventListener) { >>> > - src.addEventListener(sig.substr(2), listener, false); >>> > - } else if (src.attachEvent) { >>> > - src.attachEvent(sig, listener); // useCapture unsupported >>> > - } >>> > + var isDOM = !!(sig.substr(0,2) === "on" && >>> > (src.addEventListener || src.attachEvent)); >>> > + var listener = isDOM ? self._makeDOMListener(self, src, sig, >>> > func, obj) : >>> > + self._listener(src, sig, func, obj, false); >>> >>> > var ident = new MochiKit.Signal.Ident({ >>> > - source: src, >>> > - signal: sig, >>> > - listener: listener, >>> > - isDOM: isDOM, >>> > - objOrFunc: objOrFunc, >>> > - funcOrStr: funcOrStr, >>> > + source: src, >>> > + signal: sig, >>> > + listener: listener, >>> > + isDOM: isDOM, >>> > + objOrFunc: objOrFunc, >>> > + funcOrStr: funcOrStr, >>> > connected: true >>> > }); >>> > self._observers.push(ident); >>> > diff -r 3354b0497e7a examples/mousewheel_events/index.html >>> > --- /dev/null Thu Jan 01 00:00:00 1970 +0000 >>> > +++ b/examples/mousewheel_events/index.html Tue Jun 03 16:45:16 2008 >>> > +1000 >>> > @@ -0,0 +1,85 @@ >>> > +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" >>> > + "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd";> >>> > +<html xmlns="http://www.w3.org/1999/xhtml";> >>> > +<head> >>> > + <title>Mouse Wheel Events with MochiKit</title> >>> > + <link href="mousewheel_events.css" rel="stylesheet" type="text/ >>> > css" /> >>> > + <script type="text/javascript" src="../../MochiKit/MochiKit.js"></ >>> > script> >>> > + <script type="text/javascript" src="mousewheel_events.js"></ >>> > script> >>> > +</head> >>> > +<body> >>> > + <h1> >>> > + Mouse Wheel Events with MochiKit >>> > + </h1> >>> > + <p> >>> > + For a detailed description of what happens under the hood, >>> > check out >>> > + <a href="mousewheel_events.js" class="view- >>> > source">mousewheel_events.js</a>. >>> > + </p> >>> > + >>> > + <p> >>> > + View Source: [ >>> > + <a href="index.html" class="view-source">index.html</a> | >>> > + <a href="mousewheel_events.js" class="view- >>> > source">mousewheel_events.js</a> | >>> > + <a href="mousewheel_events.css" class="view- >>> > source">mousewheel_events.css</a> >>> > + ] >>> > + </p> >>> > + >>> > + <div id="show-wheeldata" class="scroll-box">Scroll In Me: <span >>> > id="show-wheeldata-ouput">0</span> (-3 for down, 3 for up)</div> >>> > + >>> > + <div id="scroll-page" class="scroll-box" style="height : 100px; >>> > overflow : scroll;"> >>> > + Scroll Me and then the page scrolls! <br /> >>> > + Scroll Me and then the page scrolls! <br /> >>> > + Scroll Me and then the page scrolls! <br /> >>> > + Scroll Me and then the page scrolls! <br /> >>> > + Scroll Me and then the page scrolls! <br /> >>> > + Scroll Me and then the page scrolls! <br /> >>> > + Scroll Me and then the page scrolls! <br /> >>> > + Scroll Me and then the page scrolls! <br /> >>> > + Scroll Me and then the page scrolls! <br /> >>> > + Scroll Me and then the page scrolls! <br /> >>> > + Scroll Me and then the page scrolls! <br /> >>> > + Scroll Me and then the page scrolls! <br /> >>> > + Scroll Me and then the page scrolls! <br /> >>> > + Scroll Me and then the page scrolls! <br /> >>> > + Scroll Me and then the page scrolls! <br /> >>> > + Scroll Me and then the page scrolls! <br /> >>> > + Scroll Me and then the page scrolls! <br /> >>> > + Scroll Me and >>> >>> ... >>> >>> read more ยป >> >> >> > --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "MochiKit" group. To post to this group, send email to [email protected] To unsubscribe from this group, send email to [EMAIL PROTECTED] For more options, visit this group at http://groups.google.com/group/mochikit?hl=en -~----------~----~----~----~------~----~------~--~---
