jQuery Tools provides some UI addons to the basic jQuery Library. You can create Tabs, Accordions, Tooltips, Overlays and more using this library. The whole library fits in less than 6Kb, so you can replace all the separate libraries you are using for these functionalities by using this library.

The library has an easy to use API, which both beginners and advanced developers can use to integrate. To show you how easy it is to setup tabs in this library, here’s an example from their site. The HTML code looks like this:

<!-- the tabs -->
<ul>
	<li><a href="#">Tab 1</a></li>
	<li><a href="#">Tab 2</a></li>
	<li><a href="#">Tab 3</a></li>
</ul>
<!-- tab "panes" -->
<div class="panes">
<div>pane 1 content</div>
<div>pane 2 content</div>
<div>pane 3 content</div>
</div>

The Javascript which powers the tabs is simply :

// setup ul.tabs to work as tabs for each div directly under div.panes
$("ul.tabs").tabs("div.panes > div");

To see this in action and more information on the code, check this link out:
http://flowplayer.org/tools/tabs.html

You can also check out the other functionalities which this library provides :

• Tooltips ( this example shows tooltips working on form fields)
• Overlays
• Accordians
• Other Demos

Learn more about jQuery Tools over at: http://flowplayer.org/tools/index.html

Related articles by Zemanta

• jQuery from the very beginning (slideshare.net)
• Glimmer – jQuery Made Easy (blogs.msdn.com)
• jQuery UI 1.7 Released: New CSS Framework & Dramatic Updates to Controls (ajaxian.com)

PHP programmers usually have to handle HTML & Javascript front-end coding as well and I’m sure a lot of us have been frustrated with the lack of those easy to use PHP functions in Javascript like those array, encode/decode and string functions. Here’s a Javascript project which provides you just that.

PHP.JS is an open source project started by which aims at providing the standard PHP functions for Javascript development. This eases up programming in Javascript for PHP developers as they can use functions they are familiar with. Currently the project has ported around 230+ PHP functions.

To use this library all you need to do is to download the php.js file and include it in your page:

<script src="/pathto/php.js"></script>

Then use use the function as you would in PHP. For example if you want to use the urlencode function in Javascript, just use it like this in Javascript

urlencode('http://blogs.vinuthomas.com/');

This should return ‘http%3A%2F%2Fblogs.vinuthomas.com%2F’. As easy as that !

Edit: As Kevin mentioned in the comments below, don’t use the entire php.js file in your projects, just use the function you need.

History of PHP.JS from (phpjs.org):

A developer called Kevin van Zonneveld was once working on a project with a lot of client(JS) / server(PHP) interaction, and he found himself coding PHP functions (like base64_decode & urldecode) in JavaScript to smoothen communication between the two languages.

He stored the stored the functions in a file called php.js which was included in the project. But even when the project was done, it remained fun trying to port PHP functions to JavaScript and so the library grew.

Kevin decided to share the little library online, which triggered the enthusiasm of a lot of PHP developers longing for PHP functionality in JavaScript. The project was open sourced in 2008, and many people contributed their own functions in the comments sections of Kevin’s blog.

It was decided that the library deserved a bigger home, and a face of its own, and so the PHP.JS core team (which at that time also consisted of Michael White, Felix Geisendörfer, Philip Peterson) developed the phpjs.org website

Links:
PHP.JS Home Page
List of Functions available in PHP.JS
Download PHP.JS

He shows how to construct the form, style it and uses jQuery magic to get this functionality working for the form. He mentions that this improves the usability of large forms by focusing the user on the current action on the form.

You can see a demo of this over at:
http://www.jankoatwarpspeed.com/examples/ContextHighlighting/

Head over to the tutorial over at: Context highlighting using jQuery

Related articles by Zemanta

• Chain.js: jQuery Data Binding Service
• Designing Your Page Around a jQuery UI Theme

Raphaël is a small JavaScript library  released under the MIT License that helps with creating and playing with vector graphics on the web.

