www.webdeveloper.com
Results 1 to 9 of 9

Thread: [RESOLVED] addClass to first link in a list

Hybrid View

  1. #1
    Join Date
    Jun 2007
    Location
    Boston, MA
    Posts
    31

    resolved [RESOLVED] addClass to first link in a list

    I am trying to attach a class to the first link in an unordered list, but I can't seem to get it to work. Can someone take a look at the code below and see if I have any errors?


    The jQuery Call
    Code:
    <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.pack.js"></script>
    From my custom script
    Code:
    // Begin Javascript 
    $(document).ready(function(){
        $("#menu ul li a:first").addClass("itemhover");
    });
    The HTML
    Code:
    <div id="menu">
       <ul>
         <li class="first">Select User</li>
         <li><a href="#invite"><span>Bill</span></a></li>
         <li><a href="#invite"><span>George</span></a></li>
         <li><a href="#invite"><span>Tom</span></a></li>
       </ul>
    </div>

  2. #2
    Join Date
    Sep 2009
    Posts
    5
    wouldn't it be something like
    $("li.first").addClass("itemhover");

  3. #3
    Join Date
    Jun 2007
    Location
    Boston, MA
    Posts
    31
    Quote Originally Posted by freshmasterj View Post
    wouldn't it be something like
    $("li.first").addClass("itemhover");
    Damn, I forgot to indicate that I am trying to assign the class to the first hyperlink instead of the first list item. Sorry about that.

    Is it not possible to assign the first filter in a nested set of selectors like my original code suggests? I thought it was possible.

  4. #4
    Join Date
    Sep 2009
    Posts
    5
    ok then I think you would want to use first-child not first

    $("#menu ul li a:first-child").addClass("itemhover");

  5. #5
    Join Date
    Jun 2007
    Location
    Boston, MA
    Posts
    31
    Quote Originally Posted by freshmasterj View Post
    ok then I think you would want to use first-child not first

    $("#menu ul li a:first-child").addClass("itemhover");
    Unfortunately, that didn't work. Do you think it's something in the JS that's interfering? Here's the whole shabang:

    Code:
    //On load page, init the timer which check if the there are anchor changes each 300 ms
    $().ready(function(){
        setInterval("checkAnchor()", 1);
    });
    var currentAnchor = null;
    //Function which chek if there are anchor changes, if there are, sends the ajax petition
    function checkAnchor(){
        //Check if it has changes
        if(currentAnchor != document.location.hash){
            currentAnchor = document.location.hash;
            //if there is not anchor, the loads the default section
            if(!currentAnchor)
                query = "section=select-user";
            else
            {
                //Creates the  string callback. This converts the url URL/#main&id=2 in URL/?section=main&id=2
                var splits = currentAnchor.substring(1).split('&');
                //Get the section
                var section = splits[0];
                delete splits[0];
                //Create the params string
                var params = splits.join('&');
                var query = "section=" + section + params;
            }
            //Send the petition
            $.get("callbacks.php",query, function(data){
                $("#dynamiccontent").html(data);
            });
        }
    }
    
    var currentSelection = 0;
    var currentUrl = '';
    
    // Register keypress events on the whole document
    $(document).keypress(function(e) {
        switch(e.keyCode) { 
            // User pressed "page up" key
            case 33:
                if(currentAnchor != '') {
                    switch(currentAnchor) { 
                        case '#chat-line3':
                            window.location = '#chat-line2';
                        break;
                        case '#chat-line2':
                            window.location = '#chat-line1';
                        break;
                        case '#chat-line1':
                        break;
                    }
                }
            break;
            // User pressed "page down" key
            case 34:
                if(currentAnchor != '') {
                    switch(currentAnchor) { 
                        case '#chat-line1':
                            window.location = '#chat-line2';
                        break;
                        case '#chat-line2':
                            window.location = '#chat-line3';
                        break;
                        case '#chat-line3':
                        break;
                    }
                }
            break;
            // User pressed "end" key
            case 35:
                navigate('end');
            break;
            // User pressed "back" key
            case 8:
                navigate('back');
            break;
            // User pressed "up" arrow
            case 38:
                navigate('up');
            break;
            // User pressed "down" arrow
            case 40:
                navigate('down');
            break;
            // User pressed "enter"
            case 13:
                if(currentUrl != '') {
                    window.location = currentUrl;
                    //store data using name/value format
                }
            break;
        }
    });
    
    
    
    // Add data to let the hover know which index they have
    var currentSelection = $("#menu ul li a" ).index(this);
    
    
    
    function navigate(direction) {
        // Check if any of the menu items is selected
        if($("#menu ul li .itemhover").size() == 0) {
            currentSelection = 0;
        }
        
        if(direction == 'up' && currentSelection != -1) {
            if(currentSelection != 0) {
                currentSelection--;
            }
        } else if (direction == 'down') {
            if(currentSelection != $("#menu ul li").size() -1) {
                currentSelection++;
            }
        } else if (direction == 'back') {
            if(currentSelection != 0 || currentUrl != '#invite') {
                currentAnchor--;
            }
        } else if (direction == 'end') {
            if(currentSelection != 0) {
                window.close();
            }
        }
        setSelected(currentSelection);
    }
    
    function setSelected(menuitem) {
        $("#menu ul li a").removeClass("itemhover");
        $("#menu ul li a").eq(menuitem).addClass("itemhover");
        currentUrl = $("#menu ul li a").eq(menuitem).attr("href");
    }
    
    $(document).ready(function(){
        $("#menu ul li a:first-child").addClass("itemhover"); 
        //$("#menu ul li a:first").toggleClass("itemhover");
        //$("#menu ul li a:first").addClass("itemhover");
    });

  6. #6
    Join Date
    Jul 2003
    Location
    The City of Roses
    Posts
    2,503
    abovethefold,

    Your JS is selecting an "a" tag, but the menu markup you've shown here doesn't have any "a" tags.

    EDIT: My mistake. I must have been blind or something.
    Last edited by Jeff Mott; 11-12-2009 at 12:57 PM.
    for(split(//,'))*))91:+9.*4:1A1+9,1))2*:..)))2*:31.-1)4131)1))2*:3)"'))
    {for(ord){$i+=$_&7;grep(vec($s,$i++,1)=1,1..($_>>3)-4);}}print"$s\n";

  7. #7
    Join Date
    Oct 2009
    Posts
    658
    Code:
    $("#menu ul li:not('.first'):first").children("a").addClass("itemhover");
    Good Luck

    Santos Systems

  8. #8
    Join Date
    Jun 2007
    Location
    Boston, MA
    Posts
    31

    Thumbs up

    Quote Originally Posted by ssystems View Post
    Code:
    $("#menu ul li:not('.first'):first").children("a").addClass("itemhover");
    Hey ssytems,

    So I did a little test. I stripped out the other JS files and took your code + my markup and it worked fine. So this tells me that something in my the JS that I posted on this forum is causing the break. Not sure what it is, but at least I have more of a clue as to what is happening.

    Thanks everyone for your support! I will mark this as resolved.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles