newphpbees Posted December 21, 2011 Share Posted December 21, 2011 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 Quote Link to comment https://forums.phpfreaks.com/topic/253586-highlight-the-name-that-was-choose/ Share on other sites More sharing options...
scootstah Posted December 21, 2011 Share Posted December 21, 2011 Something like this? a { color:#000; text-decoration:none; } a:focus, a:active { background:yellow; } Quote Link to comment https://forums.phpfreaks.com/topic/253586-highlight-the-name-that-was-choose/#findComment-1300140 Share on other sites More sharing options...
newphpbees Posted December 22, 2011 Author Share Posted December 22, 2011 I tried your suggestion and still the active link has no color Thank you Quote Link to comment https://forums.phpfreaks.com/topic/253586-highlight-the-name-that-was-choose/#findComment-1300290 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.