I have created a quick start example which outlines both Facebook Connect and the Open Stream API. You can check that here. A blog post covering the steps is coming soon in 3-4 days.

Stay tuned if you have interest in them.

Cheers

Now that I have some fresh essentials, this post was inevitable.

18. jQuery UI

This is the official big boss with a number of core interactions (drag, dropping, sorting, selecting, resizing) and few great widgets (accordions, date pickers, dialogs, sliders, tabs) built on top of those. Although its a great collection, I somehow haven’t been able to use it in any real projects yet. It seems small plugins always get a favor than big collections

19. Facebox

This is a cute, little plugin that shows Facebook style dialog boxes using jQuery. It supports nearly all the possible contents you might want to show in a dialog box: image, div, remote pages. It has both automatic behavior and manual invoking. Simple and fun to me.

20. Pagination

Although we generate pagination mostly from back-end and display them in our pages, sometimes AJAX paginations are needed. This plugin outputs a superb pagination display to be used in such cases. If you know the usability issues regarding pagination and can distinguish between bad and good paginations, then you’ll find that this one has all the good in it. Check out their demo to know what I mean.

21. Ingrid, the jQuery Datagrid

“Datagrids don’t have to be difficult to use anymore – say hi to Ingrid. Ingrid is an unobtrusive jQuery component that adds Data Grid behaviors (column resizing, paging, sorting, row and column styling, and more) to your tables.” – I can’t agree more on their say. It’s truly an excellent implementation of grid. And it makes conversion of normal tables to grids very easy.

22. jQuery Youtube

If you have any need to retrieve and show Youtube videos in your site, this plugin will be a life-saver. Specify a few properties and this plugin will fetch the videos utilizing the new GData API from Google. And the author makes an unique display of the thumbnails, but combining it with BlockUI – so when you click on a retrieved video, you have it in a modal for preview.

23. Coda Slider

I am a huge fan of Coda Slider. It’s a slider plugin for jQuery and is much better than many other sliders out there. It has a pile of properties and display options to play with. I have been able to customize and use it in every possible need, so there is a chance it helps you out also. Supports custom height, width, tabs on top/bottom, without tabs, custom arrows, … and a lot more.

24. jQuery Lightbox

The prototyped lightbox was very popular and I used it in a couple occasions. But since I’ve switched to jQuery, I hardly found any replacement for that. Thickbox and a couple other tried (and they were very good implementation), but couldn’t make me feel the same way. Suddenly I found this one and I knew its the one. A one-liner implementation and all the features from my previous fav is back. It has a number of customization also, if you need to modify the way it behaves.

25. Auto Completer

Auto-completes have been there and I mentioned some great ones in my previous posts, but this one has also captured my attention and I like it very much. The author has gone a few extra miles and has explained the inner workings of the plugin. But if you just want to try it out, you can check the demo.

Categorized jQuery Essentials

A lot of people have asked me to categorize the posts so that it’s easy to pick for them. I waited for this post before doing that so I will do a categorized post of the cumulative list of plugins from the 3 posts in the series.

Happy jQuery !

Now, there are a number of solutions to this problem. Instead of explaining them all to you, lemme provide you the simplest one: using a PHP transport file. If you already know the thing and just need the script, download from here.

Others, let’s see an example implementation first.

Example use

   1: xmlHttp.onreadystatechange=function()

   2: {

   3:     if(xmlHttp.readyState==4)

   4:     {

   5:         alert(xmlHttp.responseText);

   6:     }

   7: }

   8:  

   9: xmlHttp.open("GET", 'http://myserver.com/transport.php?action=' + 

  10:                     urlencode('different-server.com/return_call.php') +

  11:                     '&method=get&data1=101&data2=pass', true );

  12:  

  13: xmlHttp.send(null);

Now, lets see how it works:

1. The script makes an AJAX call to the myserver.com/transport.php with a few parameters:
   • action = the target URL you need to fetch, from a different domain
   • method = the HTTP method (post/get)
   • data1, data2 = sample parameters for using as either query-string or POST fields
2. When the request is received by transport.php, it uses cURL to make a call to the page mentioned in action.
3. Based on the method, it either makes a GET request or a POST request. In both cases, it sends the extra parameters that are sent.
4. After the response is received, transport.php echoes it. So, you have what you need!

