aspx Tutorial

NET Articles,jQuery demo, asp.net with jQuery, online tutorial,Jquery, SilverLight, Javascript, asp.net,JSON, MVC,.NET Articles,demo, Web Services,
Advertise Here

Toolbar

Get our toolbar!

Advertize



Posted by Aamir Hasan   on Thursday, November 4, 2010 Total Views:  

There are lots of factor’s you have to see when you are going to design a website. Website should be human readable and interact the site so user will spend more time on your website. Style is also one big factor of your web site to interact the users. Website should be human readable. In this example I have create a simple form style, when you focus on input text box, jQuery focus event will add CSS class on focus textbox.

Here’s an example


<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
   <title>Change style effect on Input form using jQuery</title>
   <style type="text/css">
       html,body,table
       {
           font-family: Verdana;
           font-size: 12px;
       }
       h2
       {
           font-size: 1.5em;
           line-height: 1em;
       }
       input
       {
           background-color: #f9f9f9;
           border: 1px solid #eee;
           color: #999;
       }
       .add-focus
       {
           border: 1px solid #eaeaea;
           background-color: White;
           color: #666;
       }
   </style>
   <script src="http://code.jquery.com/jquery-1.4.3.min.js" type="text/javascript"></script>
   <script language="javascript">
       $(document).ready(function () {
           $('input[type="text"]').focus(function () {
               $(this).addClass("add-focus");
           });
           $('input[type="text"]').blur(function () {
               $(this).removeClass("add-focus");
           });

       });
  
   </script>
</head>
<body>
   <form id="form1" runat="server">
   <div>
       <h2>
           Change style effect on Input form using jQuery
       </h2>
       <p>
           <table width="500" border="0" cellspacing="0" cellpadding="0">
               <tr>
                   <th width="150" height="25" align="left" valign="top" scope="col">
                       Username:
                   </th>
                   <th width="350" height="25" align="left" valign="top" scope="col">
                       <asp:TextBox ID="tbUsername" runat="server" />
                   </th>
               </tr>
               <tr>
                   <th height="25" align="left" valign="top" scope="col">
                       Email:
                   </th>
                   <th height="25" align="left" valign="top" scope="col">
                       <asp:TextBox ID="tbEmail" runat="server" />
                   </th>
               </tr>
               <tr>
                   <th height="25" align="left" valign="top" scope="col">
                       Password:
                   </th>
                   <th height="25" align="left" valign="top" scope="col">
                       <asp:TextBox ID="tbpassword" runat="server" TextMode="Password" />
                   </th>
               </tr>
               <tr>
                   <th height="25" align="left" valign="top" scope="col">
                       Retype password:
                   </th>
                   <th height="25" align="left" valign="top" scope="col">
                       <asp:TextBox ID="tbRpassword" runat="server" TextMode="Password" />
                   </th>
               </tr>
               <tr>
                   <th height="25" align="left" valign="top" scope="col">
                       &nbsp;
                   </th>
                   <th height="25" align="left" valign="top" scope="col">
                       <input id="btSubmit" type="button" value="Submit" />
                   </th>
               </tr>
           </table>
       </p>
   </div>
   </form>
</body>
</html>

Output

Download

FormStyle.zip (1.21 kb)

Live demo

Category: All | asp.net | HTML | jQuery
Protected by Copyscape Online Plagiarism Tool

Comments (1) -

Desmond Rottier
Desmond Rottier United States
7/20/2015 9:28:29 PM #

Very interesting info!Perfect just what I was looking for!

Add comment

  Country flag

biuquote
  • Comment
  • Preview
Loading

Advertizement 1
Advertizement 2
Advertizement 3
Advertizement 4
Advertizement 5