Advanced Keyboard Selector

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Advanced Keyboard Selector

Post by JAB Creations »

feyd | Please use

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]


The example code below works with with :hover but not :focus. I'm hoping someone can point out what I'm missing to get the keyboard to emulate the same behavior. Thanks!

[syntax="html"]<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>CSS Keyboard Advanced Selector</title>
<style type="text/css">
#widget1:hover #widget2 {
background-color: #ddd;
display: block;
}
#widget1 a:focus #widget2 {
background-color: #ddd;
display: block;
}
div.prompt {
display: none;
}
</style>
</head>

<body>

<div id="widget1"><a href="#" tabindex="1">Widget One</a>
<div class="prompt" id="widget2"><a href="#" tabindex="2">Widget Two</a>
</div>
</div>

</body>
</html> 

feyd | Please use[/syntax]

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post by superdezign »

In which browser(s)? I think IE6 has a problem with :hover and :focus.
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Post by JAB Creations »

On XP the only browsers supporting :focus are Gecko browsers and so I only care to get this working on Firefox for example. Thank you.
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post by superdezign »

Works fine for me....

Try this doctype, see if it makes a difference.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Post by JAB Creations »

The doctype is fine. I'm trying to get the KEYBOARD to work in addition to the mouse and it's obvious that the mouse works and keyboard does not. It's a selector issue, please help me figure out the correct selector code!
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post by superdezign »

You mean focus works when you click the link, just not when you tab to it?
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Post by JAB Creations »

Clicking is a mouse event, tabbing is a keyboard event. I am trying to get the keyboard (tab) event to display the second element.

To succeed show the second widget without using the mouse and only using the keyboard.
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post by superdezign »

a:focus counts for both the mouse and tabbing. The only problems I can see are specificity, and not defining the other a pseudo properties.

There was a glitch where if you didn't assign a:active, a:hover wouldn't work. Try giving properties to a, a:link, a:visited, a:active, and a:hover.
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post by Kieran Huggins »

You can't tab to a div by default - only input elements and links. So it's the A element that needs the hover / focus pseudo-class.
Post Reply