This function password mode set "Readonly" using Javascript function. I have used.When I try to edit password that time will show the text mode and editable otherwise that text are "Readonly".

<input type="text" id="mytextbox" value="click the button below."/>
<input type="button" value="click" onclick="changeText();"/>

function changeText(){
   var text_box = document.getElementById('mytextbox');
    if(text_box.hasAttribute('readonly')){   
        text_box.value = "This text box is editable.";
        text_box.removeAttribute('readonly');
    }else{       
        text_box.value = "This text box is read only.";
        text_box.setAttribute('readonly', 'readonly');   
    }
}

Read more ...

check Password Strength using Jquery in asp.net:
Password strength checking is an easy way to show the strength of user password on the registration forms. It helps users to choose more secure password when filling the forms.

The idea is that every time a user enters a character, the contents is evaluated to test the strength of the password they have entered... I'm sure everyone has seen these before.

That’s all. Here’s the full jQuery code:

<link href="FormValidation.css" rel="stylesheet" type="text/css" />
    <link href="jquery.validate.password.css" rel="stylesheet" type="text/css" />
    <script src="JS/jquery.js" type="text/javascript"></script>
    <script src="JS/jquery.validate.js" type="text/javascript"></script>
    <script src="JS/jquery.validate.password.js" type="text/javascript"></script>

<script language="javascript" type="text/javascript">
    
    
     $(document).ready(function() {
         // validate signup form on keyup and submit
         var validator = $("#divCreateNewUser").validate({
             rules: {
                 username: {
                     required: true,
                     minlength: 2
                 },
                 txtPassword: {
                     password: "#username"
                 },
                 password_confirm: {
                     required: true,
                     equalTo: "#password"
                 },
                 location: {
                     required: true
                 }
             },
             messages: {
                 username: {
                     required: "Enter a username",
                     minlength: jQuery.format("Enter at least {0} characters")
                 },
                 password_confirm: {
                     required: "Repeat your password",
                     minlength: jQuery.format("Enter at least {0} characters"),
                     equalTo: "Enter the same password as above"
                 },
                 location: {
                     required: "Enter a Location"
                 }
             },
             // the errorPlacement has to take the table layout into account
             errorPlacement: function(error, element) {
                 error.prependTo(element.parent().next());
             },
             // set this class to error-labels to indicate valid fields
             success: function(label) {
                 // set &nbsp; as text for IE
                 label.html("&nbsp;").addClass("checked");
             }
         });
     });
</script>

<body>
    <form id="signupform1" runat="server">
    <div id="signupwrap" runat="server">
    <table align="center">
    <tr>
    <td></td>
    <td><b>User Registration</b></td>
    <td></td>
    </tr>
    <tr>
    <td align="right" class="label">UserName:</td>
    <td  class="field"><asp:TextBox ID="username" runat="server"/></td>
     <td class="status"></td>
    </tr>
    <tr>
    <td  align="right" class="label">Password:</td>
    <td  class="field"><asp:TextBox ID="txtPassword" runat="server" TextMode="Password"/></td>
     <td class="status" align="left">
     <div class="password-meter">
        <div class="password-meter-message">&nbsp;</div>
        <div class="password-meter-bg">
         <div class="password-meter-bar"></div>
        </div>
       </div>
     </td>
    </tr>
    <tr><td align="right" class="label">Confirm Password:</td>
    <td  class="field"><asp:TextBox ID="password_confirm" runat="server" TextMode="Password"/></td>
     <td class="status"></td>
    </tr>
   <tr>
    <td align="right" class="label">Location:</td>
    <td  class="field"><asp:TextBox ID="location" runat="server"/></td>
     <td class="status"></td>
    </tr>
    <tr>
    <td></td>
    <td><asp:Button ID="btnSubmit" Text="Submit" runat="server" 
            onclick="btnSubmit_Click" /></td>
     <td></td>
    </tr>
    <tr>
    <td colspan="3" height="20px">
    </td>
    </tr>
    <tr>
    <td></td>
    <td colspan="2">
    
        <table>
   <tr>
   <td>UserName:</td>
   <td><asp:Label ID="lbluser" runat="server"/></td>
   </tr>
   <tr>
   <td>Password:</td>
   <td><asp:Label ID="lblPwd" runat="server"/></td>
   </tr>
    <tr>
   <td>Location:</td>
   <td><asp:Label ID="lblLocation" runat="server"/></td>
   </tr>
    </table>
    </td>
    
    </tr>
    </table>
    </div>
    </form>
