Ok, I was googling for some information when I stumbled upon something called as “Chrome Experiments“. I don`t know whether most of you must have seen this site, but it is unbelievable that most of the experiments posted here have been created using javascript !

One of my favourites here is the Depth of Field example. Screenies below

This just shows how the javascript engines have evolved over the years. Earlier flash used to be every developer/designers dream to create super interactive websites, it is still great for creating RIAs but nowadays Javascript has evolved soo much, it can do most of the stuff which Flash could do.

This site is a real inspiration to those who want to learn more about javascript. Enjoy

Ok, so the title doesn`t make much sense huh !? I wasn`t available for an entire month and the reason…. Optima Prime – Enterprise Project Management System. Well,  this is my last year in graduation college and we had to create a project which will stand out, and here it is

So wat is it all about ?

Before I start, we had developed a Chart or Poster to depict what our software is all about. This is the poster, it may be a lil cluttered, but it pretty much explains what our project is all about

We won the first prize for our project along with another Project (Rank Retrieval System). But more than prize, I guess for all the hard work put in, we have got what we wanted, Exposure….

What is PMS ?

There are lot of Project Management Systems out there, Project Management Systems (PMS) in general help your company manage projects effeciently and effectively. Optima Prime is one such PMS which does both alongside a host of features

Features ?

1. Works on our Custom MVC based framework “Innovite”
2. 3 Different types of User Logins viz Project Manager, Team Leader, Team Member
3. Every Project has an individual “Message Board”(Forum) to communicate with the project members with Attachment Facility
4. Email Alert System. Whenever any project has been updated or any new message has been added, then an E-Mail is sent across all the users in that project.
5. Completely AJAX ‘ed so not much page transitions
6. Dynamic Timeline Charts (Gantt) and Dynamic Pie/Bar Charts
7. Automatic PDF report generation.
8. Themes
9. Install Package
10. Aimed for an IT Enterprise
11. Plugin System
12. Open Source

The basic framework of OptimaPrime.

So there are a long list of features, I have just given a few. Anyways, I`ll release the code soon here, till then you can check out the screenshots put up below.

Screenshots

Project Dashboard after logging in

Project Summary Page with Gantt Chart, Pie Charts etc

Project Edit Page

Well, these are just a few screens, there are more. I`ll upload em as soon as I get up.

Cheers Guys, I am extremely sorry readers for not answering your queries, but I am here now. I`ll try to answer as much as possible.

Hey Guys,

Its been a while since I have started my final year Project called “OptimaPrime- The Enterprise Project Management System”. Most of you must have heard of project management systems. It helps enterprises manage their projects, lets them keep it on schedule, helps them allocate resources etc.
I needed to perform form Validation since I had a lot of forms and it had lot of fields. I googled for good form validation plugins for Prototype + Scriptaculous (Since I have got really used to this cool library) and thats when I found Dexagogo’s Really Easy Field Validation plugin.

A very useful and a simple to use form validator for all kinds of forms. It has neat Fade IN/Fade OUT effects too. Custom classes can be defined, custom validations can be defined. It validates fields for a lot of different type of scenarios.

• required (not blank)
• validate-number (a valid number)
• validate-digits (digits only)
• validate-alpha (letters only)
• validate-alphanum (only letters and numbers)
• validate-date (a valid date value)
• validate-email (a valid email address)
• validate-url (a valid URL)
• validate-date-au (a date formatted as; dd/mm/yyyy)
• validate-currency-dollar (a valid dollar value)
• validate-selection (first option e.g. ‘Select one…’ is not selected option)
• validate-one-required (At least one textbox/radio element must be selected in a group – see below*)

For more information on how to use this plugin visit  Dexagogo’s Website. You can also check out a demo of this script at action HERE. It has very good documentation on how to use this plugin. Thanks Dexagogo. Although if you guys have any doubt on how to use it, I`ll be glad to help you out.

This tutorial is specially for beginners who are wondering how to place an AJAX Spinner. Its very simple guys. Just read below to find out.

To those people who have wondered how to show the spinner image + loading message when any ajax request is made and to hide the spinner image + loading message when the request is successfully completed, this tutorial will help you out in achieving it and also teaches you how to show this loading box in the center of the browser screen and grey out the background contents with cool fade effects.

Index :

• Page 1 : Introduction
• Page 2 : Required HTML/Javascript Code/CSS
• Page 3 : Complete Code of Demo

Pre-Requisites :

A little bit of CSS,HTML knowledge and know-how of Prototype, Scriptaculous.

Source/Demo :

How many times have you wanted to use a very cool looking font for your website, but have withdrawn the idea because you thought that font won`t display properly in everyones’s system.

Well fear not, I had previously posted a tutorial on how you can use PHP to display those lines of texts which use some odd font, by automatically converting it to an image (Tutorial : Convert Text into transparent PNG Image using PHP), this way, you can easily display text with odd fonts.

Recently I found a very neat plugin which automatically converts any text (with font of your choice) into an image i.e from now on you don`t have to worry about text with different or odd fonts. They`ll be automatically converted into a compatible image via this plugin, And don`t worry about the image tag and all, this plugin manages everything

Plugin name : PHP / jQuery Image Replacement
Plugin Home Page/Demo : http://www.xanthir.com/pir/

Usage

The usage was pretty simple.

1. After unzipping the archive, Open pir.php and First set the fonts folder in the php page.
2. In your website, include jQuery and then include the jquery.pir.min.js (for production).

3. $(function() {
   $.pir.options.php="pir.php"; //compulsary to include the php which converts text to image.
   $("h1").pir({font: "yourfont.ttf", wrap: true}); //will enable automatic text warping.
   

   });

Pretty Simple huh ! Enjoy

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.

How many of you have always dreamt of creating an Auto Suggest Box. I bet everyone must have seen one of these somewhere or the other. if you use Gmail to send mails, you might recall that while typing the To address, Gmail shows a probable list of users from your address book. Nowadays most of the modern browsers also have this Auto Suggest control built in them, i.e when the user begins to type in a text box, a menu appears below the text offering completion suggestions.

Today I am going to teach you how to create an Auto Suggest Box using Prototype, Script.aculo.us. The script.aculo.us auto suggest box (autocompleter) replicates this control, but gives the developer control of the probable suggestions.

Index

• Page 1 : Introduction and
• Page 2 : Auto Suggest Box (local)
• Page 3 : AJAX Auto Suggest Box (remote via PHP/MySQL)

Demo & Source Download

Type out the name of the states of U.S.A.
Local Auto Suggest Box Demo : Click Here
Remote Auto Suggest Box Demo : Click Here

Download Source Here

Problem Statement

Lets try creating an Auto Suggest Box which displays the states of America as the user begins to type a state’s name in the text box.

Solution

Before using any functions, first we need to make our HTML page i.e how the suggestion box is going to look.

1. Create an empty HTML file.
2. First, to take the input of any state name from the user we need an input box.
   Second, we need a container to display all the probable suggestions i.e different names of states according to User input.

   Lets create these right now.

       <!-- This code will be added inside the  <strong><BODY></strong> tag of the HTML page -->
       <input type="text" name="state_input" id="state_input" size="30" />
       <div id="state_suggestions"><!-- container for list of probable suggestions !--></div>
       

3. Now that we have designed our suggestion box, its time to implement the Auto Suggest Box method. Since this method is readily available as a part of Script.aculo.us, we need to include the scriptaculous file, and since scriptaculous depends on prototype, we need to include the prototype file to our HTML document. Type following code inside the <HEAD> tag.

   	<script src="js/lib/prototype.js" type="text/javascript"></script>
       <script src="js/src/scriptaculous.js" type="text/javascript"></script>
       

4. The HTML page should look something like this.

       <!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="js/lib/prototype.js" type="text/javascript"></script>
   	<script src="js/src/scriptaculous.js" type="text/javascript"></script>
       </head>
       <body>
       <input type="text" name="state_input" id="state_input" size="30" />
       <div id="state_suggestions"><!-- container for list of probable suggestions !--></div>
   
       </body>
       </html>
       

Now that we have a HTML page ready, preview it. Obviously it won’t work yet. We still have to define the AutoCompleter function.

There are 2 ways to achieve our goal. Script.aculo.us’s Autocompleter comes in two flavors.

1. Autocompleter.Local : The local array autocompleter. Used when you’d prefer to inject an array of autocompletion options into the page, rather than sending out Ajax queries.
2. Ajax.Autocompleter : Which relies on a remote server to give it suggestions, making an AJAX Request whenever suggestions need to be retrieved.

Now both have thier Pros and Cons. I`ll explain each one of them and how they can be used.

Heya,
After a long time I had the time to update my blog. I have been working on my project presentation for the past 2 weeks. The entire presentation was developed in Flash CS3 coded in ActionScript 3. It was ages since I had used Flash and I was quite astonished how it had changed over the years. I`ll be soon posting some tutorials on Flash, so do keep an eye out

Anyways apart from being a bit off-topic, This tutorial deals with AJAX implementation in Ruby on Rails 2. While I was learning RoR, I had lot of issues of properly having AJAX implementation in my projects. This tuorial is for those people out there.

In this tutorial, I`ll just show some very simple Script.aculo.us Animation Implementations in RoR.
View Demo

Introduction

First off, if you followed my RoR tutorials, you should know that RoR has AJAX support built in to it. It uses the Prototype Javascript Library along with Scriptaculous.

Step 1 – Create new RoR Application

First create a new RoR application. Edit the database.yml file as well. If you are new to RoR, then visit Tutorial : Developing your First Ruby on Rails 2 Application

Step 2 – Create a Controller

After creating the new application, we need to create a controller. lets call the controller ajaxfunctions. I hope you guys know how to create a controller.

    ruby script/generate controller ajaxfunctions index

The above code will create a controller called ajaxfunctions which will have a method called index, respectively index.rhtml OR index.html.erb will be created inside the view/ajaxfunctions folder.

Step 3 – Editing the view file

Once you open it, you`ll notice that its empty. This is our template, basic HTML would suffice. So type out an html page here or you can use the one below.

<!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>
</head>

<body>
</body>
</html>

Great. Now firstly, to implemenet AJAX in RoR , we need to initialize it.

Initializing the Ajax code

You must include the javascript code in your view template file (i.e index.rhtml in our case) for the Ajax functions to be available in that view. The best place for this is in the <head> tag.

You can either use

• <%= javascript_include_tag :defaults %>
  We`ll be using this. Using this allows for quicker downloads since the script can be cached by the browsers.
  This is the output in the HTML page.

  <html>
  <head>
  ...
  <script src="/javascripts/prototype.js?1219423129" type="text/javascript"></script>
  <script src="/javascripts/effects.js?1219423129" type="text/javascript"></script>
  <script src="/javascripts/dragdrop.js?1219423129" type="text/javascript"></script>
  <script src="/javascripts/controls.js?1219423129" type="text/javascript"></script>
  <script src="/javascripts/application.js?1219423129" type="text/javascript"></script>
  ...
  </head>
  </html>
  

• <%= define_javascript_functions %>
  This pastes all of the required Javascript code right into your view which increases your page size by ~20KB.

Different AJAX Helpers used in View Files

RoR creates the AJAX code for you via helper codes. Firstly

Defination:
What is a Helper ?
Helpers (“view helpers”) are modules that provide methods which are automatically usable in your view. They provide shortcuts to commonly used display code and a way for you to keep the programming out of your views. The purpose of a helper is to simplify the view. It’s best if the view file (RHTML/RXML) is short and sweet, so you can see the structure of the output. Nitty-gritty details are best left to helper methods and partials, where they can be parametrized and used repeatedly.

Note : We can call AJAX via 2 methods i.e 1) Using a button and 2) Normal Links. Then we can add the arguments through which we can achieve to have cool visual effects or perform serious AJAX operations.

AJAX Helpers

1. button_to_function(button_value, *args, &mp;block)
   Returns a button that‘ll trigger a JavaScript function using the onclick handler. All of these go into the body tag of the view file. You can use the visual_effect function to specify any visual effects

   Example :
   This will show a button with the value “Greeting”, upon clicking will show a alert box with “Hello World!” inside.

   <%=button_to_function "Greeting", "alert('Hello world!')" %>

   This will display a button with value “Fade”, upon clicking will fade in or fade out the element ‘fade_text’ (It can be a div element with id=fade_text).

   <%=button_to_function "Fade", visual_effect(:toggle_appear, "fade_text", :duration => 0.5)%>

