Tuesday, September 8, 2009

Different sliding Effect using JQuery

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>

Sunday, September 6, 2009

Html checkbox is selected when click on text of checkbox

Select Checkbox when user click only on Checkbox button






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

Select Checkbox when user click on label text and checkbox button






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>