Prototype


Friday, December 15th, 2006

Slide Share: You Tube for Presentations

Category: Prototype, Showcase

Slide Share is a community sharing site for slide presentations. It has mimicked a lot of the YouTube features, and has some nice ones such as the translation of slides. The feel is nice and interactive, and it appears to be powered by Prototype and Script.aculo.us.

Posted by Dion Almaer at 7:55 am
9 Comments

+++--
3.6 rating from 18 votes

Wednesday, December 13th, 2006

Be Green: Use Ajax while you help the environment

Category: Prototype, Scriptaculous, Showcase

Be Green is a new website that uses Prototype, Script.aculo.us, and SIFr, on a website that helps you learn about environmental matters. The site features Ajax in a variety of ways, some of the most exciting being the Carbon Footprint calculator.

Posted by Dion Almaer at 8:12 am
11 Comments

+++--
3.8 rating from 25 votes

Wednesday, December 6th, 2006

Creating extensible Prototype Widgets

Category: Articles, JavaScript, Prototype

Justin Palmer has written about avoiding bloat in widgets with respect to Prototype. Widgets walk a fine line between abstractions and implementations. Implementation, in this case, is a practical solution chosen to perform a given function. The problems with widgets occur when the widget author walks too far in one direction, or worse, walks an Read the rest…

Posted by Dion Almaer at 8:01 am
3 Comments

+++--
3.5 rating from 22 votes

Friday, December 1st, 2006

Send Me a Pic

Category: Examples, Prototype, Scriptaculous, Showcase

Bob Buffone, Chief Architect of NexaWeb Technologies, has created a sample single page Ajax application called Send Me a Pic that allows users to search Flickr images and create a customized image that is personalized for any mobile phone. Custom images can be text messaged to user’s phones by simply entering the phone number. Bob Read the rest…

Posted by Dion Almaer at 12:26 am
3 Comments

+++--
3.4 rating from 34 votes

Wednesday, November 29th, 2006

Prototype Event Extension: Event.wheel(e)

Category: Library, Prototype

