JavaScript - Need to change button style when clicked...

Asked By shah zeb on 04-Jan-12 02:58 AM
Hi,
I need to change button style when clicked. and when released bring it to its own old form using jQuery.

Regards,
Riley K replied to shah zeb on 04-Jan-12 03:32 AM
Jitendra Faye replied to shah zeb on 04-Jan-12 03:34 AM
Follow this example-

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
   
protected void Page_Load(object sender, EventArgs e)
   
{
   
}
   
protected void Button1_Click(object sender, EventArgs e)
   
{
       
if (String.IsNullOrEmpty(Request.Form["0"]))
           
Page.ClientScript.RegisterStartupScript(this.GetType(), "EnterText", "document.getElementById('txtAnswer').style.backgroundColor = 'red';", true);
       
else
           
Page.ClientScript.RegisterStartupScript(this.GetType(), "EnterText", "document.getElementById('txtAnswer').style.backgroundColor = 'green';", true);
   
}
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
   
<title></title>
</head>
<body>
   
<form id="form1" runat="server">
   
<div>
       
<input type = "text" id = "txtAnswer" name = "0" style = "width:90;"/>
       
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
   
</div>
   
</form>
</body>
</html>
dipa ahuja replied to shah zeb on 04-Jan-12 03:43 AM
Try this simplest solution

<script type="text/javascript">
    $(document).ready(function () {
      //Change color on mouse down
      $("#buttonId").mousedown(function () {
        $('#buttonId').css({ 'background-color''yellow' });
        return false;
      }); 
    });    
</script> 
 
<asp:Button ID="buttonId" runat="server" Text="Button" />
  

smr replied to shah zeb on 04-Jan-12 04:16 AM
hi

You could just declare the new style in your stylesheet, with the :active pseudoclass.

Should be something like

input[type=button]:active {
  /* type here your rules, i.e. background-color:red; */ 
}
Asked By shah zeb on 04-Jan-12 04:18 AM
thank you
shah zeb replied to dipa ahuja on 04-Jan-12 04:19 AM
thank you it works
dipa ahuja replied to shah zeb on 04-Jan-12 06:15 AM
Your Welcome :)