ProtoFish is an advanced dropdown menu script which supports multilevel navigations & built with Prototype.

The script is lightweight (1.3kb minimized), unobtrusive & cross-browser.

The hover class used & delay effect of the menus can be customized with ease.

It is accessible via keyboard using the TAB key & multiple instances of ProtoFish menus can be used on the same webpage.

For demos with various number of of levels & delay effects, click here.

JSXGraph is a cross-browser library for interactive geometry, function plotting, graphs, and data visualization in a web browser.

It is implemented totally in JavaScript and uses SVG and VML.

A graphic can be created via:

• 100% JavaScript
• a GEONExT file (or string)
• an Inteorgeo file

It supports many, basic to advanced, mathematical functions that make creating complex visualizations easier.

P.S. JSXGraph requires Prototype JS library to run.

JSValidate is a free library for validating forms that requires Prototype & Script.aculo.us to run.

Some rules it supports are:

• Required field
• Only numbers
• Only letters
• E-mail
• Credit card number format
• US zip code, phone number & state code formats

It works by simply updating class tags of forms with the related rule information.

It lets you define in which tag & class the errors will be displayed & some more.

There is also a jQuery port on the way, named JValidate, which is not out yet but will be sharing at WRD for sure when it is published.

Ferdinand.Slider is a Prototype extension for creating simple image slideshows.

It uses a JSON file at any location as the data source which makes it possible to integrate with Flickr or similar services easily.

The extension has several options to set:

• duration of effects
• duration of image transition
• opacity
• background
• prev-next buttons & more.

It is also possible to add more features (like a menu) to the slider as it can be controlled from outside with commands like slider.Next(), slider.Prev().

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 »

kProto is a collection of 3 handy Prototype based classes & extensions. Here they are:

Marquee - examples

It is a Prototype extension (& requires Script.aculo.us) that enables you to display a series of messages with ease.

Using the extension, it is possible to create message sliders, image galleries (or sliders similar to the portal websites) & more.

With a list of options, the extension is very flexible.

It supports:

• start, stop, next, previous actions
• delay
• animation when a message appears & another animation when it disappears
• before-after options to fire any function between events
• & several transition effects.

Growler - examples

 It is a class for displaying unobtrusive messages like OS X Growl.

Growler can be styled with CSS & very suitable for displaying activity-info messages.

It has several options:

• In & out speed of the message
• life of it (after howmany seconds it willl disappear)
• functins to be fired before any event 6 more.

Package - examples

This class allows developers to dynamically create namespaces. These namespaces can be used to better organize your code. They also help to reduce the amount of code that pollutes the global namespace.

Package also allows any javascript and css file to be included dynamically without being namespaced whether local or cross domain.

PrototypeXtensions is a Prototype.js and Script.aculo.us based JavaScript library.

It aims to add extra methods & components to Prototype.

Currently, it has 3 components:

• Core extension: class, cookie, event management & time calculations.
• History: easy "set/get" parameter on hash of URL, observe the hash of URL & more.
• Tabs: show / hide, select, Ajax / iframe.

Although the library is in very beta state, it is promising when considered what it currently does.

Lightbox is generally used with HTML coding. In order to start it from Flash, here is a good solution.

flashLightBoxInjector, is a PrototypeJS class that connects Flash and Lightbox2. Besides starting an already existing Lightbox driven gallery, it also lets you dynamically build a list of images to show through Lightbox.

The great thing about flashLightBoxInjector is that its usage is not limited to Flash only, as the JavaScript can be called from anywhere you like.

Here is a working demo (click twice to fire the Lightbox).

FancyZoom, a Lightbox alternative which has a Mac-like zoom effect, is now ported to jQuery & Prototype. Best of all, now, they can present any HTML.

They also have some additions to the standard FancyBox like:

• The zoom will close when clicking outside the zoom box area.
• Hitting the esc key will close the zoom window.
• Passing an option of closeOnClick: true into the fancyZoom function will close the zoom when the contents are clicked as well. This works great for image galleries.

Click here for the jQuery version & here for the Prototype version.

Flickrshow is a lightweight, cross-browser JavaScript code that enables you the display your Flickr images as a good looking Ajaxed slideshow.

The script is very easy to install & can be set to show images within Flickr groups, photosets or tag based images.

Flickrshow has a cache system that enables the presentation of images faster. And, presentation can be managed with a play/pause button.

Also, you can easily modify the theme completely via CSS.

P.S. The application requires Prototype & a small part of Scriptaculous library.