Results 1 to 14 of 14

Thread: Can't get a <li> tag to stay highlighted when it has focus

  1. #1

    Thread Starter
    PowerPoster
    Join Date
    Jan 2004
    Location
    Southern California
    Posts
    5,034

    Can't get a <li> tag to stay highlighted when it has focus

    I have a nav bar in which I'm trying to get the <li> elements to behave in a way that they change colors when it has focus. I can't seem to make that work. It' won't keep the focused color. Here is my CSS below:

    Code:
    a:focus {
        color: #d63a3a;
    }
    
    .categories li {
        font-size: 22px;
        font-weight: 600;
        margin: 3px 25px;
        text-align: center;
        display: inline-block;
        text-shadow: 1px 1px #026cab;
        color: #fff;
    }
    
    .categories li:link,
    .categories li:visited {
        color: #d63a3a;
        padding-bottom: 3px;
        border-bottom: 3px solid transparent;
    }
    
    .categories li:active,
    .categories li:hover {
        color: #d63a3a;
        transition: border-bottom 0.3s;
    }
    Blake

  2. #2
    PowerPoster kfcSmitty's Avatar
    Join Date
    May 2005
    Posts
    2,248

    Re: Can't get a <li> tag to stay highlighted when it has focus

    Not sure what you mean. The following code makes the text red when I hover over each word... is that what you want?

    Code:
    <html>
        <head>
            <style type="text/css">
            a:hover {
                color: #d63a3a;
            }
    
            .categories li {
                font-size: 22px;
                font-weight: 600;
                margin: 3px 25px;
                text-align: center;
                display: inline-block;
                text-shadow: 1px 1px #026cab;
                color: #fff;
            }
    
            .categories li:link,
            .categories li:visited {
                color: #d63a3a;
                padding-bottom: 3px;
                border-bottom: 3px solid transparent;
            }
    
            .categories li:active,
            .categories li:hover {
                color: #d63a3a;
                transition: border-bottom 0.3s;
            }
            </style>
        </head>
        <body>
            <ul class="categories">
                <li>Test1</li>
                <li>Test2</li>
            </ul>
        </body>
    </html>

  3. #3

    Thread Starter
    PowerPoster
    Join Date
    Jan 2004
    Location
    Southern California
    Posts
    5,034

    Re: Can't get a <li> tag to stay highlighted when it has focus

    Yes, I want it to be read when the link is hovered but I want it to stay red until another link is clicked. I'm thinking that has to do with the "focus"?
    Blake

  4. #4
    PowerPoster kfcSmitty's Avatar
    Join Date
    May 2005
    Posts
    2,248

    Re: Can't get a <li> tag to stay highlighted when it has focus

    Is this what you want? Note that this will only work like this when you've clicked on the element.. if you click anywhere else on the page it will unfocus. The difference here being adding the tabindex

    Code:
    <html>
        <head>
            <style type="text/css">
            a:hover {
                color: #d63a3a;
            }
    
            .categories li {
                font-size: 22px;
                font-weight: 600;
                margin: 3px 25px;
                text-align: center;
                display: inline-block;
                text-shadow: 1px 1px #026cab;
                color: #fff;
            }
    
            .categories li:link,
            .categories li:visited {
                color: #d63a3a;
                padding-bottom: 3px;
                border-bottom: 3px solid transparent;
            }
    
            .categories li:active,
            .categories li:hover,
            .categories li:focus {
                color: #d63a3a;
                transition: border-bottom 0.3s;
            }
            </style>
        </head>
        <body>
            <ul class="categories">
                <li tabindex="0">Test1</li>
                <li tabindex="1">Test2</li>
            </ul>
        </body>
    </html>

  5. #5

    Thread Starter
    PowerPoster
    Join Date
    Jan 2004
    Location
    Southern California
    Posts
    5,034

    Re: Can't get a <li> tag to stay highlighted when it has focus

    Unfortunately that's not working. If you look at the attached image, you'll see a menu item highlighted red. Everytime a menu item is clicked on, I want it to STAY RED until another menu item is clicked on. Hope that helps!
    Blake

  6. #6
    PowerPoster kfcSmitty's Avatar
    Join Date
    May 2005
    Posts
    2,248

    Re: Can't get a <li> tag to stay highlighted when it has focus

    A menu item or anywhere on the screen?

    I assume your use case is that you want the current menu item to be selected, so when the page loads, it shows the current page as "active." If you want it to stay red until someone clicks into another page then you either need to do it via javascript or add the class server-side, depending on how your application is built.

  7. #7

    Thread Starter
    PowerPoster
    Join Date
    Jan 2004
    Location
    Southern California
    Posts
    5,034

    Re: Can't get a <li> tag to stay highlighted when it has focus

    Ok, I think I may have explained it wrong. When the page initially loads, all the menu items are white. When a menu item is clicked on, I want it to stay red until another menu item is clicked, it's basically just toggling the menu items and whichever one was the most recently clicked, that one needs to stay RED.
    Blake

  8. #8
    PowerPoster kfcSmitty's Avatar
    Join Date
    May 2005
    Posts
    2,248

    Re: Can't get a <li> tag to stay highlighted when it has focus

    Yeah I understand that, but when you click a menu item, does the page reload and bring you to another page? If so, CSS will not handle that, you have to add the class via javascript or server-side.

    Does your page reload when you click a menu item? Or are you talking sub-menu items right now or something?

    If you could post your page markup so I could run it, I could tell you what you have to do.

  9. #9
    Smooth Moperator techgnome's Avatar
    Join Date
    May 2002
    Posts
    34,531

    Re: Can't get a <li> tag to stay highlighted when it has focus

    Ii'd add a CSS class "current" and set it on the currently selected li item when it's clicked and clear it from the others.

    -tg
    * I don't respond to private (PM) requests for help. It's not conducive to the general learning of others.*
    * I also don't respond to friend requests. Save a few bits and don't bother. I'll just end up rejecting anyways.*
    * How to get EFFECTIVE help: The Hitchhiker's Guide to Getting Help at VBF - Removing eels from your hovercraft *
    * How to Use Parameters * Create Disconnected ADO Recordset Clones * Set your VB6 ActiveX Compatibility * Get rid of those pesky VB Line Numbers * I swear I saved my data, where'd it run off to??? *

  10. #10

    Thread Starter
    PowerPoster
    Join Date
    Jan 2004
    Location
    Southern California
    Posts
    5,034

    Re: Can't get a <li> tag to stay highlighted when it has focus

    Hi techgnome,

    I see what you mean here and it makes sense. However, my javascript isn't real sharp. I'm adding an onclick event to the <a> tag for each <li>. What do I pass in the function call that indicates which <li> I'm using. Once in the function, how should I reference the passed parameter?

    Thanks,
    Blake

  11. #11

    Thread Starter
    PowerPoster
    Join Date
    Jan 2004
    Location
    Southern California
    Posts
    5,034

    Re: Can't get a <li> tag to stay highlighted when it has focus

    Ok,

    I've created a javascript function that should allow for the class to be added. However, I'm terrible with JS and am having issues with this function. Here it is:

    Code:
            function addMenuClass(id) {
                //id is the actual <li> element id
                var x = id;
                
                //Get all <li> elements
                var li = document.querySelectorAll("li");
                
                for (var i=0; i<li.length; i++) {
                    li[i].classList.remove(".current");
                }
                
                //This alert will display 6 different <li> tag ID's: a1, a2, a3, a4, a5, a6
                alert(x);
                
                //Blows up on this statement (see attached screenshot)
                x.classList.add(".current");
            }
    Attached Images Attached Images  
    Blake

  12. #12
    Smooth Moperator techgnome's Avatar
    Join Date
    May 2002
    Posts
    34,531

    Re: Can't get a <li> tag to stay highlighted when it has focus

    IT looks like you're passing in the id of the LI .... not the LI itself... the id has no class... so x.classList doesn't work... that doesn't return anything. You need to pass in the actual li element, not its id. How are you calling the addMenuClass?

    -tg
    * I don't respond to private (PM) requests for help. It's not conducive to the general learning of others.*
    * I also don't respond to friend requests. Save a few bits and don't bother. I'll just end up rejecting anyways.*
    * How to get EFFECTIVE help: The Hitchhiker's Guide to Getting Help at VBF - Removing eels from your hovercraft *
    * How to Use Parameters * Create Disconnected ADO Recordset Clones * Set your VB6 ActiveX Compatibility * Get rid of those pesky VB Line Numbers * I swear I saved my data, where'd it run off to??? *

  13. #13
    Hyperactive Member coothead's Avatar
    Join Date
    Oct 2007
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    284

    Re: Can't get a <li> tag to stay highlighted when it has focus

    Hi there blakemckenna.

    does this help...
    Code:
    
    <!DOCTYPE HTML>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
    
    <title>Untitled Document</title>
    
    <!--<link rel="stylesheet" href="screen.css" media="screen">-->
    
    <style media="screen">
    
    .highlighted {
        color: #f00;
        outline: 1px dotted #f00;
     }
    </style>
    
    </head>
    <body> 
    
     <ul id="list">
      <li>Test 1</li>
      <li>Test 2</li>
      <li>Test 3</li>
      <li>Test 4</li>
     </ul>
     
    <script>
    ( function( d ) {
       'use strict';
         var c,k,
             lst = d.getElementById( 'list' ),
    	  el = lst.querySelectorAll( 'li' );
    		 
    for ( c = 0; c < el.length; c ++ ) { 
          el[ c ].setAttribute( 'tabindex', 0);
          el[ c ].addEventListener( 'focus', highlight( c ), false);
    
     }
     
    function highlight( c ) {
       el[ c ].onfocus = function() { 
          for ( k = 0; k < el.length; k ++ ) {
              el[k].classList.remove( 'highlighted' );
            }
              el[c].classList.add( 'highlighted' );
        }
      }
    } ( document ) );
    </script>
    
    </body>
    </html>


    ~ the original bald headed old fart ~

  14. #14

    Re: Can't get a <li> tag to stay highlighted when it has focus

    Hello....

    please try below code

    Code:
    function addMenuClass(li_id)
     {  
                var x =li_id
                var li = document.querySelectorAll("li");  
                for (var i=0; i<li.length; i++)
                {
                    li[i].classList.remove(".current");
                }
                alert(x);
                x.classList.add(".current");
     }
    < advertising removed by moderator >

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width