Raphaël uses SVG and VML as a base for graphics creation. Because of that every created object is a DOM object so you can attach JavaScript event handlers or modify objects later. Raphaël’s goal is to provide an adapter that will make drawing cross-browser and easy. Currently library supports Firefox 3.0+, Safari 3.0+, Opera 9.5+ and Internet Explorer 6.0+.

Once you include raphael.js in your HTML file, try the following example. Once that displays on screen, click on the black box which shows up to see how the onclick function on box1 works.

// Creates canvas 320 × 200 at 1, 1
var paper = Raphael(1, 1, 320, 200);
// Create a regular rectangle
var box1 = paper.rect(15, 15, 30, 30);
//Set the box fill to black
box1.attr("fill", "#000");
// Set the box stroke color to white
box1.attr("stroke","#fff");
// create a rounded rectangle
var box2 = paper.rect(10, 10, 100, 50, 10);
// set box2's fill to grey
box2.attr("fill", "#ddd");
 
//Bring Box1 to the foreground
box1.toFront();
 
//Attach a onclick function to box1 to change the color of the box
// to blue when clicked
box1[0].onclick = function () { box1.attr("fill", "blue"); };

Links:
Raphaël Home Page
Documentation

Related articles by Zemanta

• Raphaël: Simple graphics wrapper on top of SVG and VML

Here’s how you would load jQuery version 1.2.3 using this API:

<script src="http://www.google.com/jsapi"></script>
<script>
  // Load jQuery 
  google.load("jquery", "1.2.3");
 //Continue using jQuery
</script>

The AJAX Libraries API is a content distribution network and loading architecture for the most popular open source JavaScript libraries. By using the Google AJAX API Loader’s google.load() method, your application has high speed, globaly available access to a growing list of the most popular JavaScript open source libraries including:

• jQuery
• prototype
• script.aculo.us
• MooTools
• dojo

Google works directly with the key stake holders for each library effort and accept the latest stable versions as they are released. Once we host a release of a given library, we are committed to hosting that release indefinitely.

Links:

Google Ajax Libraries

Documentation

PersistJS is a simple to use Javascript to store persistent data on the client Browser. This library supports multiple back-ends which are listed later. The following example will show you how easy it is to store and retrieve data using PersistJS.

To Store Data:

// create a new client-side persistent data store
var store = new Persist.Store('My Data Store');

// pretend data
var data = "pretend this is really long data that won't fit in a cookie";

// save data in store
store.set('saved_data', data);

To Retreive Data:

// get data back from store, and prompt user with it
store.get('saved_data', function(ok, val) {
  if (ok)
    alert('saved data = ' + val);
});

PersistJS addresses all of the issues above. It currently supports persistent client-side storage through the following backends:

* flash: Flash 8 persistent storage.
* gears: Google Gears-based persistent storage.
* localstorage: HTML5 draft storage.
* whatwg_db: HTML5 draft database storage.
* globalstorage: HTML5 draft storage (old spec).
* ie: Internet Explorer userdata behaviors.
* cookie: Cookie-based persistent storage.

You can also remove storage engines you don’t want to use in PersistJS by removing that storage engine by code:

// never use cookies for persistent storage
Persist.remove('cookie');

Links:
PersistJS Project Home Page
Download PersistJS

How would you like to get an email with the javascript error and debug info about that error as soon as a visitor on your site encounters it? DamnIT provides you just that service:

DamnIT is a free service that emails you when a user encounters a JavaScript error in your webpages.

To get DamnIT installed for your site, just signup for an account and call a JS script – this works fine for IE and Firefox. If you want to install DamnIT on other browsers, you’ll need to place try…catch blocks. Learn more about DamnIT over at: http://damnit.jupiterit.com/home/learn

Link : DamnIT: Javascript Error Handling

ImageFlow is a picture gallery, which allows an intuitive image handling. The basic idea is to digitally animate the thumbing through a physical image stack. That intuitive handling is automatically caused by the metaphorical use of the well known process of thumbing through.

The script is compatible with the browsers on Windows, OSX and Linux:

