jQuery has surely made my life easier. I have been trying out both Prototype & jQuery for a couple of days now and for some reason, I find jQuery a lil easier compared to Prototype Javascript Library. Although Prototype is a much powerful library (according to me), jQuery is just too simple . Anyways I will show you a simple effect which you already must have seen in many places.

Demo : The Category section in the sidebar in this site.

EDIT : Added Collapse All, Expand All Code as well

This code can be extended in creating a full-fledged dynamic Collapsible Menu. Mainly you can use this code in you Blogs (if you have a large array of Categories) to group your categories/tags.

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" ></script>
<script type="text/javascript">
$(document).ready(function(){

//Store Image paths
var toggleMinus = 'path/to/minus/image';
var togglePlus = 'path/to/plus/image';

var $subHead = $('.children').parent();

//Add the Plus image to every child by default
$subHead.prepend('<img src="' + togglePlus + '" alt="collapse this section" /> ');

//By Default put the Menu in collapsed state
$('.children').parent().children('ul').slideUp('fast');

//Expand All Code
$('.expand').click(function() {
		$subHead.children('ul').slideDown('fast');
		$('img', $subHead).attr('src', toggleMinus);
});

//Contract All Code
$('.contract').click(function() {
		$subHead.attr('src', toggleMinus).children('ul').slideUp('fast');
		$('img', $subHead).attr('src', togglePlus);
});

//Expand or Contract one particular Nested ul
$('img', $subHead).addClass('clickable').click(function() {
var toggleSrc = $(this).attr('src');
if ( toggleSrc == toggleMinus ) {
$(this).attr('src', togglePlus).parent().children('ul').slideUp('fast');
} else{
$(this).attr('src', toggleMinus).parent().children('ul').slideDown('fast');
};
});
});
</script>

Basically .children can be kept same if you are planning to use this in your WordPress Blog (for Categories or any unordered list or ordered list since WordPress assigns class=children to nested lists)

If you want to use this code in some other form, then .children has to be replaced with the class name of the nested list. For Example, the above code works for lists like

<a href="javascript:void(0);" class="expand">Expand All</a>
<a href="javascript:void(0);" class="contract">Contract All</a>
<ul>
	<li>Main 1
<ul class="children">
	<li>Sub 1</li>
	<li>Sub 2</li>
	<li>Sub 3</li>
	<li>Sub 4</li>
</ul>
</li>
	<li>Main 2
<ul class="children">
	<li>Sub 1</li>
	<li>Sub 2</li>
</ul>
</li>
	<li>Main 3</li>
</ul>

This is how it looks. (I haven`t added Expand All and Collapse All in the Demo Here)

• Main 1
  • Sub 1
  • Sub 2
  • Sub 3
  • Sub 4
• Main 2
  • Sub 1
  • Sub 2
• Main 3

You can style the unordered list not to display the bullets using CSS which I haven`t shown above.

I hope you guys enjoyed this post. If you guys have any questions, your comments are welcome.
Signing off.

Hey guys,

You might be wondering where the hell are the Rails Tuts ! But before that, some of you might have read the Tutorial : Introduction to AJAX with PHP, if you think coding AJAX is tough, think again ! Recently I have been doing a lot of research about different javascript frameworks which will help me ease AJAX and I came across JQuery and Prototype. It seems they were very commonly used by lot of people. Not only that, these frameworks, besides just providing AJAX they have a lot of cool features. So I decided to explore them.

This post explores some neat tricks I could do using jQuery ! So read on guys if you wanna learn

Index

• Introduction
• What is jQuery ?
• Download jQuery ?!
• Playing with jQuery ?!
• jQuery Effects ! ?

What is jQuery ?

Ok ! If you have read Tutorial : Introduction to AJAX with PHP, you will notice what a pain it is to code using javascript. Imagine the same same function to be performed by writing just 5 lines…this is what jQuery can help us achieve.

It is a set of functions written in javascript, to make our life easier.
For Example

<html>
<head>
<title>Base page for content</title>
<script src="jquery-1.2.6.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
jQuery(function($) {
$("#contentArea").load("a.html");
});

//-->
</script>

</head>
<body>
<div id="contentArea"><!--loads contents of a.html here--></div>
</body>
</html>

The above javascript function will load the contents of a.html to our div with id=contentArea. Imagine doing the same with normal AJAX functions, it would take anything not less than 10 lines of code. Anyways lets see how can use jQuery to minimize our load.

Download jQuery

First lets download the javascript framework from jquery.com. Since we plan to develop and do a lot testing, download the jQuery 1.2.6 (97kb, Uncompressed).

Download the jquery-1.2.6.js file and save it.

Everytime we want to use jQuery, we need to include the above script in our HTML files. You can do so as shown below i.e add between the head tags.

 <!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>Untitled Document</title>
 <script src="jquery-1.2.6.js" type="text/javascript"></script>
 </head>
 <body>
 </body>
 </html>
 

Playing with jQuery ?!

Like I showed you in Page 2. 3 lines of code in javascript using jQuery can do stuff which is far more than 10 lines of code in javascript without jQuery.
Anyways I am going to show you some neat tricks you can do using jQuery. The basics ofcourse !

The basic code

Like I said, you need to include the basic javascript library file if you want to use jQuery features.

ready function

The following code shows jQuery equivalent code to the javascript function

 // normal javascript
 <script type="text/javascript">
 window.onload = function(){ alert("abc"); }
 </script>

// equivalent in jQuery
 <script src="jquery-1.2.6.js" type="text/javascript"></script>
 <script type="text/javascript">
 $(document).ready(function(){ alert("abc"); });
 </script>
 

What it does :
Both the code alert the user with a message box, having msg “abc”.

click function

 <script type="text/javascript">
 // normal javascript
 function clickme() {
 alert("abc");
 }
 </script>
 <a href="#" onClick="clickme();">Have to specify the function for links you want alert to show</a>

<script src="jquery-1.2.6.js" type="text/javascript"></script>
 <script type="text/javascript">
 $(document).ready(function() {
 $("a").click(function () {	// When any link is clicked
 alert("abc"); //alert user
 });
 });
 </script>
 <a href="#">All the links will alert</a>
 

What it does :

Normal Javascript -Displays alert box, if a links is clicked. In normal javascript, we have to write a call to the clickme() function on every link to show alert box.
jQuery – All the links will show alert box on click since
$(“a”).click(function () {//function }); where “a” refers to all anchor tags.
If you want to specify any one particular tag, then
$(“a#1″).click(function () {//function }); where alert box will only be displayed when a link with id=1 is clicked.

add class

$(“div#foo”).addClass(“test”);
The above code will add the class test to div with id=foo. You can add css styles using this piece of code.

html code

$(“div#foo”).html(“Hello World”);
The above code, will update div with id=foo, with Hello World. This is more like
obj.innerHTML = “Hello World” where
obj = document.getElement(“foo”);.

For more information, I suggest you read this Frequently Asked Questions.

Now lets move to the next page and create some effects !!

jQuery Effects ! ?

Yup thats right, jQuery has some neat effects up its sleave.

The code for the above effects..

<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
//fade functions
$("#fadein").click(function () {	// When any link is clicked
$("#fadeeffect").fadeIn("slow"); //fade in effect
});
$("#fadeout").click(function () {	// When any link is clicked
$("#fadeeffect").fadeOut("slow"); //fade out effect
});
//slide functions
$("#slidein").click(function () {	// When any link is clicked
$("#slideeffect").slideDown("slow"); //slide in
});
$("#slideout").click(function () {	// When any link is clicked
$("#slideeffect").slideUp("slow"); //slide out
});
});
</script>
<input type="button" id="fadein" name="fadein" value="Fade In" />
<input type="button" id="fadeout" name="fadeout" value="Fade Out" />
<div id="fadeeffect" style="border:1px solid #1a6780; display:none; margin:10px;padding:10px; background-color:#e3eff3;">
FADING...
Lorem epsom sied van heity rath mapark to ratham. Msgyht raspiem maks vem iey tor sto fo rtem leom. Marks maxi umlion tor pion skim quedrtem lorespiortium.
</div>
<input type="button" id="slidein" name="slidein" value="Slide In"  />
<input type="button" id="slideout" name="slideout" value="Slide Out"  />
<div id="slideeffect" style="border:1px solid #1a6780; display:none; margin:10px; padding:10px; background-color:#e3eff3;">
SLIDING...
Lorem epsom sied van heity rath mapark to ratham. Msgyht raspiem maks vem iey tor sto fo rtem leom. Marks maxi umlion tor pion skim quedrtem lorespiortium.
</div>

Pretty cool huh ! just 3 lines of code and viola !
jQuery also gives the ability to create a custom animation.

The code for the above is

<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script type="text/javascript">
//custom animation
$("#custom").click(function(){
$("#customtext").animate({
width: "70%",
opacity: 0.5,
marginLeft: "0.6in",
fontSize: "2em",
}, 1500 );
});
</script>
<input type="button" id="custom" name="custom" value="Animate"  />
<div id="customtext" style="border:1px solid #1a6780; margin:10px; padding:5px; background-color:#e3eff3; width:100px;">
Animate ME !
</div>

You can read more documentation about these effects http://docs.jquery.com/Effects.

Well I have covered most of the usual functions people use with jQuery. Use your imagination to create stunning webpages. you can visit http://www.visionmasterdesigns.com since it is jQuery powered.

But hold on guys ! Be sure to check out the next part where we will be exploring another famous javascript framework “Prototype“.

Cya

Found this tutorial really useful, you can click here to donate.

Hey Everyone,

I have been busy lately, but that ain`t gonna stop me from writing tutorials ! Anyways I had promised a Ruby on Rails tutorial, I am working on that, I am trying to make it as descriptive as possible, but before I post that, a lot of people asked me what is AJAX, how to integrate it with PHP/MySQL etc ? Well guys, This tutorial is dedicated to you all !

Along with answering all your queries, I will be teaching you how to make a simple application in PHP/MySQL using AJAX.

Index

• Page 1 : Introduction
• Page 2 : Introduction to ‘AJAX’
• Page 3 : General AJAX code
• Page 4 : Ajax Application using PHP (Username validator)
• Click here to see demo

Required : Some basic knowledge in Javascript, HTML.