html - jQuery allow scrolling through various LI elements -

html - jQuery allow scrolling through various LI elements -

i have created ribbon in html / jquery of implementation can found here: http://jsfiddle.net/complexity/qwv84/

in native office applications (word, excel, powerpoint, ...), when you're mouse cursor placed on tabs , scroll next tab showed.

through javascript i've created api allows me show tab contents of given tab:

enabletabcontents: function() { // start deactiving every tab element on page. $("li[role=tab]").each(function(index) { $(this).removeclass("active"); $(".contents", this).removeclass("active"); }); // activate tab requested. $(this).addclass("active"); $(".contents", this).addclass("active"); // homecoming "tab" element. homecoming $(this); },

but, want accomplish activate tabs based on scrolling.

so, bascilly, have 2 questions:

how can determine mouse cursor placed on ribbon? how implement scroll event in jquery when cursor want be?

i know there mouseenter event in jquery, isn't painfull set event handler in event? alternative, set variable , in scroll event chech if variable has appropriate value.

for ones intrested in project, it's open source:

https://github.com/kevin-de-coninck/officewebcontrols

thanks advice.

ok,

after searching, i've found solution question. persons instrested, here's solution:

there's browser event called dommousescroll, works in firefox. luckally, there alternative event back upwards google chrome , net explorer fine, called onmousewheel.

note: direction of scroll wheel reversed in both events, in dommousescroll, need check if detail of originalevent larger 0 identify scrolling down. in onmousewheel, wheeldelta of original event should smaller 0 identify scrolling down.

anywere, scroll between various tabs, next code used:

firefox:

$("#ribbon").bind('dommousescroll', function(e){ if(e.originalevent.detail > 0) { // actives tab next element. var nexttab = $("li[role=tab].active").next(); var attribute = $(nexttab).attr('role'); if (attribute == 'tab') { $(nexttab).enabletabcontents(); } }else { // actives tab previous element. var previoustab = $("li[role=tab].active").prev(); var attribute = $(previoustab).attr('role'); if (attribute == 'tab' && !$(previoustab).hasclass('application')) { $(previoustab).enabletabcontents(); } } //prevent page fom scrolling homecoming false; });

and google chrome , net explorer (should work in safari , opera haven't tested it):

$("#ribbon").bind('mousewheel', function(e){ if(e.originalevent.wheeldelta < 0) { // actives tab next element. var nexttab = $("li[role=tab].active").next(); var attribute = $(nexttab).attr('role'); if (attribute == 'tab') { $(nexttab).enabletabcontents(); } } else { // actives tab previous element. var previoustab = $("li[role=tab].active").prev(); var attribute = $(previoustab).attr('role'); if (attribute == 'tab' && !$(previoustab).hasclass('application')) { $(previoustab).enabletabcontents(); } } //prevent page fom scrolling homecoming false; });

in examples above have additional logic create sure i'm scrolling tab element , that element not application tab.

you see i'm using enabletabcontents() function. own function , part of api , sets necesarry elements visible or invisible, no not post code here.

i hope can help in future :-)

jquery html css