How to Create a Easy Jquery Auto Image Rotator

Hi Friends here is a simple way of creating a Jquery Image Rotator.Before showing you how to create it lets see some basic functionalities of the Image Rotator Properties and Associated Parameters.
Usage:
jQuery(imgElement).rotate(angleValue)
jQuery(imgElement).rotate(parameters)
jQuery(imgElement).rotateAnimation(parameters)
jQuery(imgElement).rotateAnimation(parameters)


Returns:
jQueryRotateElement - !!! NOTICE !!! function return rotateElement instance to help connect events with actually created 'rotation' element.

Parameters:

  • ({angle:angleValue,
  • [animateAngle:animateAngleValue],
  • [maxAngle:maxAngleValue],
  • [minAngle:minAngleValue],
  • [callback:callbackFunction],
  • [bind:[{event: function},{event:function} ] })




Use a $document.ready() function to load the JQuery Cycle rotator effects
$(document).ready(function()
{
$('#image').rotate(-25);
});
Some Other Useful Examples:

$(document).ready(function()
{
var rot=$('#image3').rotate({maxAngle:50,minAngle:-55,
bind:
[
{"mouseover":function(){rot[0].rotateAnimation(50);}},
{"mouseout":function(){rot[0].rotateAnimation(-50);}}
]
});
});

Example 2:

$(document).ready(function()
{
$('#image2').rotate({angle:5});
});

Labels: , ,

How to Load Content from text file to Browser Using JQuery

In this Tutorial we will show you how to Display the text data which is there in some text file say (mytext.txt) in the Browser on click of the button.
 Step 1: Create a text file with name as mytext.txt
 Step 2:Copy the below content in the text file
            Hi!!! Welcome to the World of JQuery Programming!!
   How do you Feel about JQuery?
   Seems to be working Great right!!?
   Keep Going!!!
Step 3: Create a HTML page say loadcontent.html and copy the below code in that file
         LoadContent Example Using Jquery                                              


<html >
<head>
<title>LoadContent Example Using Jquery</title>
<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script type="text/javascript">
function Displaycontent()
{
$.ajax({
url : "textContent.php",
success : function (data) {
$("#contentArea").html(data);
}
});
}
</script>
</head>
<body>
<table width="100%" >
<tr><td> </td><td> </td></tr>
<tr><td> </td><td> </td></tr>
<tr><td width="20%" > </td><td style="color:Yellow;"

width="60%">
 see How Jquery Works</td></tr>
<tr><td> </td><td ><input type="button" value="Load Content"

onClick="
Displaycontent();"> <span

style="color:Yellow;"></span></td></tr>
<tr><td> </td><td>
<textarea id="contentArea" rows="6" cols="100"></textarea>
</td>
</tr>
</table>
</body>
</html>

Explanation:
Code Part 1:
function Displaycontent()
{
$.ajax({
url : "textContent.php",
success : function (data) {
$("#contentArea").html(data);
}
});
}
This Part of JQuery code retrives the Data from the Server and displays it in the text area
The Remaining part of the code deals with the creation of table and text area which is related to HTML concepts so i am not explaining those things here.
Labels: , ,

Hello World Using JQuery Selector

In This Example we will Show you how to Display a alert when a link is clicked

Hello World Alert Using JQuery                                           
<html>                                                           
 <head>
 <title>Hello World Alert Using JQuery</title>
 <script type="text/javascript" src="jquery-1.2.6.min.js"></script>  

 <script type="text/javascript">
 $(document).ready(function(){
 $("a").click(function()
 {
 alert("Hello world! you have called me");
 });
});                             
 </script>                                                              
 </head>                                                                
 <body>   
 <a href=””>Click Me for Saying Hello</a>
  </body>                                                                
 </html>


Explanation:
 Code Part1 :
 The Above piece of code tells the browser to load the JQuery library which is located in the Folder you have created
 Code Part 2:
 $(document).ready(function(){
 $("a").click(function()
 {
 alert("Hello world! you have called me");
 });
});
---Here We register a ready event for the document ie we will perform the things whenever the DOM(document object model ) is Ready.
---$() is a JQuery Object
---$(“a”) is jQuery selector tool or method, which selects all “a”  elements
---The click() function we call next is a method of the jQuery object.
Labels: ,
Subscribe to: Posts (Atom)