jQuery: tabbing .hover states
Home / Site Building & Testing / jQuery: tabbing .hover states
Does anyone know how to bind the standard ".hover" functions to work with tabbing? This is major flaw in all the jQuery plugins and example code._________________
Johan De Silva / Portfolio | Place of Work @Flipside | Read my movie reviews punk!
Last edited by Johan007 on 18 Mar 2009 11:13 am; edited 2 times in total
Share: 
| Bill Posters wrote: |
| Add focus() to the chain, presumably. |
I think you need to click, with a mouse, in order to fire a focus event. Hovering alone doesn't change the current focus.
_________________
Jim O'Donnell
work: Royal Observatory Greenwich
play: eatyourgreens
Share:
| eatyourgreens wrote: | ||
I think you need to click, with a mouse, in order to fire a focus event. |
Nah. Tabbing onto a focusable element triggers the focus() method in jQuery.
| Quote: |
| Hovering alone doesn't change the current focus. |
Isn't the focus() being instituted in order to replicate behaviours currently triggered by hover(), for the sake of keyboard users, presumably?
Share:
| Bill Posters wrote: | ||||
Nah. Tabbing onto a focusable element triggers the focus() method in jQuery. |
Sorry, I was thinking specifically of mouse users. Tabbing to a focussable element fires a javascript focus event too.
| Bill Posters wrote: | ||
Isn't the focus() being instituted in order to replicate behaviours currently triggered by hover(), for the sake of keyboard users, presumably? |
I'm not sure - the docs say it fires a focus event so I'd assume it handles onfocus, not onhover, since onhover doesn't change the focus.
I found this example, which mentions using .hover() to handle hover events.
_________________
Jim O'Donnell
work: Royal Observatory Greenwich
play: eatyourgreens
Share:
| eatyourgreens wrote: | ||
I'm not sure - the docs say it fires a focus event so I'd assume it handles onfocus, not onhover, since onhover doesn't change the focus. I found this example, which mentions using .hover() to handle hover events. |
The question was kinda rhetorical. I believe that johan is trying to ensure that functionality which works for hover is also available to keyboard users.
Share:
| Bill Posters wrote: |
| The question was kinda rhetorical. I believe that johan is trying to ensure that functionality which works for hover is also available to keyboard users. |
_________________
Johan De Silva / Portfolio | Place of Work @Flipside | Read my movie reviews punk!
Share:
| Johan007 wrote: |
| …a reason to not be the same. |
Because hover denotes passage, whereas focus denotes some level of intention towards the element being focused?
I understand that you might consider that the hover state for a 'pointing device' user pretty much equates to the focus state for a keyboard user - who cannot hover and focus two seperate elements.
However, a pointing device user who has a form field focused, who for whatever reason, temporarily moves the cursor elsewhere and passes over another focusable element will lose focus on the element they were using or preparing to use
By not separating the two states out by default, browsers would simply be making usability issues for a major portion of users.
Or am I wide of the mark and missing your point?
Share:
Doh! I completely forgot about form elements. Still any dynamic (e.g. animated menu) functions would still benefit and this will not effect form elements around the page (only effecting the "id/class" of the menu tag)...
| Code: |
| $(document).ready(
function() { $('#menu div') .bind('mouseover', doItem); $('#menu') .bind('mouseout', undoItem); } ); |
_________________
Johan De Silva / Portfolio | Place of Work @Flipside | Read my movie reviews punk!
Share:
A div element is not a tabbable element, so afaik, there's no way to hook into a div's focus or blur events.
However, for general purpose info, here's how the structure would go…
| Code: |
| $(document).ready(function(){
$('#menu a') .hover( function() { doItem() }, function() { undoItem() } ) .focus( function() { doItem() } ) .blur( function() { undoItem() } ); ); |
In order to make the mootools/kwicks-style nav (as in your example) animate via tabbing (i.e. focus/blur), you'd need to base it on anchor elements, they being tabbable elements.
(I personally wouldn't bother implementing any more code simply to make typically non-tabbable elements focusable - presuming it's even possible in the first place.)
Any solution which can't be adapted to work with semantic markup - i.e. list-based anchor menu - should ideally be avoided.
Consider it nothing more than a progressive enhancement and don't compromise code quality by trying to get a nice-to-have, but non-essential animated effect to work for keyboard users.
Check out Kwicks for jQuery
Share:
I think you're okay with focus behaviour here, but if you need an element to perform an action, I think you may be out of luck. Technically, you should be able to set tabindex="0" on any element and give it an onclick event handler, but I'm fairly certain that this is still unreliable. redux may be able to clarify this.
For now, if you need onclick events, use an anchor or other such "actionable" element.
_________________
Jon Gibbins :// blogs at dotjay.co.uk, works with Analog.
Share:
Page 1 of 1
All times are GMT
You cannot post new topics in this forumYou cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum