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.

Hello Guys,

I have been busy with college lately, since this is my last year in college, I need to do a very cool project to get some good marks . Anyways that doesn`t mean I won`t be postin tutorials here . Want to present your data using AJAX/PHP/MySQL by just coding few lines ? Well here it is. This tutorial teaches you how to present data using AJAX (using jQuery) with some neat effects. We can use PHP/MySQL to store the data and call it. In this tutorial I`ll teach you how to do so with PHP. So lets begin !

You can check the demo HERE.
You can download these files HERE

Index

1. Create the HTML page – index.html
2. • The CSS
   • The HTML
   • The Javascript
   • Final interface.html page
3. Create the PHP File – boo.php

HTML Page

Our HTML file will contain the javascript as well as the CSS styles embedded within it. We can also create the effect by creating individual files for each i.e one for javascript functions and the other for the CSS. Anyways in this tutorial, both of them will be embedded within the html page. Now First fire up your favourite HTML editor (Personally I love Dreamweaver CS3).

We will be using The jQuery Framework – jquery.js. If you want to know how the jQuery Framework works then do visit Exploring Javascript Frameworks : jQuery 1.2.6.

Step 1 – The CSS

Lets add our css first. First create a new HTML file, call it interface.html.
The following is the css code.

<style type="text/css">
body { margin:0 auto 0 auto; color:#000; font-family:Georgia, "Times New Roman", Times, serif; font-size:16px; background-color:#666666; }

.page { margin:100px auto 0 auto; width:750px;}

/*MENU START*/
#menu  { list-style:none; margin:0px; padding:0px;}

#menu li { list-style:none; display:inline; }
li.active a { background-color:#FFF;color:#000; }

#menu li a,#menu li a:link { float:left; background-color:#3c3c3c; margin-right:5px; padding:7px; color:#FFFFFF; text-decoration:none; width:6em; text-align:center;}
#menu li a:visited { }
#menu li a:hover { background-color:#327cc8 }
#menu li a:active { background-color:#FFF;color:#000; }
/* MENU END*/

#outcontent {clear:both; background-color:#FFFFFF; }
.content {background-color:#FFF; padding:10px; height:300px; margin:0px; }

#loading { clear:both; background:url(wait.gif) center top no-repeat; text-align:center;padding:33px 0px 0px 0px; font-size:12px;display:none; font-family:Verdana, Arial, Helvetica, sans-serif; }
</style>

The CSS is pretty straight forward.

• #page will be assigned to a div, which will hold our menu and other divs
• #menu is the CSS to display our menu tabs.
• #loading is the CSS to display the AJAX loading image.
• #outcontent is the container to contain .content

Put the above code inside the HEAD tag of interface.html. So interface.html will look something like the following.

<!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>interface.html</title>
<style type="text/css">
body { margin:0 auto 0 auto; color:#000; font-family:Georgia, "Times New Roman", Times, serif; font-size:16px; background-color:#666666; }

.page { margin:100px auto 0 auto; width:750px;}

#menu  { list-style:none; margin:0px; padding:0px;}

#menu li { list-style:none; display:inline; }
li.active a { background-color:#FFF;color:#000; }

#menu li a,#menu li a:link { float:left; background-color:#3c3c3c; margin-right:5px; padding:7px; color:#FFFFFF; text-decoration:none; width:6em; text-align:center;}
#menu li a:visited { }
#menu li a:hover { background-color:#327cc8 }
#menu li a:active { background-color:#FFF;color:#000; }

.content {
background-color:#FFF; background:url(ajaxinterface.jpg) bottom right no-repeat; padding:10px; height:300px; margin:0px; }

#loading { clear:both; background:url(wait.gif) center top no-repeat; text-align:center;padding:33px 0px 0px 0px; font-size:12px;display:none; font-family:Verdana, Arial, Helvetica, sans-serif; }

#outcontent {clear:both; background-color:#FFFFFF; }

</style>
</head>

<body>
</body>
</html>

The above is the HTML page interface.html with the CSS defined in it.

Step 2 – The HTML

Ok! Since now we have coded the CSS, lets create the HTML divs inside interface.html.

1. Inside the BODY tag lets create a div which will contain the menu and the subsequent divs.

<body>
    <div class="page">
    <!-- Menu and other divs go here !-->
    </div>
</body>

2. Then we`ll create the menu Tabs.

<body>
    <div class="page">
    <ul id="menu">
    <!-- you can add more tabs as you wish !-->
             <li id="about"	><a href="#" title="about">About</a></li>
            <li id="portfolio"><a href="#" title="portfolio">Portfolio</a></li>
            <li id="contact"><a href="#" title="contact">Contact</a></li>
	</ul>
	<br style="clear:both;" />
    </div>
</body>

3. Now we need a container to display our Loading text and our content, so we`ll create 2 divs and lets put these divs inside another div called outcontent. The following is how it`ll look.

<body>
    <div class="page">
        <div>
            <ul id="menu">
            <!-- you can add more tabs as you wish !-->
                         <li id="about"	><a href="#" title="about">About</a></li>
                        <li id="portfolio"><a href="#" title="portfolio">Portfolio</a></li>
                        <li id="contact"><a href="#" title="contact">Contact</a></li>
            </ul>
        <br style="clear:both;" />
        </div>
        <!-- #outcontent - Overall div containing Loading div &amp;amp; content div !-->
        <div id="outcontent">
           	 <div id="loading">LOADING</div>
            <div class="content"></div>
        </div>
        <!-- #outcontent end !-->
    </div>
</body>

interface.html

<!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>interface.html</title>
<style type="text/css">
body { margin:0 auto 0 auto; color:#000; font-family:Georgia, "Times New Roman", Times, serif; font-size:16px; background-color:#666666; }

.page { margin:100px auto 0 auto; width:750px;}

#menu  { list-style:none; margin:0px; padding:0px;}

#menu li { list-style:none; display:inline; }
li.active a { background-color:#FFF;color:#000; }

#menu li a,#menu li a:link { float:left; background-color:#3c3c3c; margin-right:5px; padding:7px; color:#FFFFFF; text-decoration:none; width:6em; text-align:center;}
#menu li a:visited { }
#menu li a:hover { background-color:#327cc8 }
#menu li a:active { background-color:#FFF;color:#000; }

.content {
background-color:#FFF; padding:10px; height:300px; margin:0px; }

#loading { clear:both; background:url(wait.gif) center top no-repeat; text-align:center;padding:33px 0px 0px 0px; font-size:12px;display:none; font-family:Verdana, Arial, Helvetica, sans-serif; }

#outcontent {clear:both; background-color:#FFFFFF; }

</style>
</head>

<body>
<div class="page">
<div>
<ul id="menu">
             <li id="about"	><a href="#" title="about">About</a></li>
            <li id="portfolio"><a href="#" title="portfolio">Portfolio</a></li>
            <li id="contact"><a href="#" title="contact">Contact</a></li>
</ul>
<br style="clear:both;" />
</div>
<div id="outcontent">
<div id="loading">LOADING</div>
<div class="content"></div>
</div>
</div>
</body>
</html>

The page should look something like the following

Step 3 – Add the Javascript Magic !

This page would do for static pages, but we are making an AJAX powered page ! Its time to add the magic.
First if you have read the Exploring Javascript Frameworks : jQuery 1.2.6 post, it should not be a problem.

1. First lets link to the jquery library

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

2. Next lets open the script tag again and add the following code. The following code is pretty explainatory. I have added a lot of comments to show what each and every line does.

<script>
  // When the document loads do everything inside here ...
     $(document).ready(function(){
	 $('.content').load('boo.php');	//by default initally load text from boo.php
         $('#menu a').click(function() { //start function when any link is clicked
		 				$(".content").slideUp("slow");
						 var content_show = $(this).attr("title"); //retrieve title of link so we can compare with php file
							$.ajax({
							method: "get",url: "boo.php",data: "page="+content_show,
							beforeSend: function(){$("#loading").show("fast");}, //show loading just when link is clicked
							complete: function(){ $("#loading").hide("fast");}, //stop showing loading when the process is complete
							success: function(html){ //so, if data is retrieved, store it in html
							$(".content").show("slow"); //animation
							$(".content").html(html); //show the html inside .content div
					 }
				 }); //close $.ajax(
         }); //close click(
	 }); //close $(
</script>

Voila ! thats it.

Our Final interface.html page

<!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>interface.html</title>
<script src="jquery.min.js" type="text/javascript"></script>
 <script>
  // When the document loads do everything inside here ...
     $(document).ready(function(){
	 $('.content').load('boo.php');	//by default initally load text from boo.php
         $('#menu a').click(function() { //start function when any link is clicked
		 				$(".content").slideUp("slow");
						 var content_show = $(this).attr("title"); //retrieve title of link so we can compare with php file
							$.ajax({
							method: "get",url: "boo.php",data: "page="+content_show,
							beforeSend: function(){$("#loading").show("fast");}, //show loading just when link is clicked
							complete: function(){ $("#loading").hide("fast");}, //stop showing loading when the process is complete
							success: function(html){ //so, if data is retrieved, store it in html
							$(".content").show("slow"); //animation
							$(".content").html(html); //show the html inside .content div
					 }
				 }); //close $.ajax(
         }); //close click(
	 }); //close $(
</script>
<style type="text/css">
body { margin:0 auto 0 auto; color:#000; font-family:Georgia, "Times New Roman", Times, serif; font-size:16px; background-color:#666666; }

.page { margin:100px auto 0 auto; width:750px;}

#menu  { list-style:none; margin:0px; padding:0px;}

#menu li { list-style:none; display:inline; }
li.active a { background-color:#FFF;color:#000; }

#menu li a,#menu li a:link { float:left; background-color:#3c3c3c; margin-right:5px; padding:7px; color:#FFFFFF; text-decoration:none; width:6em; text-align:center;}
#menu li a:visited { }
#menu li a:hover { background-color:#327cc8 }
#menu li a:active { background-color:#FFF;color:#000; }

.content {
background-color:#FFF; padding:10px; height:300px; margin:0px; }

#loading { clear:both; background:url(wait.gif) center top no-repeat; text-align:center;padding:33px 0px 0px 0px; font-size:12px;display:none; font-family:Verdana, Arial, Helvetica, sans-serif; }

#outcontent {clear:both; background-color:#FFFFFF; }

</style>
</head>

<body>
<div class="page">
<div>
<ul id="menu">
             <li id="about"	><a href="#" title="about">About</a></li>
            <li id="portfolio"><a href="#" title="portfolio">Portfolio</a></li>
            <li id="contact"><a href="#" title="contact">Contact</a></li>
</ul>
<br style="clear:both;" />
</div>
<div id="outcontent">
<div id="loading">LOADING</div>
<div class="content"></div>
</div>
</div>
</body>
</html>

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.