SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Guru
    Join Date
    Oct 2011
    Posts
    658
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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

  2. #2
    Non-Member Max Height's Avatar
    Join Date
    Dec 2011
    Posts
    303
    Mentioned
    6 Post(s)
    Tagged
    1 Thread(s)
    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?

  3. #3
    Non-Member Max Height's Avatar
    Join Date
    Dec 2011
    Posts
    303
    Mentioned
    6 Post(s)
    Tagged
    1 Thread(s)
    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
    Code:
            <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>
    Code:
           <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.

  4. #4
    SitePoint Guru
    Join Date
    Oct 2011
    Posts
    658
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay...I will try this.

    Thank you

  5. #5
    SitePoint Guru
    Join Date
    Oct 2011
    Posts
    658
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is it what you say?

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

  6. #6
    Non-Member Max Height's Avatar
    Join Date
    Dec 2011
    Posts
    303
    Mentioned
    6 Post(s)
    Tagged
    1 Thread(s)
    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.
    Code:
    <!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>

  7. #7
    SitePoint Guru
    Join Date
    Oct 2011
    Posts
    658
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    in my previous code..

    when I used this css:
    Code:
    #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;}

  8. #8
    Non-Member Max Height's Avatar
    Join Date
    Dec 2011
    Posts
    303
    Mentioned
    6 Post(s)
    Tagged
    1 Thread(s)
    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.

  9. #9
    SitePoint Guru
    Join Date
    Oct 2011
    Posts
    658
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •