Different sliding Effect using JQuery

2009-09-08T23:58:00.000-07:00

Apply Sliding Effect using JQuery

Step 1: Download the latest jquery jquery-1.3.2.js

You can download above file from http://docs.jquery.com/Downloading_jQuery

Step 2: Create one default.aspx page

Step 3: Reference the javascript that you download 1.3.2.js

Step 4: There is three different method for sliding

Method 1: Slide Down

    $("#divslidedown").slideDown("slow");

        Description:
          divslidedown-id of div tag
        You can use predefined speed(slow,normal,fast) as a
          parameter in slideDown method.
          You can also use number of milisecond.e.g. slideDown(1000)

Method 2: Slide Up

        $("#divhide").slideUp(3000)

        Description:
          divhide- id of div tag
        You can use predefined speed(slow,normal,fast) as a
          parameter in slideUp method.
          You can also use number of milisecond.e.g. slideDown(1000)

Method 3: slide Toggle

      $("#divtoggle")slideToggle("slow").

    Description:
       divtoggle-id of div tag

            You can use predefined speed(slow,normal,fast) as a
        parameter in slideDown method
        You can also use number of milisecond.e.g. slideToggle(1000)

Page code is here

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://www.webintenta.com/Files/jquery.js" type="text/javascript" ></script>

<script language="javascript" type="text/javascript" >
$(document).ready(function(){


    $("#ashow").click(function () {
        $("#divtest").slideDown("slow");
    });
    $("#ahide").click(function () {
        $("#divhide").slideUp(3000)
    });
    $("#atoggle").click(function () {
        $("#divtoggle").slideToggle("slow")
    });




});
</script>
<style type="text/css" >
    .para{
            background:#de9a44; margin:3px; width:350px;
            height:75px;display:none;
         }
    .hide
    {
        background:#de9a44; margin:3px; width:350px;
        height:75px;display:block;
    }
    .toggle
    {
        background:#de9a44; margin:3px; width:350px;
        height:75px;display:none;
    }
</style>
</head>
<body>
   <h3>Read the description of a method in dark yellow block</h3>
<div>
        <a href="#" id="ashow" >click me(Show Only)</a>
</div>

<div id="divtest" class="para" >
        Show the content. I have used slideDown("slow").
        You can use predefined speed(slow,normal,fast) as a
        parameter in slideDown method.
        You can also use number of milisecond.e.g. slideDown(1000)

</div>
<div>
        <a href="#" id="ahide" >click me(Hide Only)</a>
</div>
<div id="divhide" class="hide" >
        Hide the content. I have used slideUp(3000).
        You can use predefined speed(slow,normal,fast) as a
        parameter in slideDown method
        You can also use number of milisecond.e.g. slideUp(1000)
</div>
<div>
        <a href="#" id="atoggle" >click me(Toggle)</a>
</div>
<div id="divtoggle" class="hide" >
        Show/Hide the content. I have used slideToggle("slow").
        You can use predefined speed(slow,normal,fast) as a
        parameter in slideDown method
        You can also use number of milisecond.e.g. slideToggle(1000)
</div>
<div>Reference: http://docs.jquery.com</div>

</body>
</html>

Html checkbox is selected when click on text of checkbox

2009-09-06T23:47:00.000-07:00

Select Checkbox when user click only on Checkbox button

C#
VB.NET
SQL Server

Description : There is no for properties of label of above example

Eg: < input type='checkbox' id='chkbox1' > < label > Apple < /label >

Select Checkbox when user click on label text and checkbox button

Apple

Mango

Orange

Description : Add for properties of lable and assing input id to for properties.
Eg: < input type='checkbox' id='chkbox1' > < label for='chkbox1' > Apple < /label >

Drop down list box with Group(HTML CONTROL)

Description:
Eg. Syntax of select box is
<select id="sexp1" >
<optgroup label='Group 1' >
<option value="1">item 1</option>
<option value="1">item 2</option>
</optgroup>
<optgroup label='Group 2' >
<option value="1">item 1</option>
<option value="1">item 2</option>
</optgroup>
</select>

ASP.NET Example