2. link_to_function(name, *args, &block)
   Intead of a button, if you want to implement AJAX functionality using a text link. You can use this helper.
   Returns a link that will trigger a JavaScript function using the onclick handler and return false after the fact.

   Example :
   This will show a “Greeting” link, upon clicking will show a alert box with “Hello World!” inside.

   <%=link_to_function "Greeting", "alert('Hello world!')" %>

   This will display a “Slide Me” link, upon clicking it will slide in or out the element ‘slide_text’ (It can be a div element with id=slide_text).

   <%=link_to_function "Slide Me", visual_effect(:toggle_slide, "slide_text", :duration => 0.5)%>

Helper for Animation

3. visual_effect(name, element_id = false, js_options = {})
   Returns a JavaScript snippet to be used on the Ajax callbacks for starting visual effects.

   Example :
   This will show a “Highlight” button, upon clicking will highlight the element which is specified.

   <%=button_to_function "Highlight", visual_effect(:highlight, "element_id_name",:startcolor => '#ffff99', :endcolor => '#ffffff')%>

   This will display a “Grow” link, upon clicking it will grow the specified element_id_name

   <%= link_to_function "Grow", visual_effect(:grow,"element_id_name",:direction => "center",:duration => 1)%>

I would really suggest to go through Script.aculo.us WIKI to know more about every effect and their parameters. All of these effects can be used with RoR. For Example I have attached the code for the demo file.

Code for the Demo File

View Demo

<!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>AJAX</title>
<%= javascript_include_tag  :defaults %>
</head>

<body>

<%=button_to_function "Greeting Alert Me", "alert('Hello world!')" %><br /><br />
<h4>Actions with paragraph using buttons</h4>
<%=button_to_function "Fade", visual_effect(:toggle_appear, "fade", :duration => 0.5)%>
<%=button_to_function "Slide", visual_effect(:toggle_slide, "fade",:duration => 1)%>
<%=button_to_function "Highlight", visual_effect(:highlight, "fade",:startcolor => '#ffff99', :endcolor => '#ffffff')%>

<div id="fade" style="border:1px solid #dbdbdb; margin:50px;">
This is test, This is test<br>
This is testing....<br>
Lorum ipsum blablasadadada
</div>

<h4>Actions with Green Box using links</h4>
<%= link_to_function "Toggle Fade", visual_effect(:toggle_appear, "s1", :duration => 0.5)%> ||
<!-- Transitions --><%= link_to_function "Fade with wobble","new Effect.Fade('s1', { transition: Effect.Transitions.wobble })" %> ||
<!-- grow effect --><%= link_to_function "Grow", visual_effect(:grow,"s1",:direction => "center",:duration => 1)%> ||
<!-- shake effect --><%= link_to_function "Shake", visual_effect(:shake,"s1",:distance => "30",:duration => 1)%> ||
<!-- morph effect --><%= link_to_function "Morph to Red box", visual_effect(:morph,"s1",:style => "{background: '#f00',color: '#fff',width: '200px'}" )%> ||
<br>
<br>
<div id="s1" style="width:80px; height:80px; cursor:move; background:#88da5d; border:1px solid #444; text-align:center;">
</div>

<h4>Drag Action with Blue Box</h4>
<div id="s2" style="width:80px; height:80px; cursor:move; background:#7baaed; border:1px solid #333; text-align:center;">
<%= draggable_element("s2", :revert => true) %>
DRAG ME
</div>
</body>
</html>

Related Articles

Tutorial : Installing Ruby on Rails 2 in Windows Vista/XP
Tutorial : Developing your First Ruby on Rails 2 Application
Tutorial : Basics on Ruby on Rails 2 Model, Controller and Views and Routing
Tutorial : Create a blog using Ruby on Rails 2. (Part 1 – Relationships)
Tutorial : Create a login system in Ruby on Rails

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.