Jump to content


Check out our Community Blogs

Register and join over 40,000 other developers!


Recent Status Updates

View All Updates

Photo
- - - - -

highlight the name that was choose

ajax

  • Please log in to reply
31 replies to this topic

#1 newphpcoder

newphpcoder

    CC Devotee

  • Senior Member
  • PipPipPipPipPipPip
  • 527 posts

Posted 20 December 2011 - 07:50 PM

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

#2 RhetoricalRuvim

RhetoricalRuvim

    JavaScript Programmer

  • Expert Member
  • PipPipPipPipPipPipPip
  • 1311 posts
  • Location:C:\Countries\US
  • Programming Language:C, Java, C++, PHP, Python, JavaScript

Posted 20 December 2011 - 07:59 PM

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>

  • 0

#3 newphpcoder

newphpcoder

    CC Devotee

  • Senior Member
  • PipPipPipPipPipPip
  • 527 posts

Posted 20 December 2011 - 08:05 PM

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

#4 RhetoricalRuvim

RhetoricalRuvim

    JavaScript Programmer

  • Expert Member
  • PipPipPipPipPipPipPip
  • 1311 posts
  • Location:C:\Countries\US
  • Programming Language:C, Java, C++, PHP, Python, JavaScript

Posted 20 December 2011 - 08:11 PM

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>

  • 0

#5 newphpcoder

newphpcoder

    CC Devotee

  • Senior Member
  • PipPipPipPipPipPip
  • 527 posts

Posted 20 December 2011 - 10:00 PM

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

Thank you
  • 0

#6 RhetoricalRuvim

RhetoricalRuvim

    JavaScript Programmer

  • Expert Member
  • PipPipPipPipPipPipPip
  • 1311 posts
  • Location:C:\Countries\US
  • Programming Language:C, Java, C++, PHP, Python, JavaScript

Posted 20 December 2011 - 10:32 PM

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>

  • 0

#7 newphpcoder

newphpcoder

    CC Devotee

  • Senior Member
  • PipPipPipPipPipPip
  • 527 posts

Posted 20 December 2011 - 10:44 PM

When I try that..

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

#8 RhetoricalRuvim

RhetoricalRuvim

    JavaScript Programmer

  • Expert Member
  • PipPipPipPipPipPipPip
  • 1311 posts
  • Location:C:\Countries\US
  • Programming Language:C, Java, C++, PHP, Python, JavaScript

Posted 20 December 2011 - 10:49 PM

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?
  • 0

#9 newphpcoder

newphpcoder

    CC Devotee

  • Senior Member
  • PipPipPipPipPipPip
  • 527 posts

Posted 20 December 2011 - 11:04 PM

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

  • 0

#10 RhetoricalRuvim

RhetoricalRuvim

    JavaScript Programmer

  • Expert Member
  • PipPipPipPipPipPipPip
  • 1311 posts
  • Location:C:\Countries\US
  • Programming Language:C, Java, C++, PHP, Python, JavaScript

Posted 20 December 2011 - 11:34 PM

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.)
  • 0

#11 newphpcoder

newphpcoder

    CC Devotee

  • Senior Member
  • PipPipPipPipPipPip
  • 527 posts

Posted 20 December 2011 - 11:50 PM

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

#12 RhetoricalRuvim

RhetoricalRuvim

    JavaScript Programmer

  • Expert Member
  • PipPipPipPipPipPipPip
  • 1311 posts
  • Location:C:\Countries\US
  • Programming Language:C, Java, C++, PHP, Python, JavaScript

Posted 20 December 2011 - 11:55 PM

I think the problem is here:

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

  • 0





Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download