VT’s Tech Blog

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

Janko Jovanovic’s got an excellent tutorial which shows you how to highlight the current active form area to improve usability of forms. He achieves this using jQuery.

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 some cool stuff – Google’s Hosting some popular Javascript Ajax libraries like jQuery, prototype and the likes on their servers. You use this service to serve the supported libraries straight off Google. They also provide you with the option to load a particular version of the library so you won’t have to keep checking your code everytime a latest release is made.

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

Here’s a cool image gallery script written in Javascript. It’s quite easy to integrate into your site. This is how the author describes ImageFlow:

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

Instead of eyeball tracking for usability professionals, here’s a way to track the mouse movements and click events of a user on a page.

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