JavaScript


Wednesday, May 23rd, 2007

Chat Infection: Embed Web Chat

Category: Chat, Component, JavaScript, Prototype

Todd Fisher has created Chat Infection, a simple chat widget that sits on top of Prototype. You can see Todd’s work via core.js, which is worth looking at to see the Event.onDOMReady(..) and the like. Here is a new room:

Posted by Dion Almaer at 7:51 am
19 Comments

+++--
3.4 rating from 69 votes

Monday, May 21st, 2007

jQuery Roundup: Rails, WordPress, and new plugins

Category: JavaScript, jQuery, Library

jQuery has had a recent set of interesting news, so we thought we should write it up: jQuery works nicely with Rails. Geoff Buesing assumed that switching his Rails application from Prototype to jQuery would be a pain, but then discovered that you can write jQuery-formatted Javascript with RJS templates, out-of-the-box, no special helpers or Read the rest…

Posted by Dion Almaer at 8:21 am
13 Comments

++---
2.1 rating from 100 votes

Moo Image Gallery

Category: Component, Examples, JavaScript, Library

Asad Sheth has created an image gallery in 182 lines of code that work with Prototype and Moo.fx.

Posted by Dion Almaer at 5:32 am
15 Comments

+++--
3.8 rating from 112 votes

Friday, May 18th, 2007

Javascript Kata

Category: JavaScript

Dave Thomas created the Code Kata as a way to practice your art. Practice makes perfect. Dan Simard has created JavaScript Kata as a place for us to get jiggy with JS. It isn’t in quite the same spirit as the Code Kata, as it contains items such as don’t use the alert() function. Other Read the rest…

Posted by Dion Almaer at 7:58 am
3 Comments

+++--
3.8 rating from 23 votes

Automating JS Behavior Registration

Category: JavaScript, Library, Unobtrusive JS

Gabriel Handford has created a behavior.js script that allows you to unobtrusively automate Event.observe’tion. Magic is in naming conventions, so that: < View plain text > HTML <a class="bvr-observe-click-xhrTheFunction" href="/the/href">The link</a> takes care of: < View plain text > javascript Event.observe(theLinkElement, "click", function(event) { xhrTheFunction(event) });

Posted by Dion Almaer at 12:04 am
13 Comments

+++--
3.2 rating from 40 votes

Thursday, May 17th, 2007

AJAX Feed API: Blogroll and Slideshow Controls

Category: Ajax, Component, Google, JavaScript, Library

We have discussed the Google AJAX Feed API when it launched. It offers Ajax developers the ability to access any public feed through a unified API, bypassing any domain issues in a secure way. The team has started to build useful widgets on top of their own API, and show you just the beginnings of Read the rest…

Posted by Dion Almaer at 11:38 am
Comment here

++++-
4 rating from 51 votes

One-Line JavaScript Memoization

Category: Examples, JavaScript, Library

