Tag: prototype

Multilevel Dropdown Menu | Navigation script – ProtoFish

/ 0 Comments / Category: Javascript/Tags: Menus, prototype

ProtoFish – is an advanced Multilevel Dropdown Menu / Navigation script based on Prototype. You can easily add a delay to your menu (on mouseout) and choose your own hover class.

View ProtoFish Demo

ProtoFish is:

lightweight script – only 5.2kB.
unobtrusive – fallback to a standard CSS hover menu.
cross-browser – IE6+, Safari 3+, Opera 9+, Chrome, Firefox 2+.
fully customizable.
accessible for keyboard navigating users (ARIA support can be turned on).
Supprot multiple instances per page with unlimited sublevels.
and is free (MIT License).

Panoramic Photoviewer in Javascript

/ 0 Comments / Category: Javascript/Tags: prototype, Scriptaculous

Panoramic Photoviewer in Javascript – an easy tutorial on how to create a custom panoramic photo viewer with the smooth image moving effect, or horizontal menu moving effect, only by moving the cursor. Panoramic Photoviewer uses the Prototype Javascript library.

View Examples

Zoomy.js – Simple Image Magnification with Customizable Options

/ 0 Comments / Category: Javascript/Tags: Gallery, prototype, Scriptaculous

Zoomy.js – a Prototype class that allows you to easily create Image Gallery. The script make simple magnification of images with customizable options, as popup and overlaying boxes.

Images are preloaded, there is no delay when you zoom. You can display caption and close button (optional) and open new window from a link to the caption, zoomed images may be dragged.

Zoomy.js package contains a patched version of Prototype 1.6 library (to correct bugs on Opera 9.5) + Scriptaculous (effect, dragdrop).

All you need is to add the required HTML markup and customize CSS stylesheet. The miniature is made from the original image used as background and then initialize Zoomy.

CoolTips – a Lightweight Unobtrusive JavaScript Tooltips

/ 0 Comments / Category: Javascript/Tags: prototype, Scriptaculous, Tooltips

CoolTips is used to replace conventional web-browser tooltips. The tooltips get the contents of the title attribute, so it’s fully unobtrusive. CoolTips is an OO class based on Prototype JS and script.aculo.us frameworks.

CoolTips Options:

backgroundColor: Default is ‘#999′.
borderColor: Default is ‘#666′.
textColor: Default value is from CSS.
textShadowColor: Text shadow color (works only in Safari yet). Default value is from CSS.
maxWidth: Maximum allowed tooltip width in pixels. Default is 250.
delay: Delay before tooltips appearing in milliseconds. Default is 250.
mouseFollow: Tooltip will follow the mouse cursor. Default is true
opacity: Target opacity of tooltips. Default is .75
appearDuration: Appear fade in effect duration in seconds. Default is .25.
hideDuration: Hide fade out effect duration in seconds. Default is .25.

Showcase – a Prototype Extension

/ 0 Comments / Category: Javascript/Tags: prototype, Scriptaculous

Showcase.js needs the Prototype JavaScript framework (version 1.6) and the effects.js component of Script.aculo.us (version 1.8) in order to function.

Besides Horizontal, there are 2 more layouts: Vertical and Diagonal.

You can set up ratio – this is the ratio between the center slide and the ones at the ends, size – the total number of slides visible at one time, duration – duration of a full movement, initialDelay – this controls the amount of time that passes from the moment the Showcase is initialized to the moment the slides spread out, creating a nice start-up effect, and of course direction – Horizontal, Vertical or Diagonal.

Smart Lists – convert HTML lists into categorized, paginated lists

/ 0 Comments / Category: Javascript/Tags: prototype, Scriptaculous

Smart Lists is a Prototype/Scriptaculous extension that converts flat HTML lists of information into categorized, paginated lists.

Smart Lists extension does not require a database or server-side script and downgrades gracefully if JS is not enabled.

You have a choice for the item hide/show effect (Blind, Fade/Appear, Grow/Shrink, none), choice for changing page effect (Blind, Fade/Appear, Grow/Shrink, none), Control over speed at which effects occur, number of items per page and much more.

Browser friendly and supports Firefox 2, IE6+, Safari 2+ and Opera 9+.

GlassBox Javascript Library

/ 0 Comments / Category: Javascript/Tags: Javascript, prototype, Scriptaculous

GlassBox is a Javascript library which use Prototype and Script.aculo.us for some effects. With GlassBox you can build impressive transparent borders, colorful layouts and “Flash-like” effects.

GlassBox is licensed under the terms of the MIT License. This means: you can use it, free of charge, for anything you like.

Lightview 2 – overlay anything, not just images

/ 1 Comment / Category: Javascript/Tags: Gallery, prototype

Lightview is a Prototype/Scriptaculous ~~image~~ viewer with adjustable rounded corners, smart image resizing, build in slideshow and works on all modern browsers.

Nick Stakenburg has released Lightview v2. With Lightview v2.0 you can also overlay video (Quicktime), Ajax, Flash .swf, iframe and inline content.

Download and include Prototype 1.6.0.2 and Scriptaculous 1.8.1 in your header. If the filesize is to big for you, with Protopacked you can have the required files, Prototype and effects.js, starting at 28kb.

Control.Tabs – Unobtrusive CSS tabs for Prototype.js

/ 0 Comments / Category: Javascript/Tags: prototype

Control.Tabs attaches creates a tabbed interface from an unordered list of links/anchors that point to any elements on your page that have an id attribute.

controltabs unobtrusive css tabs prototypejs