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

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 

A Look Ahead at Script.aculo.us 1.8

Posted by Don Albrecht

Scriptaculous 1.8 is in beta and offers several remarkable new features:

  • Complete rewrite of Ajax.InPlaceEditor and Ajax.InPlaceCollectionEditor
  • Full CSS inheritance in Effect.Morph
  • New core effect: Effect.Tween
  • Sound: play mp3 files for sound effects; uses native playback on IE and available plugins

We’ll be looking at all of these in more depth soon.

Prototype Transparent Message

Posted by Don Albrecht

Prototype Transparent Message

Here’s a simple and adaptable Notification widget for Prototype / Scripataculous development.

Features:

  • Customizable Look & Feel
  • Exists independent of Page Layout
  • Easy rails integration with helpers.
  • Can be used on any event.
  • Ruby helper available.

Get it Here:
http://transparent-message.xilinus.com/ 

Prototype Carousel

Posted by Don Albrecht

Prototype Carousel

Here’s an excellent Prototype / Scriptaculous Carousel widget from the maker of yesterdays Prototype Window.

Features:

  • scrollTo
  • Ajax handler (”before”, “after”)
  • Anim handler (”before”, “after”
  • Ajax or static content
  • Horizontal orientation
  • Rails helper

Get it Online Here:

http://prototype-carousel.xilinus.com/ 

Prototype Window Class

Posted by Don Albrecht

Prototype window ClassHere’s a handy prototype based window class.

Features:

  • Valid HTML/XHTML generated code
  • Resizable windows
  • Minimize/Maximize
  • Modal dialogs
  • Visual effects (Powered By Scriptaculous)
  • Skinnable

Get it Online Here:

http://prototype-window.xilinus.com/ 

Great Tutorial on OO programing in Prototype 1.60

Posted by Don Albrecht

Prototype 1.6 is fast approaching and we’re already seeing loads of developers adopting the update in projects.  As this tutorial shows, The improvements to Class & inheritance in are truly compelling reasons to jump.

Prototype 1.6 Inheritance tutorial via Ajaxian