Oliver Steele has written up some of his implementations of memoization in JavaScript. He ends up with: < View plain text > javascript function memoizeConstantMethod(o, p) {   var f = o[p], mf;   var s = function(v) {return o[p]=v||mf};   ((mf = function() {     (s(function(){return value})).reset = mf.reset;     return value Read the rest…

Posted by Dion Almaer at 7:24 am
5 Comments

++++-
4.1 rating from 35 votes

Wednesday, May 16th, 2007

Flash Tooltips using jQuery

Category: Examples, Flash, JavaScript, Library

Peter Goodman wanted really rich tooltips, so he decided to experiment with Flash tooltips using jQuery. jQuery has a Flash plugin that lets you embed Flash movies with code such as: < View plain text > javascript $(‘#hello’).flash({     src: ‘hello.swf’,     width: 320,     height: 240 }); It may be a Read the rest…

Posted by Dion Almaer at 8:37 am
5 Comments

++---
2.9 rating from 81 votes

IBDOM: “Wielding the Document Object Model with Ease and Standards-Compliance”

Category: JavaScript, JSON, Library

Chris Holland has released IBDOM, a library that aims to make working with the DOM lots of fun ;) The core of the library is about injecting HTML. Example < View plain text > HTML <div id="myCarInfo">         <h1 title="data:lastUpdated">             <span>data:make</span>           Read the rest…

Posted by Dion Almaer at 7:25 am
7 Comments

+++--
3.8 rating from 8 votes

Tuesday, May 15th, 2007

Velocity2JS: Templating within

Category: Examples, JavaScript, Library

Velocity is a popular templating system for Java developers. Velocity2JS takes the engine and has it output JavaScript functions. Example Velocity Template < View plain text > HTML <html> <body> Hello $world.name! <table> #foreach( $greeting in $greetings )    <tr>     <td>$greeting.language</td>     <td>$greeting.text</td>    </tr> #end </table> </body> </html> JS Output < Read the rest…

Posted by Dion Almaer at 6:31 am
18 Comments

++---
2.9 rating from 35 votes

The One True Way to Open a Window in JavaScript

Category: JavaScript, Tip

Ryan Johnson shares his short tip on how to use JavaScript to open a window, letting users decide how they want to handle it, and supporting non-JavaScript clients: < View plain text > HTML <a href="your_link" onclick="window.open(this.href,’window_name’,’options’); return false;"></a> unobtrusively add on to an item: < View plain text > javascript $$(‘#mylink’).each(function(link) {   link.onclick Read the rest…

Posted by Dion Almaer at 1:18 am
22 Comments

+++--
3.5 rating from 91 votes

Monday, May 14th, 2007

Slider.js – Prototype based Carousel

Category: Component, JavaScript, Library, Prototype, Scriptaculous

Bruno Bornsztein has created Slider.js, a carousel widget that flips between content, based on Prototype and Script.aculo.us. You can see it in action, or download it.

Posted by Dion Almaer at 8:59 am
16 Comments

+++--
3.7 rating from 103 votes

Friday, May 11th, 2007

iCarousel: open source carousel

Category: JavaScript, Library

Fabio Zendhi Nagao has created iCarousel, an open source javascript tool for creating carousel like widgets. It is very flexible, builds on MooTools v1.1, and an example looks like: < View plain text > javascript new iCarousel("example_3_content", {       idPrevious: "example_3_previous",       idNext: "example_3_next",       idToggle: "undefined",     Read the rest…

Posted by Dion Almaer at 7:57 am
14 Comments

+++--
3.9 rating from 56 votes

Thursday, May 10th, 2007

Rich Text Controls: Tiny MCE 2.1.1 and Control.TextArea

Category: JavaScript, Library, RichTextWidget

There are a couple of updates in the world of rich text controls. Ryan Johnson has created a new control: Control.TextArea. This is a very different tool, as it isn’t about WYSIWYG functionality, but rather building toolbar based text areas that wrap simple text. It has support for functionality such as Markdown, Textile, etc. Everything Read the rest…

Posted by Dion Almaer at 9:26 am
7 Comments

+++--
3.9 rating from 39 votes

Wednesday, May 9th, 2007

XAJAX PHP Live Datagrid

Category: Examples, JavaScript, PHP

Timothy Lorens has created a XAJAX PHP Live Datagrid that is as simple to setup as: < View plain text > HTML <div id=“dataGrid” align=“center”></div> <script type=“text/javascript”>   xajax_showDataGrid(); </script> xajax_showDataGrid is a callback where you get to implement methods such as passing back how many rows there are, and the rows to show.

Posted by Dion Almaer at 6:49 am
18 Comments

+++--
3.7 rating from 184 votes

Tuesday, May 8th, 2007

MooTools 1.1 Released

Category: JavaScript, Library, MooTools

MooTools version 1.1 has been released with “with crazy optimizations for speed, compatibility, flexibility, and all around greatness.” New Features Custom Events: A brand-new API to define custom events. The events ‘mouseenter’, and ‘mouseleave’, and ‘domready’ have been added as custom events. Enhanced Element(): New methods, and enhancements such as an improved way to add Read the rest…

Posted by Dion Almaer at 6:01 am
22 Comments

++++-
4.1 rating from 72 votes