Firefox mouse wheel event

[d7soft]

Hi, if you take a look at Microsoft's http://www.virtualearth.com you'll notice that the Javascript code they wrote there can detect when and to which direction was the mouse wheel moved by the user... in Firefox.

I thought this feature was only doable in Internet Explorer 6, but looks like Microsoft found a way of doing this on Firefox.

From what I have researched, this is the code for detecting the mouse wheel event on Firefox and Mozilla:

window.addEventListener('DOMMouseScroll', function_name, false);


However, how do you know if the mouse wheel was moved up or down? I'm trying to do this in a scrollbar-less IFRAME, so detecting to which direction was the page scrolled is not an applicable solution.

Any insights?

Thanks,

Abraham

[mwinter]

window.addEventListener('DOMMouseScroll', function_name, false);

However, how do you know if the mouse wheel was moved up or down?

The detail property of the event argument indicates the direction and magnitude of the scroll (though I always get values of ±3). A positive value indicates the user scrolled down (rotated towards), which is opposite to Microsoft's wheelDelta property (which yields a value of ±120, here).

I'm trying to do this in a scrollbar-less IFRAME [...]

If you are trying to scroll the frame, leave the scrollbars alone. This solution will not work on all browsers (and none, obviously, when scripting is disabled) so you'll be sacrificing support for (presumably) some gimmicky effect.

Mike

[d7soft]

Hi Mike, thanks for your help, much appreciated

Say, how do you get that ±3 value when the DOMMouseScroll event gets triggered?

By using event.details, or how? I searched "event.detail" on google but got no results.


Also, in regard to the iframe, I'm actually building an API similar to the Google Maps one, so I'm looking for a way to allow the user to zoom the map out or in on both IE and FF by using the mouse wheel.

Thanks,

Abraham

[Eldrad]

".detail" work for getting the direction :

<SCRIPT LANGUAGE="JavaScript">
<!--
window.addEventListener('DOMMouseScroll', scroll, false);
function scroll(e){
alert(e.detail);
}
// -->
</SCRIPT>

CU

[shachi]

Hey guyz you should take a look at : http://en.wikipedia.org/wiki/DOM_Events#XUL_events

[shachi]

This function may give some clues though:

// Copyright (c) Microsoft Corporation.  All rights reserved.
........
........
........
function r(s, t, u) {
        var strMozillaType = t.slice(2);
        if (strMozillaType == "mousewheel")strMozillaType = "DOMMouseScroll";
        if (strMozillaType != "mouseenter" && strMozillaType != "mouseleave")s.addEventListener(strMozillaType, q, true);
        else {
            s.addEventListener("mouseover", q, true);
            s.addEventListener("mouseout", q, true);
            s.addEventListener("mouseover", z, false);
            s.addEventListener("mouseout", A, false);
        }
        s.addEventListener(strMozillaType, u, false);
    }
.......
.......
.......

[digitalg]

Hello,

I've been playing around with this for sometime now and I've not yet been able to make it work to my needs using FF.
What I found out is that FF already has some kind of mousewheel scroll mechanism that then conflicts with other algorithms I have in place.

The situation is one that I would like to use the mousewheel to scroll through a div layer. The usual scheme, two divs, one inside the other, the outer one sets the visibility area and the inner one has the content to be scrolled.

If I click nothing inside that content div the mouse wheel scroll works ok both in IE and FF. After I click any link inside the content div in FF the amount of scroll is doubled, I mean, the scroll code I made works and another scroll I don't know of also works independently. If I disable my code FF still scrolls the content div after that click!
The main problem is that I have other mechanisms for scrolling by clicking arrows and dragging the scrollbar and the code just looses track of positions changed by this FF weird scroll capability!

Using IE everything works out smooth and only my own code moves things around.

Any of you have found anything like this? Can this FF scroll be disabled? Or maybe track some event that signals when is has been used?

Thank you ...

[shachi]

digitalg: We'd be more interested on testing if you could post your code.

[digitalg]

Ok, I'll show in place what I mean, but let me explains things a little better.

The scrolling mechanism is made by two DIV tags on inside the other as I told previously. The outer one, that I call visibilityLayer, sets the visibility area. The inner one has the content to be scrolled and I call it contentLayer.

I've been banging my head over this and understood a little more of what is happening:
1 - FF's own scroll comes into place only when some kind of object, like an anchor, inside the div tag has focus.
2 - the amount of FF's own scroll is only the length of the div content that overflows the window or frame, not the length of what overflows the visibility layer
3 - When that kind of object inside the div has focus FF's own scroll happens ONLY inside the div tag and not in the entire window! Further more, this scroll does not change the top property of the div tag being scrolled!

This item 3 is the one that puzzles me and completly escapes my understanding. And if the .top property is not set even trapping the DOMMousescroll event I could not know the amount of scroll that took place and could not get it to play along with my own scroll code!

I've now in place a workaround, for every anchor the link calls a js function that handles the request and then sets the focus to some other object out of the div tag. I'm now using another anchor, but if you people can suggest me some other thing that can receive the focus it would be nice

And for the example:

The site is http://bugs.digitalg.net
Make sure you're in the english version and click 'What's new'. It will open a popup.

The first letter ('s') of the first link ('spider') calls a function goWrong() that leaves the focus on the link. Click it and use the mousewheel to scroll down. It will scroll way down over the limit of the text (and it should not).

Scroll back up using the mousewheel (or close and open the popup again).
Click anyother link and scroll down using the mousewheel. The scroll will stop in the right place.

You can use the view source to see the HTML code and the .js is in /inc/nav_text.js
There's a lot more code here, but the directly relevant, and the only thing I added to make use of the mousewheel is this initiation:

if(document.attachEvent)
document.attachEvent("onmousewheel",scrollWheelMove);
else
window.addEventListener("DOMMouseScroll", scrollWheelMove, false);


and this function:

function scrollWheelMove (e) {
if (window.event || window.Event) {
if (!e) e = window.event;
if (e.wheelDelta <= 0 || e.detail > 0 ) dnFast()
else upFast()
setTimeout("stop()",100)
}
}

that uses some previous working functions

The 'problem' can also be seen by dragselecting the all text inside the content div

I'd prefer tu use clean code and not this kind of tricks, so I'll keep looking into this.
I'm using FF 1.0.6

thank you again

[shachi]

Hey, is it your browser that's going mad or my browser that's getting some problems with it?? It works just fine with firefox 1.0.7(windows as I don't have a scrollwheel in my mouse in linux computer). I works fine with me but dunno what the problem.