With Jquery UI we can do more interactive things.This jquery cycle plugin allows you to do different transition effects on the screen.Simply copy,paste and change the image location for make it work.Here is the code….
More »
Archive for the ‘jQuery’ Category
jQuery framework
The Accordion is a web control that allows you to provide multiple panes and display them one at a time.
The Accordion is implemented as a web control that contains AccordionPane web controls.
$(document).ready(function(){
$(".accordion p").hide();
$(".accordion h3").click(function(){
$(this).next("p").slideToggle("slow")
.siblings("p:visible").slideUp("slow");
});
});
The first line will hide all the <p> element within the <div class=”accordion”>
When the <h3> element is clicked, it will slideToggle the next <p>
More »
This is a simple application to convert all the First Letter of a string to Upper case using AJAX.
Here you have two files: an HTML file and a PHP file.
The HTML file contains the HTML code as well as Ajax code. The PHP file is meant for modifiying the string.
In this example the ajax function which is inbuilt in JQuery is called.
You can download JQuery from the folowing location:
http://jquery.com/
The code for HTML file is given below:
The code for PHP file is given below. I have named it as check.php
<?php echo ucwords($_POST['name']); ?>
Save the two files inside a folder in the www directory of Wamp Server. Also include the JQuery file.
Run the HTML file, give the string and see the output.
jQuery is a lightweight cross-browser JavaScript library that emphasizes interaction between JavaScript and HTML. It was released in January 2006 at BarCamp NYC by John Resig. Used by over 27% of the 10,000 most visited websites websites, jQuery is the most popular JavaScript library in use today
Use
jQuery usually exists as a single JavaScript file, containing all the common DOM, Event, Effects, and Ajax functions. It can be included within a web page using the following mark-up:
<script type=”text/javascript” src=”jQuery.js”></script>
Query has two styles of interaction:
via the $ function, which is a factory method for the jQuery object. These functions, often called commands, are chainable; they each return the jQuery object
via $.-prefixed functions. These are utility functions which do not work on the jQuery object per se.
For example:
$(“div.test”).add(“p.quote”).addClass(“blue”).slideDown(“slow”);
It is possible to perform browser-independent Ajax queries using $.ajax and associated methods to load and manipulate remote data.
$.ajax({
type: “POST”,
url: “some.php”,
data: “name=John&location=Boston”,
success: function(msg){
alert( “Data Saved: ” + msg );
}
});
… will request some.php from the server with parameters name=John and location=Boston and when the request is finished successfully, the success function will be called to alert the user.
Besides W3Schools one site with a really helpful tutorial for jQuery that any beginner can browse through easily is
the Web Designer Wall.
http://www.webdesignerwall.com/tutorials/jquery-tutorials-for-designers/
This tutorial is not just clear and to-the-point, it is also very bright and bold in presentation. It has 10 really helpful visual tutorials on jQuery in an easy to understand, user-friendly format.
Having a tough time with jQuery? This is your perfect solution!
P.S: Before you go here, make sure you have done your home work well and know your JavaScript and CSS well… Good Luck!
<html> <head> <script type="text/javascript" src="jquery-1.1.4.js"> </script> <!-- include your downloaded jQuery file here --> <script> jQuery(document).ready(function() { alert(’Hello World!’); } ); </script> </head> <body> <h1>jQuery Tutorials</h1> </body> </html>
When you browse this file, you will get a ’Hello World’ alert window.




