Highlight the name that was choose

newphpcoder · December 21, 2011, 3:44am

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:


<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:


<!--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

system · December 21, 2011, 4:42am

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?

system · December 21, 2011, 5:32am

This might help you get started.

The background colour of the names is changed to red as you move up/down the names with the arrow keys


        <script type="text/javascript">
            function whichArrowKey(e) {
                arrowKey = e.which||e.keyCode;
                clearNameStyles();
                switch(arrowKey) {
                    case 38:
                        curNameIdx = (--curNameIdx < 0)? 0: curNameIdx;
                        break;
                    case 40:
                        curNameIdx = (++curNameIdx > names.length-1)? names.length-1: curNameIdx;
                        break;
                }
                names[curNameIdx].style.backgroundColor = 'red';
            }
            function clearNameStyles(){
                for(i=0; i < names.length; i++){
                    names[i].style.backgroundColor = 'white';
                }
            }
            window.onload=function(){
                names = document.getElementById('namesHolder').getElementsByTagName('li');
                curNameIdx = 0;
                names[curNameIdx].style.backgroundColor = 'red';
                document.body.onkeydown = function(){whichArrowKey(event);}
            }
        </script>

       <ul id="namesHolder">
            <li>Name 1</li>
            <li>Name 2</li>
            <li>Name 3</li>
            <li>Name 4</li>
        </ul>

Also, you don’t need an <a> inside the <li>. You could put an onclick on the <li> that calls a function to do what you want.

newphpcoder · December 21, 2011, 6:02am

Okay…I will try this.

Thank you

newphpcoder · December 21, 2011, 6:15am

Is it what you say?


<!--<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>-->

  <script type="text/javascript">
            function whichArrowKey(e) {
                arrowKey = e.which||e.keyCode;
                clearNameStyles();
                switch(arrowKey) {
                    case 38:
                        curNameIdx = (--curNameIdx < 0)? 0: curNameIdx;
                        break;
                    case 40:
                        curNameIdx = (++curNameIdx > names.length-1)? names.length-1: curNameIdx;
                        break;
                }
                names[curNameIdx].style.backgroundColor = 'red';
            }
            function clearNameStyles(){
                for(i=0; i < names.length; i++){
                    names[i].style.backgroundColor = 'white';
                }
            }
            window.onload=function(){
                names = document.getElementById('searchpayroll').getElementsByTagName('li');
                curNameIdx = 0;
                names[curNameIdx].style.backgroundColor = 'red';
                document.body.onkeydown = function(){whichArrowKey(event);}
            }
        </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>

when I run this…

No display

system · December 21, 2011, 6:23am

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.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <title></title>
        <style type="text/css"></style>
        <script type="text/javascript">
            function whichArrowKey(e) {
                arrowKey = e.which||e.keyCode;
                clearNameStyles();
                switch(arrowKey) {
                    case 38:
                        curNameIdx = (--curNameIdx < 0)? 0: curNameIdx;
                        break;
                    case 40:
                        curNameIdx = (++curNameIdx > names.length-1)? names.length-1: curNameIdx;
                        break;
                }
                names[curNameIdx].style.backgroundColor = 'red';
            }
            function clearNameStyles(){
                for(i=0; i < names.length; i++){
                    names[i].style.backgroundColor = 'white';
                }
            }
            window.onload=function(){
                names = document.getElementById('namesHolder').getElementsByTagName('li');
                curNameIdx = 0;
                names[curNameIdx].style.backgroundColor = 'red';
                document.body.onkeydown = function(){whichArrowKey(event);}
            }
        </script>
    </head>
    <body>
        <ul id="namesHolder">
            <li>Name 1</li>
            <li>Name 2</li>
            <li>Name 3</li>
            <li>Name 4</li>
        </ul>
    </body>
</html>

newphpcoder · December 21, 2011, 6:38am

in my previous code…

when I used this css:


#Search li:hover {background:#00FF00;}
#Search li a:focus {background:yellow;}
#Search li a:active {background:green;}

only work is :
#Search li a:focus {background:yellow;}

system · December 21, 2011, 7:16am

but in your first post you said you wanted the names highlighted when you move up and down the list with the arrow keys.

Have you got that working? That css code has nothing to do with the up/down arrow keys functionality.

newphpcoder · December 21, 2011, 7:28am

when i press up and down key the list name that focus has a color yellow…but when i hit enter the color was gone