Download

transport.php Cross-Domain AJAX call transporter. Downloaded: times

Comments and suggestions are most welcomed

The new collection walks through some more areas in the web toolkit where jQuery can help UI builders out. Although it contains the elements missing from the last post, it also includes better implementation of some previously mentioned element (for example, the tabs).

Without more blabbing, here we go:

11. InnerFade with JQuery

“InnerFade is a small plugin for the jQuery. It’s designed to fade any element inside a container in and out. Thess elements could be anaything you want, e.g. images, list-items, divs. Simply produce your own slideshow for your portfolio or advertisings. Create a newsticker or do an animation.”

12. jQuery BlockUI Plugin

The jQuery BlockUI Plugin shows the gray overlay over your whole page or a page element to prevent the users from interacting with it. Its very useful in conjunction with AJAX, where you need to intentionally limit the user’s actions for some time. The author has included a number of examples matching most practical uses.

13. tablesorter 2.0 (beta)

This excellent implementation of a table sorting has made its way even if its in the beta stage. I’ve looked for a simple solution of this type for too many times, and now finally found it. It allows you to present your data in table and will allow multi-column sorting behavior to it. And implementation is pretty straight-forward.

14. jCalendar

A beautifully done inline dynamic calendar with a few useful features – navigation, auto sizing, degradation, etc. It looks aesthetically pleasing to me than many other calendar implementation.

15. idTabs

A fabulous tab implementation using jQuery! It has outnumbered all the implementation before. A ticker in the site says the best thing to me: “It’s not overloaded with features, it gets to the point.” Superbly done!

16. EasyDrag jQuery Plugin

A great implementation of drag n drop functionality using jQuery. It makes any DOM element draggable, with the minimal amount of code. Very handy if you want to facilitate the user with something on the site that they can move along and place wherever they need.

17. jTagEditor

It’s a nice, simple plugin that can turn your textarea into a tag editor. The editor can provide a variety of commands in a non-WYSIWYG way. Helpful if you would like your visitors enter contents without much fuss. Its lightweight and customizable. And the author shows some good examples as well.

That will conclude the list for today. Again, thanks to the visitors who came by to pay a visit and also to the mighty resource finders: Google, Ajax Rain, Ajaxian, and AJAX Magazine.

Goodbye for today!

Md Emran Hasan
Co-founder & CTO
Right Brain Solution Ltd.

1. Interface Elements

“Interface is a collection of rich interface components which utilizes the lightweight JavaScript library jQuery. With this components you can build rich client web applications and interfaces with the same simplicity as writing JavaScript with jQuery.”

2. jQuery Tabs

“It’s a jQuery plugin that lets you create JavaScript tabs very easily – once you assembled the HTML with just one line of JavaScript code.”

3. jQuery Start Ratings

“Here is a quick and dirty re-creation of a star rating plugin. This is a fully degradable plugin that creates the Star Rating interface based on a simple form structure.”

4. jEditable – in place editing

“My name is jEditable and I am inplace editor plugin for jQuery. With few lines of JavaScript code I allow you to click and edit the content of different xhtml elements.”

5. jQuery Date Picker

“Welcome to the homepage for version 2 of the jQuery datePicker plugin. This is a complete re-write from the ground up to add power and flexibility to the date picker.”

6. jQuery Multi File Upload

“jQuery.MultiFile is a plugin for jQuery to help users easily select multiple files for upload in a concise quick and easy manner.”

7. jQuery Portlets

The portlets feature drag/drop, expand, collapse and many more features!

8. jQuery Autocomplete

jQuery plugin: Autocomplete is very easy to integrate to your existing forms.

9. Better tooltip

This plugin enhances the default tooltips. You can style them via stylesheets and improve their behaviour. The tooltip is shown at the mouse position and moves if there isn’t enough space.

10. Form Validation

An excellent way of validating your forms with a mix of jQuery, CSS and some HTML markup. Truly marvelous!

That’s full pack! I hope these will help you out with you jQuery’ing. Many other sites helped me find these resources, including Google, Ajax Rain, Ajaxian, and AJAX Magazine.

Goodbye for today!

Md Emran Hasan
Co-founder & CTO
Right Brain Solution Ltd.