Go4Expert

Go4Expert (http://www.go4expert.com/)
-   JavaScript and AJAX (http://www.go4expert.com/forums/javascript/)
-   -   highlight the name that was choose (http://www.go4expert.com/forums/highlight-choose-t27410/)

newphpcoder 21Dec2011 09:20

highlight the name that was choose
 
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


All times are GMT +5.5. The time now is 22:45.