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:
<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>
It would be easier for me to visualise what you are trying to do if you post your html.
eg…can you see only one name at a time and you are using the up/down keys to scroll up and down the names, or can you see all the names displayed and as you move from one name to another you want the current name to be highlighted with some sort of colouring?
No, what I posted was just a standalone demo of one way you can highlight the current name in a list of names while using the up/down keys to move up/down the list. It’s not meant to just plug into your code. To be honest, I found your code a bit hard to read so it was quicker for me to just whip up a quick demo.
This is a full standalone demo you can copy and paste into a separate file to see how it works.
You should then be able to bolt on, with maybe a few minor changes, the other bits of functionality you have in your code. And then add the css to suit your layout.