li:focus - how? Javascript...?

[PicnicTutorials]

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!

Edited February 16, 2009 by Eric

[jlhaslip]

is there an anchor in the li?

[PicnicTutorials]

Hi, no that's the problem. And I can't use an anchor there.

[monkeysaurus]

JQuery:

 

$("li.myLi").focus(function () {
        $(this).css('color','red');
   });

 

For example.

[lwsimon]

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]

Yep, agreed. The css part was just as a little example, but adding classes would probably be better.

[PicnicTutorials]

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?

 

>br />                    "http://www.w3.org/TR/html4/loose.dtd">



<br />  $(document).ready(function(){<br />    $("li.myLi").focus(function () {<br />         $(this).css('color','red');<br />    }); <br />  



</pre>
<ul>
hello
</ul>
<br><br><br><br

[monkeysaurus]

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.

[PicnicTutorials]

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!

 

/p>

"http://www.w3.org/TR/html4/loose.dtd">

$(document).ready(function(){

$("li.myLi").focus(function () {

$(this).addClass('focus');

});

$("li.myLi").blur(function () {

$(this).removeClass('focus');

});

 

• hello

 

[monkeysaurus]

• 
  
• hello
  

Edited February 16, 2009 by monkeysaurus

[PicnicTutorials]

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!

 

>





<br />  $(document).ready(function(){<br />    $("li").focus(function () {<br />         $(this).addClass('focus');<br />    });<br />    $("li").blur(function () {<br />         $(this).removeClass('focus');<br />    });<br />   })<br />  
<br /><!--<br />:focus, .focus {<br />         color:red;<br />}<br />--><br />



</pre>
<ul>
hello1
hello2
hello3
</ul>

[monkeysaurus]

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 tag after the first meta tag.

Edited February 17, 2009 by monkeysaurus

[monkeysaurus]

• 
  
• hello1
  
• hello2
  
• hello3
  

Edited February 17, 2009 by monkeysaurus

[PicnicTutorials]

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]

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.

[PicnicTutorials]

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!

 

>





<br />  $(document).ready(function(){<br />    $("li").focus(function () {<br />         $(this).addClass('focus');<br />    })<br />    $("li").blur(function () {<br />         $(this).removeClass('focus');<br />    })<br />   })<br />  
<br />:focus, .focus {<br />         color:red;<br />}<br />



</pre>
<ul>
hello1
hello2
hello3
</ul>
<br><br><br

Edited February 19, 2009 by Eric

[monkeysaurus]

I'm afraid I can't install Safari to check...anyone else?

[PicnicTutorials]

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]

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?

[PicnicTutorials]

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.