Frank Monnerjahn took the work from here and created a Prototype Event extension which makes it trivial to use the mouse wheel in Prototype with Event.observe(..). The demo shows this in action. The Code < View plain text > javascript /*  * Orginal: http://adomas.org/javascript-mouse-wheel/  * prototype extension by "Frank Monnerjahn" themonnie @gmail.com  */ Object.extend(Event, { Read the rest…

Posted by Dion Almaer at 12:50 am
13 Comments

++++-
4.2 rating from 39 votes

Friday, November 24th, 2006

Dropboks: File Storage on One Page

Category: Prototype, Showcase

Dropboks is a single page application build on Prototype and friends, that allows you to simply upload files for safe keeping. The application is ad free, and survives on user donations. They do a good job at letting you use it pre-signup, and giving good info via tooltips.

Posted by Dion Almaer at 9:51 am
8 Comments

+++--
3.8 rating from 14 votes

Wednesday, November 22nd, 2006

Script.aculo.us 1.7 beta: Now with Morphing

Category: JavaScript, Library, Prototype, Scriptaculous, UI

Morphing with CSS is all the rage now, and Script.aculo.us has stepped up to the plate with their 1.7 beta release. The two main features are: Morphing Effect.Morph is added to the pack, along with a nice helpful any_element.morph to go with it. E.g. showing both styles to morph elements using the given CSS: < Read the rest…

Posted by Dion Almaer at 4:59 am
13 Comments

+++--
3.6 rating from 29 votes

Thursday, November 9th, 2006

Endless Pageless: Keep scrolling for more content

Category: Articles, Examples, Prototype

Pete Forde has taken the Pageless implementation seen in the Humanized Reader, implement it with Prototype, and write this piece on it. They implemented the feature on their Live Filter demo, so now as you scroll down you see more results coming back at you automatically. No next, previous, or Gooooooooooooooooooogle (for SEO you will Read the rest…

Posted by Dion Almaer at 9:13 am
20 Comments

+++--
3.6 rating from 65 votes

Friday, November 3rd, 2006

Animator.js: animations using CSS

Category: Prototype, UI

Bernie Sumption loves the functionality of Moo.fx, Script.aculo.us and Rico but thinks that inheritance is evil: In particular, they don’t seem to realise that inheritance is evil, and must be destroyed. By providing base classes for an effect and requiring users to subclass it to make new effects, they create a proliferation of classes and Read the rest…

Posted by Dion Almaer at 7:39 am
21 Comments

++++-
4.3 rating from 64 votes

Wednesday, November 1st, 2006

F.prod: animated home page

Category: Prototype, Showcase

Gregory Fortin replaced his usual Flash effects and dove into Prototype and Script.aculo.us to create F.Prod, his site that looks like a business card.

Posted by Dion Almaer at 4:09 am
11 Comments

++---
2.1 rating from 40 votes

Friday, October 27th, 2006

Projax: PHP Generators for Prototype and Script.aculo.us

Category: PHP, Prototype

Projax is a port of the Rails helpers that wrap the JavaScript required for Prototype and Script.aculo.us code from Ruby, to PHP classes. Getting Started < View plain text > php $projax = new Projax();   Please enter your year of birth : < ?=$projax->text_field_with_auto_complete(’dob’,null,array(’url’=>’index.php?task=ajax’));?>   for($i=1900;$i&lt;2006;$i++)$ret_val.=(strstr($i,$_POST[’dob’]))?'<li>’.$i.'</li>’:”; echo ‘<ul>’.$ret_val.'</ul>’; The User Guide details the available Read the rest…

Posted by Dion Almaer at 9:15 am
9 Comments

+++--
3.6 rating from 66 votes

Thursday, October 26th, 2006

Script.aculo.us Select Box

Category: Component, Prototype

Gabriel Lanzani has created a Script.aculo.us Select Box component that is meant to replace <select> with visual effects, a skinnable look, and autocomplete support. < View plain text > javascript new Ajax.SelectBox(id_of_text_field, id_of_div_to_populate, url, id_of_result_value, options); I would stay away from gratuitous use myself, but there are some usecases where it could come in handy.

Posted by Dion Almaer at 9:42 am
31 Comments

+++--
3.1 rating from 123 votes

Friday, October 20th, 2006

Prototype based JavaScript tooltip

Category: JavaScript, Library, Prototype

JavaScript Tooltip libraries number about as many as rounded CSS corner libraries. Jonathan Weiss thought the ones he saw were “too complicated and bloated, did just too much and most of the time were still not flexible enough with the tooltip. So I decided to create my own library that is based on prototype.js”. It Read the rest…

Posted by Dion Almaer at 10:21 am
23 Comments

+++--
3.9 rating from 292 votes

Sunday, October 15th, 2006

Benchmark: Prototype and jQuery

Category: Prototype

Claudio Cicali thinks benchmarks are boring and useless, so he decided to conduct a series of micro-benchmarks of CSS selector tests with both Prototype and jQuery. He decided to do this after he saw others observe: Prototype (1.5+) has CSS selector syntax now “jQuery is horribly SLOW” Some Examples < View plain text > javascript Read the rest…

Posted by Dion Almaer at 2:34 pm
17 Comments

+++--
3.6 rating from 71 votes

Tuesday, October 10th, 2006

Unobtrusive Markup with Prototype

Category: Prototype, Unobtrusive JS

Ryan Lowe has written up a piece on Unobtrusive Markup with Prototype. His example pieces together Prototype and onDOMReady Extension from Vivabit to keep your markup clean by having extra markup added by the framework. The example takes a rounded corner example such as: < View plain text > HTML <div class="old_corners"> <div class="cornert"><div></div></div> blah Read the rest…

Posted by Dion Almaer at 8:27 am
5 Comments

+++--
3.1 rating from 25 votes

Thursday, September 21st, 2006

CSS Crossfading Example

Category: Examples, Prototype

Mike Arace has written up a simple CSS Crossfading example, demonstrated here. The post details the HTML, CSS, and JavaScript required: < View plain text > javascript // this array consists of the id attributes of the divs we wish to alternate between var divs_to_fade = new Array(‘box-1’, ‘box-2’, ‘box-3’);         // Read the rest…

Posted by Dion Almaer at 9:36 am
16 Comments

+++--
3.7 rating from 115 votes