Ajax Bestiary: A Javascript Field Guide
 
Ajax Bestiary: A Javascript Field Guide
 
 

Entries Tagged as 'prototype'

Edit In Place with Tiny MCE, Prototype & Scriptaculous

Posted by Don Albrecht

Edit in Place rich text areas has been a bit of a holy grail for me lately. Several of my project call for the ability to provide rich text on demand.  You can already do this with the YUI rich text editor using some positioning magic.  In this Prototype extension,  the entire rich text area toggles to replace the inline content.

Rails support is provided out of the box.

Check it out here:  http://inplacericheditor.box.re/

Via: Scripteka

FastInit: SuperCharge Your Pageloads

Posted by Don Albrecht

What is it:

FastInit is a small JS file to create a Faster window.onload. It implements a powerful onload function queue that fires once teh dom is ready and before all images have been downloaded. Ideally, this results in a dramatic decrease in a pages initialization time.

How it Works

You any functions to the queue by using the FastInit.addOnLoad( function 1, function 2, …); function. All functions are fired in the order in which they were added to the queue. addOnLoad can be called as many times as is necessary. It fails gracefully to standard handlers if the browser doesn’t support the faster methods.

Requirements

As of version 1.4.1 the need for Prototype has been removed freeing the code for use in any project where a speedy onload method is needed.

Check it out here:

http://tetlaw.id.au/view/javascript/fastinit

Image Cropper, Smooth Ajax Based Image Cropping for Prototype

Posted by Don Albrecht

 Prototype Image Cropper

David Spurr’s Image Cropper is a powerful and easy to use widget for image cropping.

Some Features:

  •  Un-obtrusive
  • Selection can be moved & resized
  • Drag & Drop interface
  • Size can be restricted to ratio
  • Size can be restricted to minimum dimensions
  • Size can be restricted to maximum dimensions
  • Dynamic Preview
  • All operations bounded by image

Get it here: http://www.defusion.org.uk/code/javascript-image-cropper-ui-using-prototype-scriptaculous/

Plotr Well Built, Prototype Based Charting

Posted by Don Albrecht

plotr

Plotr is an excellent charting library built in prototype.  It outputs to a Canvas / SVG drawing object. (IE 6+ Support is powered by the ExplorerCanvas library).

It currently supports:

  • Bar Charts
  • Line Charts
  • Pie Charts
  • Chart Legends

All in all, it’s an excellent lightweight library for adding basic data visualization capabilities to your app.  More importantly, the chart’s it generates are simply stunning, complete with drop shadows, white outlines, & well designed default color schemes.

Check it out online here:

http://solutoire.com/plotr/

SkyBytejs: A Prototype Based Library for Rich User Interaction

Posted by Don Albrecht

skybyte SkyByte is an interesting, lightweight library that was originally designed to help facilitate WYSIWYG CMS creation.

Key Features:

  • Resizable Elements
  • Drag & Drop
  • Editor (in development)

SyByte is a wonderful library for adding the ability to manipulate & scale Elements. While it’s uses are limited at this time, hopefully when combined with an editor, this will become a robust WYSIWYG solution for CMS development.

Check it out online here:

http://www.skybyte.net/scripts/ 

Prototype 1.6 & Scriptaculous 1.8 Have Landed

Posted by Don Albrecht

Prototype 1.6 has landed and is available here Prototype 1.6 final

Scriptaculous 1.8 (based on prototype 1.6) is available here script.aculo.us 1.8 final

Both releases help to dramatically simplify the task of writing AJAX applications.

Prototype UI: A consolidated library of Prototype / Scriptaculous widgets

Posted by Don Albrecht

An effort is underway to merge several well known Prototype based widgets into a single widget library built on top of the prototype / scriptaculous stack.  It’s already in a usable form combining the following widgets into a single js file.

  • Dock
  • Carousel
  • Shadow
  • Window

You can find it online at http://www.prototype-ui.com/

Handling Dimensions with Prototype

Posted by Don Albrecht

Yesterday, We explored the jQuery Dimensions plugin and how it can be used to get a handle on the Physical location of elements on the page. Today we explore achieving the same effect with the native Prototype Element & Position Objects.

Element provides three methods to get a handle on the dimensions of an element

  • getWidth( element ) Returns the width of an element
  • getHeight() Returns the height of an element
  • getDimensions() Returns the height & width of an element as an associative array.

For more advanced and capable access to the spacial properties of an Element we turn to the Position object.

  • page()  Returns the x, y position of an element relative to the viewport
  • cumulativeOffset() Returns the x, y position of an element relative to the entire document
  • positionedOffset() Returns the position of an element relative to its parent.

As you can see, the prototype tools are a bit more powerful out of the box than jQuery Dimension (None of these require a plugin.)  Prototype, however, doesn’t handle scrolls as well as jQuery Dimension.

Read more about these APIs at

http://www.prototypejs.org/api