I was googling around for an open source video player to embed video streams into my web pages and found the Flowplayer, a powerful video player that offers advanced streaming technologies such as bandwidth detection, clustering and secure streaming.

It was then I discovered jQuery Tools,  an user-interface library developed by the same team that creates Flowplayer. This library consists of 6 most useful user-interface components packed in single Javascript file that weighs only 5.72 kb.

Using the Tools with other plugins and libraries

jQuery Tools can be used together with other libraries and plugins such as MooTools, Ext JS or Prototype.

Browser Support

jQuery Tools have been proven to work with following browsers:
Firefox 2.0+, Internet Explorer 6+, Safari 3+ , Opera 9+, Chrome 1+

1. Tabs

Tabs play a big role in creating user-friendly and well-organized websites. It can be easily implemented using jQuery Tools.

Example 1 : Basic Horizontal Tabs

Example 2 : Mouse over to switch tabs

View more demos with detailed explanation

2. Tooltip

Tooltips are usually small, boxed text that pop-up when a user hovers the triggers (image, button, div etc) .

Example 1 : Tooltip triggered by Image tag

Example 2 : Using tooltips in form fields

View more demos with detailed explanation

3. Overlay

Overlaying HTML elements allows you to highlight the important parts of your website to your users. It can also be used to  prompt an action from your users by fading out the rest of the content in the main document.

Example 1 : Using Overlay for Gallery

Example 2 : Prompting user input

View more demos with detailed explanation

4. Expose

Make your HTML elements stand out by fading out the surrounding elements with the expose tool. This is something similar to Overlay components.

Example 1 : Exposing a form

Example 2 : Exposing a video with custom mask

View more demos with detailed explanation

5. Scrollable

Scrollable is the most successful tool in this library. It allows you to scroll your HTML in many ways:-

1. Clicking the elements
2. Clicking the control buttons
3. Using your mouse scroll wheel
4. Using the left and right arrow keys from your keyboard

Example 1 : Gallery using scrollable

Example 2 : Tabs using scrollable components

View more demos with detailed explanation

6. Flashembed

With the role of Javascript is rising at a fast pace, we are not surprise that it will be employed to embed Flash objects.

Example 1 : Embedding multiple Flash objects

Example 2 : Embedding Flash Movie and Placing HTML on top of it

View more demos with detailed explanation

Incoming search terms:

I have been very busy lately.. learning how to create an AJAX application using PHP, Javascipt and CSS. AJAX (Asynchronous JavaScript and XML) is a web development technique used for creating interactive web applications.

You probably have seen AJAX in action before but you might not realize it. Google uses AJAX in most of their web applications which include Gmail, Google Maps and Google Calendar.

Some says it is just a hype but if it is only a hype, then why top international web brands like Yahoo, Microsoft, Google and Amazon use AJAX to enhance user experience of their respective websites?

I am sorry if this post is too technical for you. Just a short update for you guys.