Javascript Guru

Animated JavaScript Slideshow is a free & lightweight script to display images with style.
It simply turns an unordered list into a gallery which can be customized easily.



You can set it to auto-display the images or it can be browsed manually with the prev-next buttons.

The slideshow provides several other controls like:

• Speed of the slideshow
• Information to be displayed or not
• Opacity of the images & more..

P.S. It does not require any JavaScript library.

xBug is a JavaScript debugger that enables you to trace or step through your JavaScript code in real-time
It works with Chrome, Firefox 2/3, IE 6/7 & Safari 3.

Using xBug, you can:

• set breakpoints, and watchpoints in a separate code window
• see a trace log while your code is executing
• inspect variables
• get an indexed list of the functions/methods, and more…

P.S. It currently runs on the Windows platform.

Requirements: Windows platform
Compatibility: Chrome, Firefox 2/3, IE 6/7 & Safari 3
Website: http://www.xbug.co.uk/
Download: http://www.xbug.co.uk/download.htm

JavaScript, with the rise of Ajax, is definitely a must-know-well for every web designer/developer.
Besides form controls, alerts & similar simple JavaScript usage, you can almost do anything with the help of JavaScript (& Canvas). Some samples are:

• Drag’n drops
• Animations
• CSS manipulations, Ajax & more.

And there are JavaScript libraries which make them easier like jQuery, MooTools, Prototype, etc.
For any developer looking for advanced JS techniques, games are a real treasure.

You can easily see examples of animations, interactivity, smart solutions for browser related math functions & so.. And they are definitely a source of inspiration as you sometimes face with a feature that you never thought could be existed.
Also, this is the last month of a busy year & every web designer/developer deserves some fun : ).
So, here are 25 amazing (sometimes not the game itself but how beautifully it’s done) JavaScript games that you’ll love.

Bunny Hunt

A classic hunting game with an easy to play interface.
Make sure you check the source of the website to see how simply it is built with the power of XHTML, CSS & JavaScript.
JavaScript Library: none.

Travians

A character game (like Sims) where you’re a villager.
It is a multiplayer game & totally Ajaxed. You can move your character, communicate with other user & more.
JavaScript Library: xajax.

Digg Attack

This is certainly a Web 2.0 game. It is a JavaScript / Canvas 2D Shooter using live data via the Digg API to spawn enemies.
All the images are rendered with Canvas in real-time.
JavaScript Library: none.
Read the rest of this entry »

Pixastic is an open source JavaScript image processing library.
It uses HTML5 Canvas element that enables accessing to raw pixel data.

Supported effects are:

• desaturation/greyscale
• invert
• flipping
• brightness/contrast adjustment
• hue/saturation
• emboss
• blur & more

There is an image editor built with it & the library is well-documented.

Requirements: No Requirements
Compatibility: All Major Browsers (IE requires ExCanvas)
Website: http://www.pixastic.com/
Download: http://www.pixastic.com/lib/download/

Niceforms, a script to beautify web forms, was very popular for creating beautiful forms. And now the 2nd version is out.
Niceforms 2.0 is a totally re-written version which is very easy to apply, handles more elements & has more customization options.

How to use it?

The script simply replaces the most commonly used form elements with custom designed ones.
Inserting the niceforms.js & the CSS file is enough to use it.
Besides the default theme, new themes can be developed with CSS editing.
Niceforms works in all modern browsers except IE6 (it gracefully degrades).

Requirements: No Requirements
Compatibility: All Major Browsers (except IE 6)
Website: http://www.emblematiq.com/projects/niceforms/
Demo: http://www.emblematiq.com/niceforms/v20/niceforms.html

This is an easy to implement multi-level drop-down menu.
It is lightweight (1.2kb) & supports multiple instances on one page.


Rather than complicated JavaScript backends, this script converts an unordered list into a menu.
Sub-menus are displayed with an easing animation & it supports all major browsers.

Requirements: No Requirements
Compatibility: All Major Browsers
Website: http://www.leigeber.com/2008/11/drop-down-menu/
Demo: http://sandbox.leigeber.com/dropdown-menu/index.html

JavaScript Table Sorter is a lighweight code (1.7kb) for transforming standard tables into a sortable grid.
It includes alternate row formatting, header class toggling, auto data type recognition and selective column sorting.


After inserting the JS file into the website, a simple function does the job:
var sorter=new table.sorter("sorter");
sorter.init("sorter",1);
It is possible to mention which column will be sorted by default & which columns won’t have a sort feature.


Requirements: No Requirements
Compatibility: All Major Browsers
Website: http://www.leigeber.com/2008/11/javascript-table-sor...
Demo: http://sandbox.leigeber.com/sorter/index.html

NiftyPlayer is a tiny open source Flash MP3 player with a very simple interface.
It is lightweight (4kb) and usage does not require any Flash knowledge as the URL is mentioned in HTML.



The player can be easily controlled with JavaScript besides the Flash interface, like changing the file to be played, stop & start. With this feature, you can even bypass the whole Flash look.

Some other features are:

• Autostart capability
• Draggable/Clickable seek bar
• Simple operation with Play/Pause and Stop buttons
• Buffering with progress bar
• Buffering is stoppable! (through Stop button)
• Volume control

Website: http://www.varal.org/media/niftyplayer/