Ajax Updates

jQuery.Bubble
TimeSpinner : Moo Tools
Pretty Date using jQuery Plugin

Posted: 17 Aug 2009 09:41 AM PDT

This plugin adds bubbling functionality to jQuery. The code is similar to jQuery.fn.trigger’s because it’s meant to extend it. It also generates it’s own event object, that will remain untouched through the bubbling, meaning it’s safe to attach attributes to it and grab them with the ancestors while the event bubbles up. I tried to use jQuery’s core functions as much as possible, but most functions I needed were not compatible, and would destroy the custom event object, still the code remains short. NOTES:

* jQuery.Bubble 1.0 was tested with jQuery 1.3.1 and it’s compatible with it’s event system.
* jQuery.Bubble 1.2 and further versions will stick to the new system(1.2 ’s).
* There’re two versions, the regular (async) and the synchronic version. I’m not sure which one works better, I suppose the asynchronic one resembles more to the browser’s native (bubbling) behavior, so I’d use that one. Please let me know if you test them.

Demo:
Download:
Source:

Related Listings:

jQuery.Bubble Script This plugin adds bubbling functionality to jQuery. The code is...
Bubble – jQuery Script This plugin adds bubbling functionality to jQuery. The code is...
EasyDrag Box jQuery Plugin Handler feature added! Finally I decided to add a...

TimeSpinner : Moo Tools

Posted: 17 Aug 2009 09:26 AM PDT

Welcome to this temporary/permanent page. Temporary because is really ugly, permanent because I’m already suppose to rebuild all this site for more than a year…

TimeSpinner is a simple/minimalist widget for the javascript framework Mootools.
For a current project, I need a widget that allow users to enter the date of an events, like a concert, exposition, etc… There’re a lot of good calendars – for example “calendar” whom I take some inspiration – but none allow user to enter time too ; just day.
What timespinner is NOT
this is NOT a precision time selector. Its purpose is to allow user to quickly inc/dec a time – mainly for events, schedules, range selections etc.. -

Features

* Easy to use, just 2 buttons
* Time range limit
* Can fire events at specific time(s)

Dependencies

You only need mootools with Class, Native, Element
A version is included in the archive but you can download it HERE
How to use it
First, add the javasscript and css files to your project.
Then you create a new TimeSpinner by passing to it a text input entry.
See the examples below.

Platform

Devel platform is linux/firefox.
This widget will probably not work correctly under windoze explorer.
… and by the way it works perfectly with firefox, opera, safari, konqueror and probably any others obscures college’s projects.

Demo:
Download:
Source:

tafbutton blue16 TimeSpinner : Moo Tools

Related Listings:

Multiple file upload – Moo tools It's about 18 months since I released my simple script...
ReMooz – Lightbox based on Moo tools ReMooz is an open-source widget for great looking and unobtrusive...
Sliding Tabs using Moo Tools Plugin The script relies on width and height of tabs and...

Pretty Date using jQuery Plugin

Posted: 17 Aug 2009 09:06 AM PDT

One method that I’ve been wanting for quite a while now was a simple way to format old JavaScript dates in a “pretty” way. For example “2008-01-28T20:24:17Z” becomes “2 hours ago”. Here’s some more examples:

 Javascript |   copy code | ?  
1 prettyDate("2008-01-28T20:24:17Z") // => "2 hours ago" 
2 prettyDate("2008-01-27T22:24:17Z") // => "Yesterday" 
3 prettyDate("2008-01-26T22:24:17Z") // => "2 days ago" 
4 prettyDate("2008-01-14T22:24:17Z") // => "2 weeks ago" 
5 prettyDate("2007-12-15T22:24:17Z") // => undefined 
6

Note that I only care about dates in the past (by far the most common use case) and only dates within the past month (anything beyond a month becomes fuzzy and impractical).

JavaScript Pretty Date
In the following examples I make all the anchors on the site, that have a title with a date in it, have a pretty date as their inner text. Additionally, I continue to update the links every 5 seconds after the page has loaded.

 Javascript |   copy code | ?  
01 With plain DOM: 
02 function prettyLinks(){ 
03         var links = document.getElementsByTagName("a");        
04         for ( var i = 0; i < links.length; i++ ) 
05                 if ( links[i].title ) { 
06                         var date = prettyDate(links[i].title); 
07                         if ( date ) 
08                                 links[i].innerHTML = date; 
09                 } 
10 } 
11 prettyLinks(); 
12 setInterval(prettyLinks, 5000); 
13  
14 With jQuery: 
15 $("a").prettyDate(); 
16 setInterval(function(){ $("a").prettyDate(); }, 5000); 
17  
18

There's a variety of these functions around, in various languages, but I wanted one in JavaScript for a couple reasons:

Microformats - Microformats specify a scheme for passing ISO dates to the client (precise date/time value) while providing the user with a "casual" date representation. I wanted to be able to generate a pretty version of the date, from a Microformat, easily and painlessly.

Auto-update - Secondly, I wanted to have these Microformat dates update automatically, as the page remained loaded. This way, if a user left a page open for 15 minutes, and came back, the pretty dates would be silently updated to their current times. This may seem nitpick-y but Twitter fails to do this and it drives me absolutely insane.

Write once, use everywhere - If I wanted to have these dates be constantly updated I would have these options: Only generate these dates on the server - re-querying new results via an Ajax request, generate the results on the server and on the client, or generate the results exclusively on the client. Client makes the most sense as it would result in the least amount of code duplication and general overhead.

I hope this will be useful to some, I know it's helped me out a bunch.

By the way - let's say this piece of code was from a - theoretical - larger project that was attempting to create an easy-to-use, Open Source, Twitter clone - would anyone be interested in using it?

Demo: http://ejohn.org/files/pretty.html
Download: http://ejohn.org/files/pretty.js
Source: http://ejohn.org/blog/javascript-pretty-date/