CSSRockstars

Posts Tagged ‘Prototype’

There are lots of JavaScript color pickers which work great but there are few which are similar to the Photoshop’s color picker.

This JavaScript color picker has HSB and RGB options, uses Prototype and compatible with all major browsers.

JavaScript Color Picker

This script can be a solution for users who are looking for an advanced color picker in their applications.

Control Suite is a set of 6 high quality widgets and controls built with the Prototype JavaScript framework.

Each script is well tested, highly extensible and unobstrusive.

Select Multiple Textbox With Prototype

Suite has these widgets and controls:

  • Tab
  • Modal
  • TextArea
  • Select Multiple
  • Rating
  • Progress Bar

Different approach to star rating:

Prototype Star Rating

Suite is very well documented. You can easily reach the details of the APIs and this makes the product much more usable.

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.

For JavaScript and AJAX applications, Taffy DB is a beautiful tool.

Taffy DB is an open source JavaScript library that acts as a data layer inside the applications. Just think of it as a SQL database in your web browser.

JavaScript Database Library

Let’s say you have a collection of products and you want to find every product that costs less than $10 and is not a book. Simple, just write some JavaScript:
products.find({price:{lessthan:10},
type:{not:"Book"}});

Major features:

  • Under 10K!
  • Simple, JavaScript Centric Syntax
  • Fast
  • Easy to include in any web application
  • Compatible with major Ajax libraries: YUI, JQuery, Dojo, Prototype, EXT, etc
  • CRUD Interface (Create, Read, Update, Delete)
  • Sorting
  • Looping
  • Advanced Queries

Check out the Getting Started Guide for Taffy DB’s capabilities.

Online image cropping is a widely used feature in web applications.

Prototype JavaScript Image Cropper UI is an unobtrusive script based on Prototype and script.aculo.us.

It allows you to select any area in an image and gives the x, y, x1, y1, width and height values which are enough for a succesful image cropping.

Prototype Image Crop

This Prototype image crop UI also has ratio locking, selected area preview and minimum height - width options.

gotAPI provides an interface which makes it easy to reach the methods and functions of many JavaScript frameworks, scripting & programming languages, databases & even CMS softwares.

gotAPI gets the information from the original sources or trusted websites which makes the data up-to-date. Once you get used to the web interface, reaching data becomes faster because you browse all data for many APIs the same way.

gotAPI Details Of APIs

Some of the supported APIs:

  • Google GWT
  • Prototype.js
  • jQuery
  • Yahoo! UI
  • MochiKit
  • Flickr

Control.ProgressBar is a percentage based progress bar widget for Prototype.js.

Progress bar can grow:

  • on a timed interval
  • when events in your application tell it to
  • it can be set to poll a given URL.

The mechanism for action is simple, just create a div with relative or absolute positioning, attach the JavaScript, and this control will set the width of the inner element as necessary.

Prototype.js Progress Bar

TableKit, built with the Prototype Framework, not only improves the usability of standard HTML tables but also saves so much time while implementing a standard data editing & sorting functionality.

Ajax Editable Table

Features of TableKit:

  • Row striping
  • Column sorting
  • Column resizing
  • Cell editing using Ajax

ModalBox is a JavaScript technique for creating Web 2.0 - style modal dialogs (or sequence of dialogs) without using standard popups and page reloads.

It’s inspired by Mac OS X modal dialogs and based on Prototype JavaScript framework + script.aculo.us and valid XHTML/CSS. Content can be loaded with Ajax or just plain-HTML.

Mrototype Popup Modalbox

ModalBox Features

  • Web 2.0-ready. ModalBox uses industry-standard libraries — prototype and script.aculo.us.
  • Offline-mode. Use dynamic- or plain-HTML without any Ajax-calls to fill out your dialog windows.
  • AJAX page loading. ModalBox uses AJAX instead of deprecated iframe for content loading. It’s also more secure — you can’t access pages that are not on your host.
  • Callbacks support. You can attach your own JavaScript events after showing or hiding (and more) the ModalBox
  • Automatic height adjustment. ModalBox adjust it’s height depending on your content. No more height tweaking!
  • Scrolling mode. If your content is long, just define the height of the ModalBox and it will switch into “scrolling mode”
  • Browser and platform independent. Since most modern browsers use popup blockers, it’s hard to find another way to create 100% browser-compatible modal dialogs.
  • Multi-purpose. You can create complex wizards to guide users through the process. Image slideshows can be created too.
  • Keystrokes support. Use ESC key to close ModalBox.
  • Customizable Look & Feel. Use CSS to make ModalBox look like you want.
  • Supports transitional effects. Slide down appearing and on-the-fly resizing.
  • Lightweight. Just about 10 KB of code.
  • Works in most modern browsers. Tested in IE6, IE7, Firefox 1.0, 1.5, 2.0, Safari, Camino, Opera 8 and 9.

P.S. There is a Mootools clone of ModalBox named MOOdalBox.

feed-holder
FeedBurner
  • Gooey Templates
  • Krop
  • slice'n dice
  • Website Magazine
  • DNS Pinger
  • Advertise Here