A wide range of jQuery plugin which help us to create Facebook style designs are follows:

I got this huge collection from this website. I am just rewriting that post here.

1) Facybox

Website here

2) Facebox

http://famspam.com/facebox

3) FCBKComplete

Go to webstie

4) Facebook style registration

Go to website

5) Gmail/Facebook style jQuery chat

Go to website

6) Facebook style comment using jQuery

Go to website

7) Facebook style auto complete

Go to website

Facebook style picture edit

Go to website

Tags: ajax, facebook, facebook design, facebook layout, facebook style edit, facebox, facybox, jquery

Flash messages or notification messages are very essential part of every update/edit or delete operations. We either use ajax update messages like “You account has been updated” or “Your photo has been successfully deleted”

Here, a new plugin of jQuery can be used to display the flash messages like twitter. (see twitter’s settings page)

I added some more functions to this plugin to display the notification in different context, say information, warning or error message. The function show_flash(‘message here’); can be used for this purpose. Second parameter is the type of message. For example, show_flash(‘Error in deleting file’, ‘error’) OR  show_flash(‘Email address entered is invalid’, ‘warning’)

If you use sessions to save flash message , for example in codeigniter $this->session->set_flashdata(‘message’,'hello’); you can use this plugin to display them by adding a php code in the footer  (or header) of every page

<?php if($this->session->flashdata(‘message’) != ” )  : ?>

<script>show_flash(‘<?= $this->session->flashdata(‘message’) ?>’)</script>

<?php endif; ?>

Here you can download the full source code:  http://www.sajithmr.me/downloads/jbar.zip

Thanks

Sajith

Tags: ajax, delete, display, edit, error, flash, information, jbar, jquery, message, notification, plugin, update, warning

Finally I found a good light-box which really matches the name “Light box” in FancyBox.  It is a jQuery based light window. It has very less features while compare with any other light box, but simple to use. Compatible with all browsers.

Go here to find it : http://fancybox.net/

You need to add the below javascript in addition to the jquery js file.

<script type="text/javascript" src="path-to-file/jquery.fancybox.js"></script>

To create a link to open in fancybox, call the function fancybox. For example, if you have a link pointing an image <a href=”myimage.gif” id=”imglink” />

Call

<script>

$(“#imglink”).fancybox();

</script>

The window automatically resize with image. If you put title attribute, it shows the title below with the light window.

Instead of image, you can point a file. If you need to open that file in iframe, use class=“iframe”

Visit http://fancybox.net/howto for more usability.

Tags: ajax, fancybox, iframe, jquery, light, lightbox, plugin, window

Basically using xajax “You can directly call php functions from your javascript code”

Xajax will do the rest. 

For example, if you are going to write a javascript function Capitalize which captilaze your textbox content when you press a button.

Here is the pure html/javascript code for that:

=============================================

<script>

function Capitalize()

{

      var t = document.getElementById(‘cap’).value;

      document.getElementById(‘update’).innerHTML = t.toUpperCase() ;

}

</script>

<input type=”text” id=”cap” name=”cap” />

<input type=”button” id=”capbutton” value=”Capitalize” onclick=”Capitalize()” />

<div id=”update”></div>

==============================================

Now see the difference when we use xajax, we can write this Capitalize function in php code and can call from javascript.

function Capitalize($value)

{

    $objResponse = new xajaxResponse();

    $objResponse->assign(“update”,”innerHTML”,strtoupper($value));

    return $objResponse;

}

and you can call from your button’s onclick function:

 onclick=”xajax_Capitalize(document.getElementById(‘cap’).value)” 

Here the same functionality we moved from client to server. Thus the point is you can simply call all the functions you written in php (Server Side) from javascript code via onClick, onMouseOver or window.onLoad etc.

You can get the full source code of Capitalize example here:

http://www.sajithmr.com/downloads/capitalize.zip

To download and for documentation go: 

http://xajaxproject.org/

Thanks

Sajith

Tags: ajax, call, capitalize, client, function, Javascript, php, server, xajax

Start jquery for manipulating html file and execute javascript just like sql queries.

Simply pointer the dom object with a $  and manipulate with different built in function.

For example 

$(“p.neat”).addClass(“ohmy”).show(“slow”);

Don’t need to write javascript inside each node. It is like prototyping. Insted of adding an onClick=”function()” inside the node, jquery define the onclick function from the top level. Your html code will be clean and tidy. If CSS removes all the styling bits, Jquery removes all the javascript bits from html.

You can remap every default action from an html object.

For example normally when you click a link  (<a> tag) it navigate you through the href value. But if you add the jquery code as below:

$(document).ready(function(){
   $("a").click(function(event){
     alert("Thanks for clicking!");
   });
 })

It adds a thanks alert for every click in links.

and if you add :

event.preventDefault();
It prevents the default action also.
You can go to JQuery homepage: http://jquery.com/
and can learn more about JQuery.
The intention of this post was not an explaination about jquery, but some addition website which develops addons based on jquery.
Those are:
http://jqueryui.com/

jquerystyle.com/

visualjquery.com/

http://15daysofjquery.com/

http://usejquery.com/



http://blog.themeforest.net/?s=jquery

Comment me if you know any other jquery websites.
Logging out
-Sajith

Tags: ajax, html, Javascript, jquery, manipulation, style

After the success of my previous wordpress plugins , Announcement, Show My Page Rank, Sexy Rating, Add to this , Stumble Reviews, I created one more interesting plugin, called Currently Reading Posts Plugin.

Whenever a visitor visits your website, he can see what are the posts currently reading by other visitors. It is like youtube’s currently watching videos.

You can see its current working at the top right corner of this website.

Download the plugin for here: http://www.sajithmr.com/downloads/CurrentlyWatching.zip

Go to Admin > Plugins > and activate the plugin.

Paste this code: <?php wp_show_currently_watching() ?> by editing your template / theme . (I placed the code in header.php file)

It is implemented with ajax support.

Tags: ajax, currently, plugin, sexy, show, watching, wordpress, youtube

If you wanna know , what is others review or opinion about your website, You can use this wordpress plugin. It will provide the blog readers and your regular visitor to rate your blog. You can put this plugin anywhere in your blog. The plugin name is sexyrate plugin.

Here is the screen shot:

There are 4 types for rating , Perfect, Good , Bad and Too-Bad. One user can rate one time only. The whole thing is made out of Ajax. For providing more attraction , the plugin is created with images of sexy ladies .

If you want to place this plugin, what to do is , download it from http://downloads.wordpress.org/plugin/sexyrate.zip

Go to your wordpress Admin > Plugin and activate this plugin. After that , go to Admin > Presentation > Theme Editor and edit any place you want (header, single.php , index.php, home.php or sidebar.php) as suit to your blog and add this line:

<?php wp_show_my_rate() ?>

*Remember, this plugin is referred to those who has white backgroud wordpress theme.

Comment me your opinion about this plugin

Later
Sajith

Tags: , ajax, opinion, plugin, rate, sexy, visitor, wordpress

Gmail is the best application website i ever seen. Simple implementation, Super Ajax, Cute Chatting, Status Messages, Fast Mail Checking, Live updating and its features are endless as my wordpress database wont withstand

when you type: www.gmail.com, the following action will happen. See it is very interesting.

Script1
It first load the javascript file : https://mail.google.com/mail?view=page&name=browser&ver=1k96igf4806cy

It checks the browser type, os etc

the function navigator.userAgent.toLowerCase() checks with opera, msie,mac,gecko,safari,palmsource,regking,windows ce,avantgo,stb,pda; sony/com2 etc browsers

that is script 1′s job.

Script 2 calculate the round trip time for a 1 pixel image. This is for finding the internet speed of the user

function GetRoundtripTimeFunction(start)
{
return function()
{
var end = (new Date()).getTime();
SetGmailCookie(“GMAIL_RTT”, (end – start));

}
}

Since gmail uses iframes , this script also make sure to load the actual home
top.location = self.location.href

It also set cookie to show which of the google service is using.

Then loads the login form and set focus on password field.

Script 3 handles the https connection and cookie settings for secured login

Yet the web 2.0 concept is on the peak, gmail uses table layout design instad of div style designs

Gmail’s login form ‘s action is pointing to “https://www.google.com/accounts/ServiceLoginAuth?service=mail”

This is the general url for google account login. Here service=mail parameter indicates , this is gmail logging

When the logging verification done, the page is redirected into corresponding service by javascript:

location.replace(“http://www.google.co.in/accounts/SetSID?……etc etc”);

After setting proper session and cookies for login, the non secured site http://mail.google.com/mail page automatically get refresh by this meta tag:
<meta content=”0;URL=http://mail.google.com/mail/” http-equiv=”Refresh”/>

When loading the mail page after setting proper login sessions, around 28 ajax web request begin to start, and load all the mails, labels, channels etc

The above mentioned all javascript is also here in this mail loading page

The first division (div) inside the body tag is that for loading. A while text “loading…” with red backgroud.
<div class=”msg”> Loading… </div>

This is the waiting symbol for all the ajax call to load

There is also a timer is working to check the loading time of ajax requests. If it takes more time than expected (or calculated), it show this error “This seems to be taking longer than usual”

Automatically they provide navigation links for basic html version.

The total page of gmail is created by a set of iframes
viz

HIST_IFRAME
SOUND_IFRAME
CANVAS_IFRAME
JS_IFRAME

The Sound_Iframe session loads a flash object (shock wave file) for playing the sound , when chat works. (Google chat indicator)

<embed id=”flash_object” type=”application/x-shockwave-flash” pluginspage=”http://www.macromedia.com/go/getflashplayer” quality=”high” style=”position: absolute; top: 0px; left: 0px; height: 100px; width: 100px;” src=”im/sound.swf”/>

Gmail saves each sections- labels, inbox, mails etc in array with a unique id. This unique id is for checking the updations on the fly using ajax.

For example : http://mail.google.com/mail/?ui=2&ik=42e598c952&view=tl&start=50&num=70&auto=1&ari=120&rt=j&search=inbox

The above url pics all the data as javascript array format. Check this link after logging in gmail. You can see your labels, your from email accounts, your settings,
your last arrived 70 emails subject and from etc information in javascript array format.

This is the url which is to be called when you click older and newer mail (pagination below)

Gmail always call this url : http://mail.google.com/mail/channel/bind?at=xn3j2zpul6ptan694kr6javrldi43s&VER=6&it=93079&SID=584B451AB93DBDC&RID=16351&zx=lniy7w-6psisw&t=1

(leave the parameters value) for checking updatations. This is gmails rpc checking for new updations .

If there is any updation new rpc with post method automatically called to get new data. The calling url is same , the one above
http://mail.google.com/mail/?ui=2&ik=42e598c952&view=tl&start=0&num=70&auto=1&ari=120&rt=j&search=inbox

It results new data as javascript array format. The rest of the arrangements are handled by the script from client side.

Whenever you open a mail from inbox, the browser send another request for loading the sponsered links (advtisement) though this rpc
http://mail.google.com/mail/?ui=2&ik=42e598c952&view=ad&th=118e57dc03d67f16&search=inbox

The CANVAS_IFRAME is the main iframe contains all the layout of gmail

It contains the left side chat, main inbox or mails right side ads, and all the controls

The left side chat is created using table.

JS_IFRAME contains all the javascripts files for gmail full implementation. There are around 89 js files.

When you chat with somebody, the url calling is : http://mail.google.com/mail/channel/bind?at=xn3j2zpul6ptan694kr6javrldi43s&VER=6&it=891&SID=7D4E9A779225DC1&RID=50595&zx=hrsqkf-nwummu&t=1

as POST method with parameters:
req2_text <your chat>
req2_to <sender’s email address>
req0_type cf
req1_cmd a
req0_focused 1

Now,

http://mail.google.com/mail/channel/bind?at=xn3j2zpul6ptan694kr6javrldi43s&VER=6&it=531&RID=rpc&SID=48DD6BA8E1D3A326&CI=1&AID=176&TYPE=xmlhttp&zx=m0iiwn-ok5jqr&t=1

the above url return the chat friends and theire status messages

==========================================================

Same url is using for getting the chat messages.

For example when kenney.jacob@gmail chat with me , the message comes as an array like this:

[184,["m","kenney.jacob@gmail.com","730DFDF6F013F640_161","active","hi da","hi da",1206444193169,

,,0,0,0,0,[]

,”square”]

Here active implies the chat is active or not (the window with orange color) and with a chat alert if the window is not active.

http://mail.google.com/mail/channel/test?at=xn3j2zpul6ptan694kr6javrldi43s&VER=6&it=24343&MODE=init&zx=1vyx51-ze670&t=1

The above url checks whether the chat is enable or not. which returns an array:
["b","chatenabled"]

Gmails file uploading is another interesting thing. I already posted ajax file uploading : http://www.sajithmr.com/upload-files-like-gmail/

I will post more about gmail architecture soon .

Tags: , ajax, architecture, gmail, mail