jsTree is a cross-browser, free & flexible JavaScript tree component with various features.

It can create the tree from the following data sources:

• predefined HTML
• JSON
• XML

Different types of nodes (open, close, rename, create, delete) can be created & supports various callbacks (onchange, oncreate, ondelete, onload, etc …).

A great feature is async loading for creating dynamic trees by simply mentioning an URL for requesting data when needed.

Other features of jsTree:

• drag & drop of nodes
• multiple node selection
• multilingual - same tree in as many languages as you like
  
• ability to customize the look & feel
• animated open/close of nodes
• optional keyboard navigation
  
• ability to move nodes between multiple trees

The component can also work as a jQuery plugin.

Slideshow JS is a free JavaScript library which helps creating an image slideshow with ease.

It is totally configurable via markup & does not require any scripting. Although the download package comes with various styles, the look & feel of the slideshow can be completely customized.

The library is built with jQuery & it is unobtrusive. It offers several options like:

• number of seconds each image will be displayed
• if the images will be displayed automatically or manually
• image counter & controls activation
• if the images will be displayed randomly or in an order
• & more..

P.S. Don’t let the blury images in the demo fool you. With quality images, the script offers a nice presentation.

When sharing codes on a website, even they are wrapped with code tags or styled differently, it is always a challenge to read them without syntax highlighting.

There are various syntax highlighters which can format the codes & color them appropriately according to the languages used. Whether it is a HTML page or runs on PHP, Ruby, Python, ASP, there is a suitable syntax highlighter.

And, here is a collection of 11 Syntax Highlighters To Beautify Code Presentation:

GeSHi (Generic Syntax Highlighter - With PHP)

GeSHi is a powerful syntax highlighter script that supports almost every language.

It is first created for phpBB forum system but became a project itself. It requires PHP to run (there is also a hack to make it work under ASP).

SyntaxHighlighter (With JS)

This is a flexible & extensible syntax highlighter built with JavaScript. It supports a wide range of languages from CSS to PHP or C++ to SQL.

SyntaxHighlighter offers ready-to-use themes an new ones can be created easily for a custom presentation.

It has support for 3rd party applications like Blogger, Wordpress, Joomla & many others.

Read the rest of this entry »

KeyTable is a lighweight (~5kb) JS library for adding keyboard navigation support to tables.

The library provides an Excel-like navigation that can be bundled with features like on-click editing.

The inline row editing feature is accomplished with the jQuery jEditable plug-in. And,  KeyTable integrates easily with DataTables (see WRD post).

The library works in all major browsers.

Marcofolio.net is presenting a nice tutorial (with source files) for creating the famous iPhone unlock interface with XHTML-CSS & the slide effect via jQuery.

Although there are missing features from the standard effect like "the slider not going back", it is still inspiring & can be used to create a form control (like captcha) or present a content in an iPhone like interface.

(See also: iPhone Application And Website Development: All Tools And Tutorials You Need)

For the slider, jQuery UI’s slider component is used.

For a demo of this interface, click here.

Few weeks ago a post at WebResourcesDepot had announced the new version of Flowplayer -an amazing Flash video player- and a chance to win free licenses of this player.

To Remind:

The player has a JavaScript API (with jQuery support) that enables you to control almost every aspect of the player.

It is totally skinnable & every part (component) of the player can be removed or re-positioned.

They have picked the winners: "3 most creative use of Flowplayer".

Here they are:

A Wordpress plugin for Flowplayer

The player is now much easier to integrate with Wordpress.

An advertising solution with the powerful Flowplayer API

The advertisement is placed under the canvas coupled with a pre-roll video ad. The content plugin is used to tell the user when the featured fighting video starts. A good example of Flowplayer scripting). 

Eye candy

Nice controlbar skinning together with fiercy red overlays. The Expose tool is used to further enhance the experience. You can see that having a custom image on the overlay is a very powerful way to visualize your pages.

Click here to go the Flowplayer’s homepage.

Ajaxify is a jQuery plugin that converts all links in a web page into Ajax load-submit requests.

So, with a single line, you can turn a static website into an Ajaxed one.

It has support for:

• History & bookmarking
• Partial load from the output
• Four events
• Forms
• Animations

In the demos page of Ajaxify, there are lots of examples presented to get you going with it.

jQuery.popeye is a plugin which transforms an unordered list of images into a simple image gallery which enlarges the image clicked in Lightbox style.

The images are displayed in a box with prev-next controls & an info about the images can be mentioned.

The compact box has fixed, automatically calculated dimensions. The width and height are calculated so that all thumbnail images are cropped to the smallest width and height in the set and centered resulting image area.

The plugin can be easily customized with a list of settings provided.

Click here for the demo.

Contact forms are the most common bridges between readers & site owners whether it is a blog or an e-commerce site.

Creating a better user experience in this bridge definitely helps improving the effect created in the eyes of the site visitors.

Depending on the features (or JS frameworks to be used) you may need, you can choose from these 16 very nice free Ajaxed contact forms & implement them easily to any website.

LightForm - Ajax / PHP Contact Form - Demo

It uses FormCheck2 for validation of fields and NiceForms to style form objects.

There is a simple captcha-like validation which ask the user a sum of 2 numbers. E-mails are sent via PHP & displays user IP, user agent and referrer in the message.

Proto Form - Contact Form With Protoype

A lightweight (only 4KB) & unobtrusive contact form that is built with Prototype.

The fields are validated & highlighted accordingly. The e-mail message is sent via Ajax and a success result is displayed.

It is a very handy form which can be installed easily.

jQuery - Ajax Contact Form (Tutorial & Files) - Demo

A very nice tutorial from Nettuts on creating an Ajaxed contact form with jQuery & PHP.

The form has an input validation. After the message is sent in th ebackgroung a "success" message is displayed to the user.

Very Chic Contact Form (English version) - Demo

This contact form uses Script.aculo.us & WForms.

An unique feature of it is, it tries to connect to the server of the sender to verify that it accepts mail to the address mentioned.

Message size can be limited and remaining characters are displayed in a box.

Read the rest of this entry »

Scrollable is a flexible & lightweight (3.9kb) jQuery plugin for creating scrollable contents.

Any content (HTML, video, text..) can be used as a scrolling item. And, it supports vertical scrolling besides the standard horizontal scrolling which makes it very ideal, specially for news sites or portals to present the flash contents.

Other features of Scrollable are:

• Setting the number of visible items
• Mouse, arrow keys and mousewheel (requires mousewheel.js) support
• Programmatic actions: next, prev, nextPage, prevPage, seekTo, begin, end
• Know when list is scrolled with custom event listener

This jQuery plugin is built by the FlowPlayer team (see WRD post) and includes great examples (this & this) with FlowPlayer integration.