Jump to content

li:focus - how? Javascript...?


PicnicTutorials

Recommended Posts

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;
}

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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>

Link to comment
Share on other sites

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 by Eric
Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...