Tuesday, 21 January 2014

How to add watermark effect on text input using Jquery?

Description:

In this article, I will explain how to add default label to textbox using Jquery.  

Nowadays, the most popular web design trend is adding watermark effects as instructions with textbox. It is very effective method to attract the user and increase the website usability.

Adding instruction with textbox fields will provide user friendly access for the website. We can do this by setting default text in the input fields. Default text appears when the field is empty.

When the input got focus, the default label disappears and enabling user to edit the textbox.

If no value is entered, again the default label will appear.

Watermark effect means, adding default text to the fields.

Example program:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .watermarkstyle
        {
            color: lightgrey;
        }
    </style>
    <script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <script type="text/javascript">
        $(document).ready(function () {
            var val = "Enter Phone No";
            if ($("#txtPhoneNo").val() == "") {
                $("#txtPhoneNo").val(val);
            }
            $("#txtPhoneNo").focus(function () {
                if (this.value == val) {
                    this.value = "";
                    $("#txtPhoneNo").removeClass("watermarkstyle ");
                }
            });
            $("#txtPhoneNo").blur(function () {
                if (this.value == "") {
                    this.value = val;
                    $("#txtPhoneNo").addClass("watermarkstyle ");
                }
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="txtPhoneNo" CssClass=" watermarkstyle " runat="server"></asp:TextBox>
    </div>
    </form>
</body>
</html>


Watermark input style using Jquery, adding default label on input fields,Jquery watermark effect on text input, Textbox watermark effect in asp,net using Jquery, Add default text to textbox using watermark effect, Textbox watermark effect with default value, Default text label in textbox using Jquery
at No comments:

How to Highlight gridview row using Jquery?

Description:

In this article, I will explain how to highlight gridview row using Jquery.  

As we know, gridview is a powerful control to display data in tabular format. But some client side features makes user unhappy.

Highlighting gridview row on mouse over event not provided with gridview control. In order to overcome this, we are using Jquery.

When mouse is moved over gridview row, background color is changed and gridrow looks highlighted. When mouse is moved out, color is changed and it will back to normal.

In order to implement highlight gridview row, mouse hover() event and mouse click() event is used in the following program.

Example Program:

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <style type="text/css">
        .Highlightgridrowsonclick
        {
            background-color: green;
            cursor: pointer;
        }
        .Highlightgridrowsonhover
        {
            background-color: red;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            $("tr").filter(function () {
                return $('td', this).length && !$('table', this).length
            }).click(function () {
                $(this).toggleClass('Highlightgridrowsonclick');
            });
            $("#GridView1 tr").mouseover(function () {
                $(this).addClass("Highlightgridrowsonhover");
            });
            $("#GridView1 tr").mouseout(function () {
                $(this).removeClass("Highlightgridrowsonhover");
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:GridView ID="GridView1" runat="server">
        </asp:GridView>
    </div>
    </form>
</body>
</html>

Code Behind

 protected void Page_Load(object sender, EventArgs e)
        {
            SqlConnection con = new SqlConnection("Data Source=----;Initial Catalog=dbname;User ID=uid;Password=pwd;");

            SqlCommand cmd = new SqlCommand("select * from sample", con);
            DataSet ds = new DataSet();
            SqlDataAdapter da = new SqlDataAdapter(cmd);
            da.Fill(ds);
            GridView1.DataSource = ds;
            GridView1.DataBind();
        }

In the above program, I am highlighting gridview row with mousemove() method and mouseclick() method.
Highlight a row in gridview using Jquery, Highlight gridview row on mousehover using Jquery, Jquery Highlight gridview row, Highlight row on mouseover using css and Jquery, Highlight gridview selected row, Highlight gridview row by clicking anywhere in the row,  Select row on mouse click in gridview,  Select row in gridview on click
at No comments: