Friday, 30 December 2011

Disappear a pane - jquery

Disappear a pane when you click.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Disappear</title>

<script type="text/javascript" src="../html/jquery.js"></script>

<script type="text/javascript">
$(document).ready(function(){
                          
    $(".pane .delete").click(function(){
        $(this).parents(".pane").animate({ opacity: 'hide' }, "slow");
    });

});
</script>

<style type="text/css">
body {
    margin: 10px auto;
    width: 470px;
}
h3 {
    margin: 0;
    padding: 0 0 .3em;
}
p {
    margin: 0;
    padding: 0 0 .5em;
}
.pane {
    background:#999966;
    padding: 10px 20px 10px;
    position: relative;
    border-top: solid 2px #c4df9b;
}
.pane .delete { color:#CC0000; text-decoration:underline;
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
}
</style>
</head>

<body>
<div class="pane">
    <h3> heading1</h3>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>
    <div class="delete">Click for Disappear</div>
</div>
<div class="pane">
    <h3> heading2</h3>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>
    <<div class="delete">Click for Disappear</div>
</div>
<div class="pane">
    <h3>heading3</h3>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>
    <div class="delete">Click for Disappear</div>
</div>
<div class="pane">
    <h3> heading4</h3>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>
    <div class="delete">Click for Disappear</div>
</div>
<div class="pane">
    <h3> heading5</h3>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>
    <div class="delete">Click for Disappear</div>
</div>
</body>
</html>
Posted by at No comments:
Labels:

Wednesday, 28 December 2011

Example of Sprite method in a menu

Example: Sprite method in a menu


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>sprite</title>
<link href="css/13aug_sprite.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery_learn/script/jquery-1.2.6.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
    $(".nav1 ul li.aboutlist a").hover(function(){
   

        $(this).next("div").slideDown();
       
    },
    function(){
    $(this).next("div").slideUp();   
    }
    );
});
</script>
</head>

<body>
<div class="container">
<div class="nav">
<ul>
<li><a href="#" class="home"> home</a></li>
<li><a href="#" class="why"> why</a></li>
<li><a href="#" class="community"> community</a></li>
<li><a href="#" class="video"> video</a></li>

<li><a href="#" class="support"> support</a></li>
<li><a href="#" class="contact"> contact</a></li>
</ul>
</div>

</body>
</html>
Posted by at No comments:
Labels:

change background of each cell

Example: change background of each cell

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>change background of each cell</title>

<script type="text/javascript" src="script/jquery-1.2.6.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
    $(".tab li").hover(function() {
        $(this).css('background-color','red');
    }, function() {
        $(this).css('background-color','#ccc');
    });
   
    $(".menu li a").click(function() {
        $(".menu li a").css('background-color','');
        $(this).css('background-color','red');   
        return false;   
    });
});
</script>
<style type="text/css">
body {
    margin: 10px auto;
    width: 570px;
    font: 75%/120% Arial, Helvetica, sans-serif;
}
.menu {
    margin: 100px 0 0;
    padding: 0;
    list-style: none;
}
.menu li {
    padding: 0;
    margin: 0 2px;
    float: left;
    position: relative;
    text-align: center;
}
.menu a {
    padding: 14px 10px;
    display: block;
    color: #000000;
    width: 144px;
    text-decoration: none;
    font-weight: bold;
   
    border:1px solid red;
}
.menu li em {
    background: url(images/hover.png) no-repeat;
     border:1px solid red;
    width: 180px;
    height: 45px;
    position: absolute;
    top: -85px;
    left: -15px;
    text-align: center;
    padding: 20px 12px 10px;
    font-style: normal;
    z-index: 2;
    display: none;
}
</style>
</head>

<body>
<h3>change background of each cell</h3>
<ul class="menu tab">
    <li>
        <a href="#">Web Designer Wall</a>       
        <em style="top: -85px; display: none;">A wall of design ideas, web trends, and tutorials</em>
    </li>
    <li>
        <a href="#">Best Web Gallery</a>
        <em style="top: -85px; display: none;">Featuring the best CSS and Flash web sites</em>
    </li>
    <li>
        <a href="#">N.Design Studio</a>
        <em style="top: -85px; display: none;">Blog and design portfolio of WDW designer, Nick La</em>
    </li>
</ul>
</body>
</html>
Posted by at No comments:
Labels:

Thursday, 15 December 2011