</body>

download: click here to download the source code for jquery password strength indicator.

Out-put of the above code 

Read more ...

A script that used to add two textbox values using jQuery:

This is the sample code for add two textbox values and display in one text box buy using jquery:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript">

        $(function () {

            var textBox1 = $('input:text[id$=TextBox1]').keyup(foo);

            var textBox2 = $('input:text[id$=TextBox2]').keyup(foo);      

            function foo() {

                var value1 = textBox1.val();

                var value2 = textBox2.val();              

                var sum = add(value1, value2);

                $('input:text[id$=TextBox3]').val(sum);

            }

            function add() {

                var sum = 0;

                for (var i = 0, j = arguments.length; i < j; i++) {

                    if (IsNumeric(arguments[i])) {

                        sum += parseFloat(arguments[i]);

                    }

                }
                return sum;
            }
            function IsNumeric(input) {

                return (input - 0) == input && input.length > 0;
            }
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <table width="300px" border="1" style="border-collapse:collapse;background-color:#E8DCFF">
    <tr>
        <td>Butter</td>
        <td> <asp:TextBox runat="server" ID="TextBox1"></asp:TextBox></td>
    </tr>
    <tr>
        <td>Cheese</td>
        <td> 
    <asp:TextBox runat="server" ID="TextBox2"></asp:TextBox>
        </td>
    </tr>
    <tr>
        <td>Total</td>
        <td>
    <asp:TextBox runat="server" ID="TextBox3"></asp:TextBox>
        </td>
    </tr>
    </table> 
    </div>    </form>
</body>
</html>

Output:

Read more ...

Scrollbar Colors customization                                         It's uncertain how many browsers are still supporting color scrollbars. I understand IE only supported it for one version, then dropped it with the next. However we will keep the code here for those who wish to learn from it. Add the following script within your head tag and change the color attributes to suit.

<style type="text/css">
body { scrollbar-arrow-color: ffffff; scrollbar-base-color:ffffff; scrollbar-dark-shadow-color: ffffff; scrollbar-track-color: ffffff; scrollbar-face-color: ffffff; scrollbar-shadow-color: ffffff; scrollbar-highlight-color: ffffff; scrollbar-3d-light-color: ffffff; }
</style>

Read more ...

This is one of the method to Change font color "onMouseOver" and "onMouseOut" using(CSS)

<style type="text/css">
<html>
<!-- Created on: 27/09/2012 -->
<head>
  <title></title>
</head>
<body>
 <table onmouseover="document.style.x.color='white'"  border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#008080" width="100%" height="34" bgcolor="#95BED4">
      <tr>
        <td onMouseOver="this.style.backgroundColor='#2172A1';  this.style.cursor='hand';" onMouseOut="this.style.backgroundColor='#95BED4'" width="20%">
         <!-- <P> tag onMouseOver Color -->
  <p align="center"><b><font face="Verdana" color="#2172A1" onmouseover="this.style.color='white'" onmouseout="this.style.color='#2172A1'" size="2">Home</font></b></td>
      </tr>
    </table>
</body>
</html></style>

you can do it like this: make two classes in your stylesheet something like menuon and menuoff.

<style type="text/css">
td.menuon { background-color: #000000; color: #FFFFFF; }
td.menuoff { background-color: #FFFFFF; color: #000000; }
</style>

<td class="menuoff" onmouseover="className='menuon';" onmouseout="className='menuoff';">
</td>

<a href="#" style="text-decoration: none;" onmouseover="this.style.textDecoration = 'underline'" onmouseout="this.style.textDecoration = 'none'">asdasdasdads</a>


<p onMouseOut="this.style.color = 'black';" onMouseOver="this.style.color = 'red';" align="justify">
Your text here to change text on mouseover</p>

Read more ...