Hi.

Having just found an issue on a site saying that we can use the
mousewheel on the <select> tag to move up/down the options and found
it not working, I created a test page.

http://pastie.org/1200711

Enjoy!

Regards,

Richard.

function MouseWheelHandler(ev)
        {
        // Determine the direction of the wheel.
        // For the sake of brevity, left/right wheels work like up/down.
        var i_Delta = Math.max(-1, Math.min(1, !!ev.detail ? ev.detail * -1 :
ev.wheelDelta));

        // Only process actual changes.
        if (0 != i_Delta)
                {
                // Shortcut to the select tag.
                var el_Select = ev.findElement('select');

                // Only process actual changes on select tags.
                if (!!el_Select)
                        {
                        // Number of options (used to wrap or limit the 
scrolling).
                        var i_Options = el_Select.options.length;

                        // You can use the line below to cause the select to 
wrap around.
                        var i_NewIndex = (el_Select.selectedIndex +
el_Select.options.length + i_Delta) % i_Options;

                        // Or you can use the lines below to not wrap around.
                        var i_NewIndex = Math.max(0, Math.min(i_Options - 1,
el_Select.selectedIndex + i_Delta));

                        // Set the new index.
                        el_Select.selectedIndex = i_NewIndex;

                        // Don't bubble the event so the page shouldn't move.
                        ev.stop();
                        }
                }
        }

document
        .observe
                (
                'dom:loaded',  // Wait until the document is ready.
                function()
                        {
                        // Tell all the selects to watch for 
mousewheel/DOMMouseScroll events.
                        $$('select')
                                .invoke('observe', 'mousewheel', 
MouseWheelHandler) //
Google Chrome. Will also override normal behaviour for IE, so wrapping
is now functional on IE.
                                .invoke('observe', 'DOMMouseScroll', 
MouseWheelHandler); // Firefox
                        }
                );

-- 
Richard Quadling
Twitter : EE : Zend
@RQuadling : e-e.com/M_248814.html : bit.ly/9O8vFY

-- 
You received this message because you are subscribed to the Google Groups 
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptacul...@googlegroups.com.
To unsubscribe from this group, send email to 
prototype-scriptaculous+unsubscr...@googlegroups.com.
For more options, visit this group at 
http://groups.google.com/group/prototype-scriptaculous?hl=en.

Reply via email to