Topic: li:focus - how? Javascript...?
How can I achieve li:focus in all browsers? :focus does not work on li's. Can JS do this? If so, I have been unable to find it. Thanks!
Last edited by Eric (February 15, 2009 8:12 pm)
Re: li:focus - how? Javascript...?
is there an anchor in the li?
My signature goes here --> X
- Eric
- Advanced Member
- Online
Re: li:focus - how? Javascript...?
Hi, no that's the problem. And I can't use an anchor there.
- monkeysaurus
- Member
- Offline
Re: li:focus - how? Javascript...?
JQuery:
$("li.myLi").focus(function () {
$(this).css('color','red');
});For example.
- lwsimon
- Moderator
- Offline
Re: li:focus - how? Javascript...?
monkeysaurus wrote:
JQuery:
$("li.myLi").focus(function () { $(this).css('color','red'); });For example.
It would be better to assign a class instead:
$("li.myLi").focus(function () {
$(this).addClass('focus');
});
$("li.myLi").blur(function () {
$(this).removeClass('focus');
});Then do the styling in the CSS:
:focus, .focus {
color:red;
}
- monkeysaurus
- Member
- Offline
Re: li:focus - how? Javascript...?
Yep, agreed. The css part was just as a little example, but adding classes would probably be better. 
- Eric
- Advanced Member
- Online
Re: li:focus - how? Javascript...?
monkeysaurus wrote:
JQuery:
$("li.myLi").focus(function () { $(this).css('color','red'); });For example.
Thanks (John right?) , but I couldn't seem to get that to work. Here is a little test page. I "think" that may be just for form elements?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="jquery/jquery.js"></script>
<script>
$(document).ready(function(){
$("li.myLi").focus(function () {
$(this).css('color','red');
});
</script>
</head>
<body>
<ul>
<li>hello</li>
</ul>
</body>
</html>
- monkeysaurus
- Member
- Offline
Re: li:focus - how? Javascript...?
Hi Eric, (yeah, it's John )
The li.myLi part refers to a Li with a class of 'myLi'. In your markup above, you would simply do something like:
$(document).ready(function(){
$("li").focus(function () {
$(this).css('color','red');
});
});Of course, this would affect all li elements on the page. I've also added extra closing brackets, they were missing. Firebug generally catches these things, or using a good IDE like Komodo Edit can help too.
- Eric
- Advanced Member
- Online
Re: li:focus - how? Javascript...?
High guys, so here is what I have now, but I still can't get it to work? It's red, but I only want it to be red when you tab through the li menu. I'm confused about something? Thanks!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="jquery/jquery.js"></script>
<script>
$(document).ready(function(){
$("li.myLi").focus(function () {
$(this).addClass('focus');
});
$("li.myLi").blur(function () {
$(this).removeClass('focus');
});
</script>
<style type="text/css">
<!--
:focus, .focus {
color:red;
}
-->
</style>
</head>
<body>
<ul>
<li class="focus">hello</li>
</ul>
</body>
</html>
- monkeysaurus
- Member
- Offline
Re: li:focus - how? Javascript...?
li.myLi will only affect li elements with a class of myLi. You don't have any of those in your document. I think this is what you want. (You're still missing the ending brackets for the document.ready(function(){}) part, which I've added)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="jquery/jquery.js"></script>
<script>
$(document).ready(function(){
$("li").focus(function () {
$(this).addClass('focus');
});
$("li").blur(function () {
$(this).removeClass('focus');
});
})
</script>
<style type="text/css">
<!--
:focus, .focus {
color:red;
}
-->
</style>
</head>
<body>
<ul>
<li>hello</li>
</ul>
</body>
</html>Last edited by monkeysaurus (February 16, 2009 1:22 pm)
- Eric
- Advanced Member
- Online
Re: li:focus - how? Javascript...?
I hate to come back again and ask the simple stupid question again, but, nothing is working? I just need those li's to turn red as I "tab" through them. Like a key board user. Thanks!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("li").focus(function () {
$(this).addClass('focus');
});
$("li").blur(function () {
$(this).removeClass('focus');
});
})
</script>
<style type="text/css">
<!--
:focus, .focus {
color:red;
}
-->
</style>
</head>
<body>
<ul>
<li>hello1</li>
<li>hello2</li>
<li>hello3</li>
</ul>
- monkeysaurus
- Member
- Offline
Re: li:focus - how? Javascript...?
Hmm, this isn't working as I would expect it to - I'll do some tinkering and see if I can get it working.
For starters though, I would remove that erroneous </head> tag after the first meta tag. 
Last edited by monkeysaurus (February 17, 2009 2:28 pm)
- monkeysaurus
- Member
- Offline
Re: li:focus - how? Javascript...?
Got it!
The key is adding a tabindex attribute to the li element - otherwise you can't tab through the <li> at all.
This works perfectly for me:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="jquery-1.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("li").focus(function () {
$(this).addClass('focus');
})
$("li").blur(function () {
$(this).removeClass('focus');
})
})
</script>
<style type="text/css">
:focus, .focus {
color:red;
}
</style>
</head>
<body>
<ul>
<li tabindex="1">hello1</li>
<li tabindex="2">hello2</li>
<li tabindex="3">hello3</li>
</ul>
</body>
</html>Last edited by monkeysaurus (February 17, 2009 2:41 pm)
- Eric
- Advanced Member
- Online
Re: li:focus - how? Javascript...?
That works perfect - thanks so much John! In a couple browsers all you need is tabindex="1" and no JS - weird? But the others need the JS. I'm going to go google tabindex now and see what the heck that is...
- monkeysaurus
- Member
- Offline
Re: li:focus - how? Javascript...?
Tabindex is actually an accessibility thing first and foremost; if you're tabbing through a document, you can set the order in which the focus will be set. Hope that makes sense.
- Eric
- Advanced Member
- Online
Re: li:focus - how? Javascript...?
Good morning. Under further testing, everybody works perfect except for Safari (even Chrome works). Is this a limitation of Safari or does anyone see something that can be fixed? Thanks!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("li").focus(function () {
$(this).addClass('focus');
})
$("li").blur(function () {
$(this).removeClass('focus');
})
})
</script>
<style type="text/css">
:focus, .focus {
color:red;
}
</style>
</head>
<body>
<ul>
<li tabindex="1">hello1</li>
<li tabindex="2">hello2</li>
<li tabindex="3">hello3</li>
</ul>
</body>
</html>Last edited by Eric (February 19, 2009 8:09 am)
- monkeysaurus
- Member
- Offline
Re: li:focus - how? Javascript...?
I'm afraid I can't install Safari to check...anyone else?
- Eric
- Advanced Member
- Online
Re: li:focus - how? Javascript...?
I Googled, supposidly Safari doesn't support tabindex on other than a couple tags. I also read that you can change this in the preferences (which doesn't mean much anyways) but that didn't work on the "li".
Is this right? In order for this to work, a browser has to suport the JS - and - the tabindex property? If so, that explains why Safari doesn't work - no tabindex!
- monkeysaurus
- Member
- Offline
Re: li:focus - how? Javascript...?
According to the W3C Spec, the only officially supported elements are a, area, button, input, object, select, and textarea; navigation and form elements.
Unfortunately, support for this attribute on other elements is at the discretion of browser manufacturers.
The more I think about this, why would you want the user to be able to tab to a piece of inanimate text anyway?
- Eric
- Advanced Member
- Online
Re: li:focus - how? Javascript...?
Hi John, thanks for the info. It's only Safari, and only keyboard users, so what, .01 percent...
It's for this http://www.visibilityinherit.com/code/tabs.php Most are done with an "li" for the nav. I want to also give an alterative for keyboard users.
