Jump to content
Stef's Coding Community
PicnicTutorials

li:focus - how? Javascript...?

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

Share this post


Link to post
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

Share this post


Link to post
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.

Share this post


Link to post
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

 

Share this post


Link to post
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>

Share this post


Link to post
Share on other sites

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 by monkeysaurus

Share this post


Link to post
Share on other sites

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...

Share this post


Link to post
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

Share this post


Link to post
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!

Share this post


Link to post
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?

Share this post


Link to post
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...