1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

highlight the name that was choose

Discussion in 'JavaScript and AJAX' started by newphpcoder, Dec 21, 2011.

  1. newphpcoder

    newphpcoder New Member

    Joined:
    Sep 24, 2010
    Messages:
    101
    Likes Received:
    0
    Trophy Points:
    0
    Occupation:
    Web Programmer
    Location:
    Philippines
    Hi...
    I have a navigation that has a list of employee name. And i used up and down key to see the names and i click enter key to view the data of that employee.Now, I want to have a color the name when I press the up and down key and also I want to be highlight or the color will stay in the the name that I choose after i press the enter key..Is it possible?is it using CSS? or javascript?How?
    here is my code:
    Code:
    <script>
    window.onload = function() {   
    // function() { 
      var ul = document.getElementById('searchpayroll');
      var links = ul.getElementsByTagName('a');
      var i = 0;
     
     document.onkeyup = function(e){ 
      //function(e){    
     e = window.event || e;
     // e = e;     
        
       var key = e.charCode || e.keyCode;
       
       /*if (key == 40 || key == 38) {
       links[i].focus();
       }  */
        //if (key == 38) {
         if (key == 40) { 
          // up pressed
          //if (i < links.length - 1) i++;
          if (i < links.length - 1) i++; 
            links[i].focus();    
        }
        else if (key == 38) {
          // down pressed
          if (i > 0) i--;
          links[i].focus(); 
         // if (i < 0) i++; 
        }
        // focus on link
        
        // request content in here for link with ajax
       // alert(links[i].href);  */
    }
    }
    </script>
    <div id="Search">
    <form>
    <p class="serif"><b>Search Lastname:</b></p>
    <input type="text" name="search_" size="20" onkeyup="searchemppay(this.value);">
    <!--<div id="searchpayroll" style="overflow:auto; height:390px; width:auto; margin-left:2px" >-->
    <hr />
    <ul id="searchpayroll" style="overflow:auto; height:385px; width:auto; margin-left:2px;">
    <!--<ul>-->
    {section name=co_emp loop=$personalAll}
    <!--<li onclick="changeEmployeePay('{$personalAll[co_emp].EMP_ID}')">{$personalAll[co_emp].FULLNAME}</li> -->
    <li><a href="SearchData.php?queryEmpID={$personalAll[co_emp].EMP_ID}">{$personalAll[co_emp].FULLNAME}</a></li>
    <hr />
    {sectionelse}
    <li>No records found</li>
    {/section}
    </ul>
    </div>
    
    css code:
    Code:
    <!--Search Payroll-->
    #searchpayroll{
     position: relative;
     margin-left: 10px;
     top: 0px;
     width: auto;
     /*display:inline;*/
    }
    #searchpayroll h3{
     padding: 10px 0px 2px 10px;
    }
    #searchpayroll a:link{
     padding: 2px 0px 2px 10px;
     border-top: 1px solid #cccccc;
     /* voice-family: "\"}\""; 
      voice-family:inherit;*/
     width: auto;
    }
    #searchpayroll a:visited{
     border-top: 1px solid #cccccc;
     padding: 2px 0px 2px 10px;
    }
    #searchpayroll a:hover{
     border-top: 1px solid #cccccc;
     background-color: #dddddd;
     padding: 2px 0px 2px 10px;
    }
    #Search {
    position:absolute;
    left: 10px;
    top: 60px;
    }
    #Search form{
     margin: 0px;
     padding: 0px;
    }
    #Search label {
    display: block;
    float: left;
    }
    #Search ul a:link, #Search ul a:visited {display: block;}
    #Search ul {list-style: none; margin: 0; padding: 0;}
    #Search li {border-bottom: 1px solid #EEE;}
    
    Thank you
     

Share This Page