Highlighting a Linkbutton in javascript onclick

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • sweetneel
    New Member
    • Oct 2008
    • 42
    #1

    Highlighting a Linkbutton in javascript onclick

    hi all, i have 4 link buttons.all of them opens a popup window. i want when i click on button it gets highlited.
    pls help. its urgent.

    Neel.
    Tags: None
    • RamananKalirajan
      Contributor
      • Mar 2008
      • 608
      #2
      onclick of that button just change the class of that button.. so that it looks like highlighted...

      ex:

      Code:
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style type="text/css">
.normal{
    background-color: #999999;
}
.highlight{
	background-color: #FF3333;
}
</style>
<script type="text/javascript">
    function highlightThis(ths)
	{
	   for(var i=1;i<=4;i++)
	   {
	     var tempId = "select"+i;
	     if(ths.id==tempId)
		 {
		     document.getElementById(tempId).className = "highlight";
		 }
		 else
		 {
			document.getElementById(tempId).className = "normal";
		 }
		}
	}
</script>
</HEAD>
<BODY>
<table width="100%" cellspacing="0" cellpadding="3px">
	<tr>
		<td>
				<input type="button" value="Select1" id="select1" name="select1" class="normal" onclick="highlightThis(this)">
		</td>
		<td>
				<input type="button" value="Select2" id="select2" name="select2" class="normal" onclick="highlightThis(this)">
		</td>
		<td>
				<input type="button" value="Select3" id="select3" name="select3" class="normal" onclick="highlightThis(this)">
		</td>
		<td>
				<input type="button" value="Select4" id="select4" name="select4" class="normal" onclick="highlightThis(this)">
		</td>
	</tr>
</table>
</BODY>
</HTML>
      This is just an example.. you can do it n no.. of ways...

      Regards
      Ramanan Kalirajan

        Comment

        • sweetneel
          New Member
          • Oct 2008
          • 42
          #3
          thanx a lot Ramanan it works.

            Comment

            • RamananKalirajan
              Contributor
              • Mar 2008
              • 608
              #4
              What i have given is just an example and it is the basic way of doing highlighting.. u can try your own and make it better...


              Regards
              Ramanan Kalirajan

                Comment

                • Dormilich
                  Recognized Expert Expert
                  • Aug 2008
                  • 8694
                  #5
                  Originally posted by RamananKaliraja n
                  u can try your own and make it better...
                  e.g. using "this" inside the function:
                  Code:
                      function highlightThis()
    {
       for(var i=1;i<=4;i++)
       {
// reset all class names to "normal"
         document.getElementById("select"+i).className = "normal";
       }
// set current class name to "highlight"
       this.className = "highlight";
    }

                    Comment

                    • RamananKalirajan
                      Contributor
                      • Mar 2008
                      • 608
                      #6
                      Thanks Dormilich, 'this' keyword.. using it it simplifies more than what i had did so far.. I will follow this way of doing things...

                      Regards
                      Ramanan Kalirajan

                        Comment

                        • Dormilich
                          Recognized Expert Expert
                          • Aug 2008
                          • 8694
                          #7
                          it took me quite a while to understand how OOP works in Javascript.

                            Comment

                            Previous template Next
                            Working...