31 replies to this topic

[newphpcoder]

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

[RhetoricalRuvim]

So are you asking about changing text color? Like this?:

<div id="txt">Hello World!</div> <BR> 

<button onClick="go_red ();">Red</button> <BR> 

<button onClick="go_green ();">Green</button> <BR> 

<button onClick="go_blue ();">Blue</button> <BR> 

<script type="text/javascript"> 

var txt= document.getElementById ("txt"); 

function go_red (){ 

  // Clear txt 

  while (txt.childNodes[0]) txt.removeChild (txt.childNodes[0]); 

  // Set the color to red. 

  txt.style.color= "#FF0000"; 

  // Append the text "Red" to txt 

  txt.appendChild (document.createTextNode ("Red")); 

} 

function go_green (){ 

  // Clear txt 

  while (txt.childNodes[0]) txt.removeChild (txt.childNodes[0]); 

  // Set the color to green. 

  txt.style.color= "#00FF00"; 

  // Append the text "Green" to txt 

  txt.appendChild (document.createTextNode ("Green")); 

} 

function go_blue (){ 

  // Clear txt 

  while (txt.childNodes[0]) txt.removeChild (txt.childNodes[0]); 

  // Set the color to blue. 

  txt.style.color= "#0000FF"; 

  // Append the text "Blue" to txt 

  txt.appendChild (document.createTextNode ("Blue")); 

} 

</script> 

[newphpcoder]

I add this code in css:

#Search li:hover {background:#00FF00;}

#Search li a:focus {background:yellow;}

#Search li a:active {background:green;}

but only work is:

#Search li a:focus {background:yellow;}

it works in pressing the up or down key..

my problem now is stay the color green in active name.


Thanks

[RhetoricalRuvim]

Does it work if you programmatically change the color?

If you want to change all the LI elements, for example, you can probably do something like this:

<script type="text/javascript"> 

function work01 (){ 

  // Change the color of all the LI elements to green. 

  var elements= document.getElementsByTagName ("li"); 

  var i; 

  for (i= 0; i < elements.length; i++) elements[i].style.color= "#00FF00"; 

} 

</script> 

[newphpcoder]

Yes...its work..my only problem is the active link

Thank you

[RhetoricalRuvim]

In the link, say something like this:

<a href="http://forum.codecall.net/javascript-css/something...">something...</a> 

, add the onClick attribute, like this:

<a href="http://forum.codecall.net/javascript-css/something..." onClick="this.style.color= '#FFFF00';">something...</a>

[newphpcoder]

When I try that..

the color was still, but after I press enter the color was gone..it did not stay..

[RhetoricalRuvim]

I tried using this script and it worked:

var a= document.createElement ("a"); 


a.href= "javascript: ;"; 

a.onclick= Function ("this.style.color= '#00FF00';"); 


a.appendChild (document.createTextNode ("Click Me!")); 


document.body.appendChild (a); 

document.body.appendChild (document.createElement ("br")); 

Can you explain further, maybe a step-by-step process of what you did and what happened?

[newphpcoder]

I used up and down key to see the list of names and i pressed enter to see the data of that name that i choose.

in pressing up and down key the name has a color yellow if focus..then i want that yellow will remain after i press enter.

Thank you

---------- Post added at 07:04 AM ---------- Previous post was at 07:02 AM ----------

#Search li a:focus {background:yellow;}

#Search li a:active {background:yellow;}

[RhetoricalRuvim]

How about, if you have a link like this:

<a href="http://forum.codecall.net/javascript-css/javascript-css/something...">something...</a>

, try changing it like this:

<a href="javascript: do_something (event); location='http://forum.codecall.net/javascript-css/something...';">something...</a>

And also you'll need a function named so_something () that does something like this:

function do_something (e){ 

if (!e) e= window.event; 

if (e.keyCode && e.keyCode == 13) this.style.color= "#FF0000"; 

} 

(13 is the key code for the enter key.)

[newphpcoder]

I tried this 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);  */


}

}



function do_something (e){ 

if (!e) e= window.event; 

if (e.keyCode && e.keyCode == 13) this.style.color= "#FF0000"; 

}

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

<li><a href="javascript: do_something (event); location="SearchData.php?queryEmpID={$personalAll[co_emp].EMP_ID}">{$personalAll[co_emp].FULLNAME}</a></li>

<hr />

{sectionelse}

<li>No records found</li>

{/section}

</ul>

</div>

but when i press enter i got an error:

Syntax error

[RhetoricalRuvim]

I think the problem is here:

newphpcoder said:

<li><a href="javascript: do_something (event); location="SearchData.php?queryEmpID={$personalAll[co_emp].EMP_ID}">{$personalAll[co_emp].FULLNAME}</a></li>

Try this instead:

<li><a href="javascript: do_something (event); location=[COLOR="#FF0000"]'[/COLOR]SearchData.php?queryEmpID={$personalAll[co_emp].EMP_ID}[COLOR="#FF0000"]'[/COLOR];">{$personalAll[co_emp].FULLNAME}</a></li>