Posts Tagged ‘script.aculo.us’

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

JavaScript Form Validation

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.

Prototype JSON Image Gallery

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().

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

 

Marqueeexamples

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.

Prototype Message Extension

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.

 

Growlerexamples

 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.

Prototype Growl

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.

 

Packageexamples

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.

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

PHP Ajax Contact Form

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

Prototype Contact Form

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

Ajax jQuery Contact Form

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

Script.aculo.us Contact Form

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 »

Showcase is a Prototype extension that displays a "list of images" as a CoverFlow gallery.

And, besides the standard horizontal look, it works both vertical & diagonal.

Prototype Coverflow

The extension can be easily configured to display any number of images, durations of the animation can be updated & more.

Showcase requires the effects.js component of Script.aculo.us & works in all major browsers.

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

It aims to add extra methods & components to Prototype.

Prototype Extensions

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.

LightWindow is a highly configurable Lightbox (modal window) solution built with Prototype & script.aculo.us.

It can display any media including Flash, Quicktime or an external website. And, it has gallery support with a multi-gallery feature.

Prototype Lightbox

The modal window can be custom positioned and it is automatically resized to fit the content.

LightWindow can be re-styled including markup, CSS & animations easily. Besides clicking on the close button & outside of the modal window, ESC key works for this feature too.

DhoniShow is an easy to setup image gallery script built with Prototype & Script.aculo.us.

The transitions between the images can also be updated with simple parameters too.

Prototype Image Gallery

How to use this image gallery?

  • Insert the Prototype, Scrip.aculo.us and dhonishow.js files into your webpage.
  • Create a div element with the class=dhonishow and add any number of images inside the div. Like this:

<div class="dhonishow">
  <img src="img/cute_cat.jpg" alt="My cute cat." />
  <img src="img/cute_dog.jpg" alt="My cute dog." />
  <img src="img/cute_hamster.jpg" alt="My cute hamster." />
</div>

Smart Lists, a light-weight (8KB) Prototype-script.aculo.us framework extension, converts HTML lists into categorized, paginated lists. And, It does not require a database or server-side script.

It can be applied to existing lists with very little effort, providing a significant bump in usability.

Prototype Liste Extension

Smart List is easily configurable with different hide/show effects for items and changing pages, speed of the effects and number of the items for paging.

Besides supporting all the major modern browsers, it degrades gracefully for unsupported browsers.

ProtoFlow is an open source content viewing application built with Prototype & script.aculo.us which functions similar to the famous iTunes Cover Flow.

You can browse through the content (it supports all the HTML elements) with mouse clicks or a JavaScript slider.

Prototype Cover Flow

It is mentioned that the application may have more features in the future like auto-play and image reflection.

feed-holder
FeedBurner
  • 17% Off Web Hosting Sale - eTecc Web Hosting
  • PSD to HTML
  • RapidxHTML - Converts Your PSD into XHTML Rapidly
activeCollab | Project Management
  • MailChimp
  • PSD to HTML
  • Manage your clients email marketing with sendcube

Vivvo CMS - Web Publishing at your Fingertips

Popular Posts


Cheap SSL Certificates