• IE 6.0+
• Firefox 2.0.0.9+
• Opera 6.0+
• Safari 1.3.2+
• Konqueror  3.5.7

The current version of ImageFlow’s features are listed below :

• Supports most image formats
• Supports large amounts of images (>100)
• 100% JavaScript
• Scroll bar
• Mouse wheel support
• Arrow-key support
• Loading bar
• Captions
• Supports image links
• Scales 100% dynamically
• Implemented using div Tags

Links:
Download ImageFlow 0.8
ImageFlow Site
ImageFlow Documentation

Here’s a blog which lists out 240 plugins for jQuery. The list of plugins there covers almost everything you’d need to do with Javascript. If you haven’t yet heard of jQuery, head over to jquery.com and check that out. Once you’ve jQueried, you’ll never want to return to regular Javascript !

To check out the list of jQuery plugins, head over to http://www.sastgroup.com/jquery/240-plugins-jquery

The “movelogger� records the mouse movement a users does on a web site. Just before the user leaves the current page, the recorded data get posted back to the server using AJAX.
The cool thing is that you can “replay� these movements afterwards.

Want to try out a demo ? Check this link: http://pure.rednoize.com/movelogger/
Link: puRe aka Marcel Oelke » Record mouse movement using Javascript and AJAX

“All browsers include a “View Source” option, but none of them offer the ability to view the source code of external files. Most websites store their javascripts and style sheets in external files and then link to them within a web page’s source code. Previously if you wanted to view the source code of an external javascript/css you would have to manually look through the source code to find the url and then type that into your browser. ”

Link: JSView :: Mozilla Add-ons :: Add Features to Mozilla Software

Link: JSON and PHP: More Than Web Services — a/r/t by php|architect

function js_array_to_php_array (a)
// This converts a javascript array to a string in PHP serialized format.
// This is useful for passing arrays to PHP. On the PHP side you can
// unserialize this string from a cookie or request variable. For example,
// assuming you used javascript to set a cookie called "php_array"
// to the value of a javascript array then you can restore the cookie
// from PHP like this:
// <?php
// session_start();
// $my_array = unserialize(urldecode(stripslashes($_COOKIE['php_array'])));
// print_r ($my_array);
// ?>
// This automatically converts both keys and values to strings.
// The return string is not URL escaped, so you must call the
// Javascript "escape()" function before you pass this string to PHP.
{
var a_php = "";
var total = 0;
for (var key in a)
{
total;
a_php = a_php "s:"
String(key).length ":\"" String(key) "\";s:"
String(a[key]).length ":\"" String(a[key]) "\";";
}
a_php = "a:" total ":{" a_php "}";
return a_php;
}

Read the article for more details on this function’s usage.

via Tucows Farm: The Tucows Developers’ Hangout :: Source Code

ActiveWidgets is a powerful javascript component library which makes web application development (especially AJAX-style apps) a lot easier and more productive. ActiveWidgets provides you with a set of common visual elements (like datagrid, tabs, tree, combo) sharing professional look-and-feel and simple programming model.

Link: ActiveWidgets • Ajax Grid • #1 Javascript Datagrid Control and Component Library.

Here’s a link to a Wordpress Plugin which uses the same feature:
“It scans your posts for linked images and makes a nice overlay popup out of them. This is much better then linking to a new window oder even open a fullblown javascript popup. The Lighbox Popup shows a small preloader animation before showing the full image. Before i continue to talk about what it is, i better put on some example.”
Word Press Plugin: m3nt0r.de – beyond the net » Plugin: Lightbox

To see how it works, click on the image below:

[tags]Javascript, Wordpress, Plugin, image, zoom, overlay[/tags]

“In Web applications I’ve seen numerous — and personally implemented a few — ways to rearrange items in a list. All of those were indirect interactions typically involving something like up/down arrows next to each item. Then I came across Simon Cozens’ example of rearranging a list via drag & drop. I was so inspired I had to try it out myself.”

Link: Drag & Drop Sortable Lists with JavaScript and CSS

[tags]Javascript, CSS[/tags]