jQuery AJAX

  • jQuery has a rich library of methods (functions) for AJAX development.
  • AJAX = Asynchronous JavaScript and XML.

    AJAX is a technique for creating fast and dynamic web pages.

    AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page.
  • Query provides a rich set of methods for AJAX web development.
  • With jQuery AJAX, you can request TXT, HTML, XML or JSON data from a remote server using both HTTP Get and HTTP Post.
  • And you can load remote data directly into selected HTML elements of your web page!
  • The jQuery load() method is a simple (but very powerful) AJAX function. It has the following syntax: $(selector).load(url,data,callback)
    Use the selector to define the HTML element(s) to change, and the url parameter to specify a web address for your data.

     Only if you want to send data to the server, you need to use the data parameter. Only if you need to trigger a function after completion, you will use the callback parameter.
     
    Example:
    <html>
    <head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $("button").click(function(){
        $("div").load('test1.txt');
      });
    });
    </script>
    </head>
    <body>

    <div><h2>Let AJAX change this text</h2></div>
    <button>Change Content</button>

    </body>
    </html>

    Low Level AJAX

    $.ajax(options) is the syntax of the low level AJAX function.

    $.ajax offers more functionality than higher level functions like load, get, and post, but it is also more difficult to use.
    The option parameter takes name|value pairs defining url data, passwords, data types, filters, character sets, timeout and error functions.

    Example:
    <html>
    <head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    $("button").click(function(){
      $.ajax({url:"test1.txt", success:function(result){
        $("div").html(result);
      }});
    });});
    </script>
    </head>
    <body>

    <div><h2>Let AJAX change this text</h2></div>
    <button>Change Content</button>
    </body>
    </html>

    jQuery AJAX Methods From This Page:

    Request Description
    $(selector).load(url,data,callback) Load remote data into selected elements
    $.ajax(options) Load remote data into an XMLHttpRequest object


Posted by at No comments:
Labels:

jQuery CSS Manipulation

jQuery css() Method

jQuery has one important method for CSS manipulation: css()
The css() method has three different syntaxes, to perform different tasks.
  • css(name) - Return CSS property value
  • css(name,value) - Set CSS property and value
  • css({properties}) - Set multiple CSS properties and values

1. Return CSS Property

Use css(name) to return the specified CSS property value of the FIRST matched element:

syntax:

$(this).css("background-color"); 
 
Example:

 <html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("div").click(function(){
    $("p").html($(this).css("background-color"));
  });
});
</script>
</head>

<body>
<div style="width:100px;height:100px;background:#ff0000"></div>
<p>Click in the red box to return the background color.</p>
</body>
</html>

2. Set CSS Property and Value

Use css(name,value) to set the specified CSS property for ALL matched elements:

syntax:

$("p").css("background-color","yellow"); 
 
Example:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").css("background-color","blue");
  });
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html> 

3.Set Multiple CSS Property/Value Pairs

Use css({properties}) to set one or more CSS property/value pairs for the selected elements:

syntax:
 
$("p").css({"background-color":"yellow","font-size":"200%"}); 
 
Example:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").css({"background-color":"blue","font-size":"200%"});
  });
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>

 Size Manipulation Examples:

jQuery has two important methods for size manipulation.
  • height()
  • width()

 


1. The height() method sets the height of all matching elements:
 
Syntax:
 
$("#div1").height("200px"); 
 
 Example:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").height("200px");
  });
});
</script>
</head>

<body>
<div id="div1" style="background:yellow;height:100px;width:100px">HELLO</div>
<div style="background:red;height:100px;width:100px">W3SCHOOLS</div>
<button>Click me</button>
</body>
</html>

 
1. The width() method sets the widthof all matching elements: 

Syntax:

$("#div2").width("300px"); 
 
Example:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("#div2").width("300px");
  });
});
</script>
</head>

<body>
<div style="background:yellow;height:100px;width:100px">HELLO</div>
<div id="div2" style="background:red;height:100px;width:100px">W3SCHOOLS</div>
<button>Click me</button>
</body>
</html>

 

jQuery CSS Methods

CSS Properties Description
1. $(selector).css(name) Get the style property value of the first matched element
2.$(selector).css(name,value) Set the value of one style property for matched elements
3. $(selector).css({properties}) Set multiple style properties for matched elements
4. $(selector).height(value) Set the height of matched elements
5. $(selector).width(value) Set the width of matched elements
Posted by at No comments:
Labels:

jQuery HTML Manipulation


1. Changing HTML Content

jQuery contains powerful methods (functions) for changing and manipulating HTML elements and attributes.

  • $(selector).html(content)

The html() method changes the contents (innerHTML) of matching HTML elements.

syntax:

$("p").html("manipulate"); 

Example:

 <html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").html("manipulate");
  });
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>

2. Adding HTML content

The append() method appends content to the inside of matching HTML elements.
  • $(selector).append(content)

The prepend() method "prepends" content to the inside of  matching HTML elements.
  • $(selector).prepend(content)

syntax:

$("p").append(" addcontent"); 

Example: 

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").append(" <b>for addcontent</b>.");
  });
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>

3. Adding HTML content: after(), before()

The after() method inserts HTML content after all matching elements.
  • $(selector).after(content)
The before() method inserts HTML content before all matching elements. 
  • $(selector).before(content)

syntax:

$("p").after(" content-add.");

Example:

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").after(" to add content.");
  });
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>

jQuery HTML Manipulation Methods:

Function Description
1. $(selector).html(content) Changes the (inner) HTML of selected elements
2. $(selector).append(content) Appends content to the (inner) HTML of selected elements
3. $(selector).after(content) Adds HTML after selected elements 

Posted by at No comments:
Labels:

jQuery Callback Functions


  • A callback function is executed after the current animation is 100% finished.
  • JavaScript statements are executed line by line. However, with animations, the next line of code can be run even though the animation is not finished. This can create errors.
  • To prevent this, you can create a callback function.
  • A callback function is executed after the current animation (effect) is finished.

jQuery Callback Example

The callback parameter is a function to be executed after the hide effect is completed:
  • $(selector).hide(speed,callback)

Syntax:

$("p").hide(1000,function(){
  alert("The paragraph is now hidden");
});

  Example:
 
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide(1000,function(){
      alert("The paragraph is now hidden");
    });
  });
});
</script>
</head>
<body>
<button>Hide</button>
<p>This is a paragraph with little content.</p>
</body>
</html>

Example without Callback:

Without a callback parameter, the alert box is displayed before the hide effect is completed:
 
  syntax:
 
 $("p").hide(1000);
alert("The paragraph is now hidden");
 
   Example:

 


<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide(1000);
    alert("The paragraph is now hidden");
  });
});
</script>
</head>
<body>
<button>Hide</button>
<p>This is a paragraph with little content.</p>
</body>
</html>


Posted by at No comments:
Labels:

jQuery Effects

Effects:
  •  Hide, Show, Toggle, Slide, Fade, and Animate.
Examples:
  1. jQuery hide() Demonstrates a simple jQuery hide() method.
  2. jQuery hide()  Another hide() demonstration. How to hide parts of text.
  3. jQuery slideToggle()  Demonstrates a simple slide panel effect.
  4. jQuery fadeTo()  Demonstrates a simple jQuery fadeTo() method.
  5. jQuery animate()  Demonstrates a simple jQuery animate() method.

1) jQuery Hide and Show

With jQuery, you can hide and show HTML elements with the hide() and show() methods:
syntax:

$("#hide").click(function(){
  $("p").hide();
});
$("#show").click(function(){
  $("p").show();
});


 Example:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#hide").click(function(){
    $("p").hide();
  });
  $("#show").click(function(){
    $("p").show();
  });
});
</script>
</head>
<body>
<p>If you click on the "Hide" button, I will disappear.</p>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>



2) Both hide() and show() can take the two optional parameters:speed and callback.



  • $(selector).hide(speed,callback)
  • $(selector).show(speed,callback)

The speed parameter specifies the speed of the hiding/showing, and can take the following values: "slow", "fast", "normal", or milliseconds:

Syntax:

  $("button").click(function(){
  $("p").hide(1000);
});
Example:

 <html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide(1000);
  });
});
</script>
</head>
<body>
<button>Hide</button>
<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>
</body>
</html>

3)jQuery Toggle

The jQuery toggle() method toggles the visibility of HTML elements using the show() or hide() methods.
Shown elements are hidden and hidden elements are shown.
The callback parameter is the name of a function to be executed after the hide (or show) method completes.

  • $(selector).toggle(speed,callback)
  • The speed parameter can take the following values: "slow", "fast", "normal", or milliseconds.

Syntax:

$("button").click(function(){
  $("p").toggle();
});

Example

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").toggle();
  });
});
</script>
</head>
<body>

<button>Toggle</button>
<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>
</body>
</html>

4) jQuery Slide - slideDown, slideUp, slideToggle

The jQuery slide methods gradually change the height for selected elements.
jQuery has the following slide methods:

  • $(selector).slideDown(speed,callback)
  • $(selector).slideUp(speed,callback)
  • $(selector).slideToggle(speed,callback)
The speed parameter can take the following values: "slow", "fast", "normal", or milliseconds.
The callback parameter is the name of a function to be executed after the function completes.

slideDown() Example

Syntax:
 $(".flip").click(function(){
  $(".panel").slideDown();
});

 Example:

<html>
<head>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".flip").click(function(){
    $(".panel").slideDown("slow");
  });
});
</script>

<style type="text/css">
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
display:none;
}
</style>
</head>

<body>

<div class="panel">
<p>Because time is valuable, we deliver quick and easy learning.</p>
<p>At W3Schools, you can study everything you need to learn, in an accessible and handy format.</p>
</div>

<p class="flip">Show Panel</p>

</body>
</html>


slideUp() Example

Syntax:
 $(".flip").click(function(){
  $(".panel").slideUp()
})

 Example:
<html>
<head>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".flip").click(function(){
    $(".panel").slideUp("slow");
  });
});
</script>

<style type="text/css">
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
}
</style>
</head>

<body>

<div class="panel">
<p>Because time is valuable, we deliver quick and easy learning.</p>
<p>At W3Schools, you can study everything you need to learn, in an accessible and handy format.</p>
</div>

<p class="flip">Hide Panel</p>

</body>
</html>



slideToggle() Example

syntax:
$(".flip").click(function(){
  $(".panel").slideToggle();
});
Example:

 
<html>
<head>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".flip").click(function(){
    $(".panel").slideToggle("slow");
  });
});
</script>

<style type="text/css">
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
display:none;
}
</style>
</head>

<body>

<div class="panel">
<p>Because time is valuable, we deliver quick and easy learning.</p>
<p>At W3Schools, you can study everything you need to learn, in an accessible and handy format.</p>
</div>

<p class="flip">Show/Hide Panel</p>

</body>
</html>



5) jQuery Fade - fadeIn, fadeOut, fadeTo

The jQuery fade methods gradually change the opacity for selected elements.
jQuery has the following fade methods:

  • $(selector).fadeIn(speed,callback)
  • $(selector).fadeOut(speed,callback)
  • $(selector).fadeTo(speed,opacity,callback)
The speed parameter can take the following values: "slow", "fast", "normal", or milliseconds.
The opacity parameter in the fadeTo() method allows fading to a given opacity.
The callback parameter is the name of a function to be executed after the function completes.

fadeTo() Example

syntax:
$("button").click(function(){
  $("div").fadeTo("slow",0.25);
});
Example:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("div").fadeTo("slow",0.25);
  });
});
</script>
</head>

<body>
<div style="background:red;width:300px;height:300px">
<button>Click to Fade</button>
</div>
</body>
</html>

fadeOut() Example

syntax:
 $("button").click(function(){
  $("div").fadeOut(4000);
});
Example:
 
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("div").click(function(){
    $(this).fadeOut(4000);
  });
});
</script>
</head>

<body>
<div style="background:red;width:200px">CLICK ME AWAY!</div>
<p>If you click on the box above, it will be removed.</p>
</body>

</html>

6) jQuery Custom Animations

The syntax of jQuery's method for making custom animations is:

$(selector).animate({params},[duration],[easing],[callback])
The key parameter is params. It defines the CSS properties that will be animated. Many properties can be animated at the same time:

animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"});
The second parameter is duration. It specifies the speed of the animation. Possible values are "fast", "slow", "normal", or milliseconds.

Note: HTML elements are positioned static by default and cannot be moved.
To make elements moveable, set the CSS position property to fixed, relative or absolute.

Syntax:1

<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({height:300},"slow");
    $("div").animate({width:300},"slow");
    $("div").animate({height:100},"slow");
    $("div").animate({width:100},"slow");
  });
});
</script> 

Example:

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({height:300},"slow");
    $("div").animate({width:300},"slow");
    $("div").animate({height:100},"slow");
    $("div").animate({width:100},"slow");
  });
});
</script>
</head>

<body>
<button>Start Animation</button>
<br /><br />
<div style="background:#f0f0f0;height:100px;width:100px;position:relative">
</div>
</body>
</html>

Syntax:2

<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({left:"100px"},"slow");
    $("div").animate({fontSize:"3em"},"slow");
  });
});
</script> 

Example:

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({left:"100px"},"slow");
    $("div").animate({fontSize:"3em"},"slow");
  });
});
</script>
</head>
<body>

<button>Start Animation</button>
<br /><br />
<div style="background:#98bf21;height:100px;width:200px;position:relative">HELLO</div>
</body>
</html>
 

jQuery Effects

Here are some examples of effect functions in jQuery:

Function
Description
$(selector).hide()
Hide selected elements
$(selector).show()
Show selected elements
$(selector).toggle()
Toggle (between hide and show) selected elements
$(selector).slideDown()
Slide-down (show) selected elements
$(selector).slideUp()
Slide-up (hide) selected elements
$(selector).slideToggle()
Toggle slide-up and slide-down of selected elements
$(selector).fadeIn()
Fade in selected elements
$(selector).fadeOut()
Fade out selected elements
$(selector).fadeTo()
Fade out selected elements to a given opacity
$(selector).animate()
Run a custom animation on selected elements

 

Posted by at No comments:
Labels:

jQuery Events


jQuery Event Functions

1. The jQuery event handling methods are core functions in jQuery.
Event handlers are method that are called when "something happens" in HTML. The term is often used for "triggered (or "fired") by an event". 
It is common to put jQuery code into event handler methods in the <head> section:

2. In the example below, a function is called when the click event for the button is triggered:
$("button").click(function() {..some code... } )
The method hides all <p> elements:
$("p").hide();

Example1

syntax: 
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html> 

Functions In a Separate File

If your website contains a lot of pages, and you want your jQuery functions to be easy to maintain, put your jQuery functions in a separate .js file.
When we demonstrate jQuery here, the functions are added directly into the <head> section, However, sometimes it is preferable to place them in a separate file, like this (refer to the file with the src attribute):

Example

<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="my_jquery_functions.js"></script>
</head> 

jQuery Name Conflicts

  • jQuery uses the $ sign as a shortcut for jQuery.
  • Some other JavaScript libraries also use the dollar sign for their functions.
  • The jQuery noConflict() method specifies a custom name (like jq), instead of using the dollar sign.
 syntax:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
var jq=jQuery.noConflict();
jq(document).ready(function(){
  jq("button").click(function(){
    jq("p").hide();
  });
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>

jQuery Events

Here are some examples of event methods in jQuery: 
        Event Method
        Description
  • $(document).ready(function)  
  • Binds a function to the ready event of a document
    (when the document is finished loading)
  • $(selector).click(function)
  • Triggers, or binds a function to the click event of selected elements
  • $(selector).dblclick(function)
  • Triggers, or binds a function to the double click event of selected elements
  • $(selector).focus(function)
  • Triggers, or binds a function to the focus event of selected elements
  • $(selector).mouseover(function)
  • Triggers, or binds a function to the mouseover event of selected elements

Posted by at No comments:
Labels:

jQuery Selectors

jQuery selectors allow you to select and manipulate HTML elements as a group or as a single element.

jQuery Element Selectors

jQuery uses CSS selectors to select HTML elements.
  • $("p") selects all <p> elements.
  • $("p.intro") selects all <p> elements with class="intro".
  • $("p#demo") selects all <p> elements with id="demo".

jQuery Attribute Selectors

jQuery uses XPath expressions to select elements with given attributes.
  • $("[href]") select all elements with an href attribute.
  • $("[href='#']") select all elements with an href value equal to "#".
  • $("[href!='#']") select all elements with an href attribute NOT equal to "#".
  • $("[href$='.jpg']") select all elements with an href attribute that ends with ".jpg".

    jQuery CSS Selectors

    jQuery CSS selectors can be used to change CSS properties for HTML elements.
    The following example changes the background-color of all p elements to red :

    syntax:
    <html>
    <head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $("button").click(function(){
        $("p").css("background-color","red");
      });
    });
    </script>
    </head>

    <body>
    <h2>This is a heading</h2>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
    <button>Click me</button>
    </body>
    </html>

    Example with syntax:

    $(this) Current HTML element
    $("p") All <p> elements
    $("p.intro") All <p> elements with class="intro"
    $("p#intro") All <p> elements with id="intro"
    $("p#intro:first") The first <p> element with id="intro"
    $(".intro") All elements with class="intro"
    $("#intro") The first element with id="intro"
    $("ul li:first") The first <li> element of each <ul>
    $("[href$='.jpg']") All elements with an href attribute that ends with ".jpg"
    $("div#intro .head") All elements with class="head" inside a <div> element with id="intro"

     
