Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Highlighting only selected li

    As you can see, I'm new to this forum, so hello to all of you. Like many of you I'm sure, I'm a freelance programmer trying to make ends meet.

    Anyway, on my current project, I have a small effect I'm trying to make work that is just kicking my butt. It seems like it is probably simple and I am just missing something or doing something wrong that more experienced eyes could spot. Basicallly, I have navigation based on a ul list, and when you click on any of the li's, it changes the content of a the box located below it. All this works fine. And the hover effect I have on the li's of changing them to be white works fine as well.

    The last thing I wanted to do was to make it so that the li's stay white when they are selected, so it is a visual cue to the user which section they are viewing. That effect itself works fine, using the class/id method where I assign a class to the parent element that overrides the default color of the element (grey). Now, my problem is that while the effect works, when I change my selection in the nav, the white color won't be removed from the previous selection until I hover over that li. I have checked using Firebug to be sure that the rule is actually getting changed when a new li is selected, and it is, so the problem is just that even though it correctly removes the class, it doesn't remove the white until the user hovers or mouses over the previously selected li. This obviously takes away the UI value of the effect. So does anyone know a way to make it so that the color will change instantly using the class changing method I have now? I've tried other methods using animate and Jquery and they just got ugly because they added inline styles to the fray. Any and all help is appreciated. Thanks guys.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello Demper,
    I'm having a little trouble visualizing how your class can keep that li white even though you've clicked on another link. It's stays white untill you hover over it?
    Can we get a link to the demo site?

    Have a look at these demonstrations I put together of menus that indicates what page your on.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    Demper (12-02-2009)

  • #3
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I probably should have mentioned that this particular ul li navigation contains no a tags, it is just being used to change the content of a nav box.

    As for the CSS being used to manipulate it, here it is:

    Code:
    #topnav {
    	background: #151213;
    	height: 34px;
    	outline: none;
    	padding-top: 7px;
    }
    
    #topnav ul li{
    	height: 25px;
    	color: #bdbdc5;
    	outline: none;
    }
    
    #topnav ul li:hover{
    	color: #fff;
    }
    
    .products_and_solutions #nav_main_01, .systems_integration #nav_main_02, .other_services #nav_main_03, .contact #nav_main_04 {
    	color: #fff;
    }

    And here is the actual markup for that:
    Code:
    <div id="topnav">
    <ul>
    <li id="nav_main_01" onclick = "return changeNav(this);">Products and Solutions</li>
    <li id="nav_main_02" onclick = "return changeNav(this);">Systems Integration</li>
    <li id="nav_main_03" onclick = "return changeNav(this);">Other Services</li>
    <li id="nav_main_04" onclick = "return changeNav(this);">Contact</li>
    </ul>
    </div>
    Last edited by Demper; 12-02-2009 at 09:59 PM.

  • #4
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Also, Excavator thanks for your reply and I see how the method you provided works if you are going to a new page when selecting a different li, but my problem is that I am staying on the same page and while the effect is technically working properly, it won't render correctly until the user rolls over the previously selected li. I am starting to wonder whether what I am trying to do here is possible, at least as I currently have it built.

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    I think it's in your script function changeNav(e){.
    While there are several errors the validator finds but I don't think any of them would cause this. Just in case though... they are very simple things to fix. Have a look at http://validator.w3.org/check?verbos...clairvoyant%2F
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    In your script you have, example: document.getElementById('topnav').className = 'products_and_solutions';


    But nowhere in your pages can I find <class="products_and_solutions">
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    The script applies the class to the #topnav element, which with the rule .products_and_solutions #nav_main_01, .systems_integration #nav_main_02, .other_services #nav_main_03, .contact #nav_main_04 {
    color: #fff;
    }

    will automaitcally make the selected li white. So that part works. It's just that when you select a new li, while that one will become white, as it should, the previously selected li remains white until you rollover, because it won't render the change until the user interacts with it in some way.

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    The script applies the class to
    Der, I see now.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #9
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Dude it's no big deal. Thanks for all your help. Like I said, I'm not sure this is possible, at least how I'm trying to do it, but I think I've seen effects like this out there on the web so I'm just trying to work thorugh it.


  •  

    Posting Permissions

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