I was working on Name Picker V2.0.0 tonight and one of the "improvements" is that there will be both cursor key and mouse key support on the new format list (which is basically a vertical array of [div]s rather than a select object.
Most of the default form objects that support scroll bars will have mouse support. But what about [li] or some interesting nested [div]s or a [table] construct? With all this Web 2.0 stuff out there you may need to get to grips with doing something with the mouse wheel to allow the user to move to some element on your page. Here is how to do it ... (The O'Reilly Javascript Definitive Guide came in VERY handy for the event properties!)
Mozilla based browsers have a built in event called DOMMouseScroll YIPPEE! I hear you cry but guess what IE doesn't! Instead IE has onmousewheel on both the window and the document object. Browser compatibility don't you just LOVE it to bits!
Now I am going to get all Greek on you and talk about "Delta". Delta is the 4th letter of the greek alphabet and is used by math and other hard sum geeks as the symbol for some form of change. In this instance the change is the direction a user whizzes the mouse wheel and based on that direction the mouse wheel whizzing perform some wondrous code of your own devising.
OK there are some more gotchas for the JS coder.
IE stores delta in event.wheelDelta and positive values are UP negative are DOWN
Opera stores delta in event.wheelData and positive values are DOWN and negative are UP
Mozilla stores delta in event.detail and positve values are DOWN and negative are UP
Right first thing to do is write your handling code
function myWheelHandler(D)
{
if(D<0)
{
... do some DOWN code ...
} else {
... do some UP code ...
}
}
That's your bit done, now we have to bend the browsers to our will by writing some code to use instead of the default code
function myWheelFunction(event)
{
var D = 0;
// Catch the event for butter fingers IE
// as it doesnt send event as an arg
if(!event)
{
event = window.event
}
// if this is IE or OPERA delta is in wheelDelta
if(event.wheelDelta)
{
D = event.wheelDelta
// If we are in OPERA change the sign
if(window.opera)
{
D = -D
}
} else {
// OK I am going to assume Mozilla if not IE or OPERA
// correct the signage to - is down and + up
D = -event.detail
}
// Perform my fantastic wheel mouse code
myWheelhandle(D)
// Stop the default actions happening
if(event.preventDefault)
{
event.preventDefault();
}
// needless to say IE needs this to cancel default actions
event.returnValue = false;
}
}
Right all that is left is to put some code somewhere in your code to override the default with your code.
// For Mozilla
if(window.addEventListener)
{
window.addEventListener("DOMMouseScroll",myWheelFunction,false)
}
// For IE and Opera
window.onmousewheel = document.onmousewheel = myWheelFunction
So there you go, you can now code loads of lovely things for your mouse wheel operations on your web pages.
