It is currently Thu May 23, 2013 12:17 am

All times are UTC + 2 hours [ DST ]




Post new topic Reply to topic  [ 2 posts ] 
Author Message
 Post subject: highlight the name that was choose
PostPosted: Wed Dec 21, 2011 6:49 am 
Offline

Joined: Wed Oct 26, 2011 4:41 am
Posts: 41
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].rel="nofollow" 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 rel="nofollow" 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


Top
 Profile  
 
 Post subject: Re: highlight the name that was choose
PostPosted: Wed Dec 21, 2011 6:19 pm 
Offline

Joined: Sun May 02, 2004 11:34 pm
Posts: 6579
Location: toronto, canada
Sure, you can use Javascript's obj.className function call to change the CSS class to one that is your row color


http://stackoverflow.com/questions/1959 ... javascript

_________________
Lostboy

Cat, the other other white meat

Please read Posting Etiquette before posting

You can always try Google


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 2 posts ] 

All times are UTC + 2 hours [ DST ]


Who is online

Users browsing this forum: No registered users and 0 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum

Search for:
Jump to:  
cron