Posted by at No comments:
Labels:

jQuery Example

Example 1:
The following example demonstrates the jQuery hide() method, hiding all <p> elements in an HTML document.

syntax:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html> 
Example 2:
 If you don't want to store the jQuery library on your own computer, you can use the hosted jQuery library from Google or Microsoft.

syntax: Google

<html>
<head>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>

syntax: Microsoft
 <html>
<head>
<script type="text/javascript"
src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>

jQuery Examples Syntax:

jQuery uses a combination of XPath and CSS selector syntax.
The jQuery syntax is tailor made for selecting HTML elements and perform some action on the element(s).
Basic syntax is: $(selector).action()
  • A dollar sign to define jQuery
  • A (selector) to "query (or find)" HTML elements
  • A jQuery action() to be performed on the element(s)

  1. $(this).hide() - Demonstrates the jQuery hide() method, hiding the current HTML element.
  2. $("#div").hide() - Demonstrates the jQuery hide() method, hiding the element with id="test".
  3. $("p").hide() - Demonstrates the jQuery hide() method, hiding all <p> elements.
  4. $(".div").hide() - Demonstrates the jQuery hide() method, hiding all elements with class="test".

 

The Document Ready Function

All jQuery methods, in our examples, are inside a document.ready() function.
This is to prevent any jQuery code from running before the document is finished loading (is ready).

Syntax:

$(document).ready(function(){

   // jQuery functions go here...

});

 

jQuery Syntax Examples:

1. $(this).hide()
Demonstrates the jQuery hide() method, hiding the current HTML element.

Example:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $(this).hide();
  });
});
</script>
</head>

<body>
<button>Click me</button>
</body>
</html>

2. $("p").hide()
Demonstrates the jQuery hide() method, hiding all <p> elements.

Example:  
 <html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>

3. $(".test").hide()
Demonstrates the jQuery hide() method, hiding all elements, with class="test".

Example:   <html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $(".test").hide();
  });
});
</script>
</head>
<body>

<h2 class="test">This is a heading</h2>
<p class="test">This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>

4. $("#test").hide()
Demonstrates the jQuery hide() method, hiding the element, with id="test".

Example:   <html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p id="test">This is another paragraph.</p>
<button>Click me</button>
</body>

</html>

Hiding - Sliding- Fading

  1. jQuery fadeOut()
Demonstrates a simple jQuery fadeout() method.

Example:
  <html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#test").click(function(){
  $(this).fadeOut();
  });
});
</script>
</head>

<body>
<div id="test" style="background:yellow;width:200px">CLICK ME AWAY!</div>
<p>If you click on the box above, it will be removed.</p>
</body>

</html>

  1. jQuery hide()
Demonstrates a simple jQuery hide() method.

Example: 
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
</body>
</html>

  1. Hide explanations
Demonstrates how to hide parts of text.

Example: 
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
</body>
</html>

  1. Slide panel
Demonstrates a simple Slide Panel effect.

Example: 
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".ex .hide").click(function(){
    $(this).parents(".ex").hide("slow");
  });
});
</script>
<style type="text/css">
div.ex
{
background-color:#e5eecc;
padding:7px;
border:solid 1px #c3c3c3;
}
</style>
</head>
<body>

<h3>Island Trading</h3>
<div class="ex">
<button class="hide">Hide me</button>
<p>Contact: Helen Bennett<br />
Garden House Crowther Way<br />
London</p>
</div>

<h3>Paris spécialités</h3>
<div class="ex">
<button class="hide">Hide me</button>
<p>Contact: Marie Bertrand<br />
265, Boulevard Charonne<br />
Paris</p>
</div>

</body>
</html>

  1. jQuery animate()
Demonstrates a simple jQuery animate() method.

Example: 
<html>
<head>
&lt;script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({height:300},"slow");
    $("div").animate({width:300},"slow");
    $("div").animate({height:100},"slow");
    $("div").animate({width:100},"slow");
  });
});
&lt;/script>
</head>

<body>
<button>Start Animation</button>
<br /><br />
<div style="background:#98bf21;height:100px;width:100px;position:relative">
</div>
</body>
</html>



 


Posted by at No comments:
Labels:
Subscribe to: Comments (Atom)