2008-07-18 11:34:06 -04:00
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
< html xmlns = "http://www.w3.org/1999/xhtml" xml:lang = "en" >
< head >
< meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" / >
< meta name = "microid" content = "mailto+http:sha1:566841e568e84b46c92d2291b44b836dfddc5c42" / >
2008-07-18 20:35:20 -04:00
< title > timeago: a jQuery plugin< / title >
2008-07-18 11:34:06 -04:00
< script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type = "text/javascript" > < / script >
< script src = "jquery.timeago.js" type = "text/javascript" > < / script >
2008-07-18 15:58:26 -04:00
< script src = "test.js" type = "text/javascript" > < / script >
2008-07-18 11:34:06 -04:00
< script type = "text/javascript" >
jQuery(document).ready(function($) {
$('abbr[class*=timeago]').timeago();
2008-07-20 17:36:40 -04:00
$("#prog_date").text(jQuery.timeago(new Date()));
$("#prog_string").text(jQuery.timeago("2008-07-17T09:24:17Z"));
$("#prog_element").text(jQuery.timeago("2008-07-20"));
2008-07-18 11:34:06 -04:00
});
2008-07-20 17:36:40 -04:00
2008-07-18 11:34:06 -04:00
< / script >
< style >
* { margin: 0; padding: 0; }
body { font-family: Helvetica,Arial,sans-serif; color: #333; background-color: #ccc; font-size: 16px; line-height: 24px; }
h1 { margin: 0; font-size: 60px; line-height: 100px; text-align: center; }
h2 { margin: -30px 0 40px 50px; font-size: 20px; line-height: 20px; text-align: center; color: #999; }
h3 { margin: 24px 0 6px 0; font-size: 18px; line-height: 18px; border-bottom: 1px solid #ccc; }
h1 img { vertical-align: middle; }
p { margin: 0 0 24px 0; }
p.example { margin: 0 0 12px 0; }
p.how, p.last { margin: 0; }
ul { margin: 0 24px 24px; }
li { line-height: 24px; }
2008-07-18 15:58:26 -04:00
pre { background-color: #333; color: #fff; margin: 12px 0; font-size: 12px; padding: 0 6px; }
2008-07-18 11:34:06 -04:00
pre em { font-style: normal; background-color: #554; }
pre, tt { font-family: monaco,"courier new",mono; }
2008-07-18 15:58:26 -04:00
abbr { border-bottom: 1px dotted #333; }
2008-07-18 11:34:06 -04:00
tt { font-size: 14px; }
a { color: #06e; padding: 1px; }
a:hover { background-color: #06c; color: #fff; text-decoration: none; }
#content { margin:0 auto; padding: 24px; width:700px; background-color:#fff; border: 1px solid #999; border-width: 0 1px 1px 1px; }
#footer { margin:0 auto 24px; padding: 12px; width:700px; line-height: 24px; }
.help { font-size: 14px; color: #888; }
< / style >
< / head >
< body >
< div id = "content" >
< h1 > < img src = "clock.png" / > timeago< / h1 >
< h2 > a jQuery plugin< / h2 >
< h3 > What?< / h3 >
< p >
Timeago is a jQuery plugin that makes it easy to support automatically updating fuzzy
timestamps (e.g. "4 minutes ago" or "about 1 day ago"). < a href = "jquery.timeago.js" > Download< / a > , view
the examples, and enjoy.
< / p >
< p class = "example" >
You opened this page < abbr class = "loaded timeago" > sometime before now < span class = "help" > (turn on javascript, loser)< / span > < / abbr > . < span class = "help" > (This will update every minute. Wait for it.)< / span >
< / p >
< p class = "example" >
2008-07-18 16:16:37 -04:00
This page was last modified < abbr class = "modified timeago" > sometime before now [browser might not support document.lastModified]< / abbr > .
2008-07-18 11:34:06 -04:00
< / p >
< p class = "example" >
Ryan was born < abbr class = "timeago" title = "1978-12-18T17:17:00Z" > Dec 18, 1978< / abbr > .
< / p >
2008-07-20 17:36:40 -04:00
< h3 > Why?< / h3 >
< p > Timeago was originally built for use with < a href = "http://yarp.com" > Yarp.com< / a > (coming soon) to timestamp comments.< / p >
< ul >
< li > Because timeago can refresh automatically, you won't have timestamps dated "1 minute ago" even though the page was opened 10 minutes ago.< / li >
< li > Because the fuzzy timestamps aren't calculated on the server, you can take full advantage of page caching in your web applications.< / li >
< li > You get to use < a href = "http://microformats.org/" > microformats< / a > like the cool kids.< / li >
< / ul >
2008-07-18 11:34:06 -04:00
< h3 > How?< / h3 >
< p class = "how" >
First, load < a href = "http://jquery.com/" > jQuery< / a > and the plugin:
< / p >
< pre >
2008-07-18 15:58:26 -04:00
< script src=" jquery.min.js" type=" text/javascript" > < /script>
< script src=" jquery.timeago.js" type=" text/javascript" > < /script> < / pre >
2008-07-18 11:34:06 -04:00
< p class = "how" >
Now, let's attach it to your timestamps on DOM ready:
< / p >
< pre >
2008-07-18 15:58:26 -04:00
jQuery(document).ready(function() {
jQuery('abbr[class*=timeago]').timeago();
});< / pre >
2008-07-18 11:34:06 -04:00
< p class = "how" >
This will turn all < tt > abbr< / tt > elements with a class
of < tt > timeago< / tt > and an < a href = "http://en.wikipedia.org/wiki/ISO_8601" > ISO 8601< / a > timestamp in the title:
< / p >
< pre >
2008-07-18 15:58:26 -04:00
< abbr class=" < em > timeago< / em > " title=" < em > 2008-07-17T09:24:17Z< / em > " > July 17, 2008< /abbr> < / pre >
2008-07-18 11:34:06 -04:00
< p class = "how" >
into something like this:
< / p >
< pre >
2008-07-18 16:16:37 -04:00
< abbr class=" timeago" title=" 2008-07-17T09:24:17Z" > < em > < abbr class = "timeago" title = "2008-07-17T09:24:17Z" > time ago< / abbr > < / em > < /abbr> < / pre >
2008-07-18 17:57:03 -04:00
< p >
which yields: < abbr class = "timeago" title = "2008-07-17T09:24:17Z" > July 17, 2008< / abbr > . As time passes, the timestamps will automatically update.
2008-07-18 11:34:06 -04:00
< / p >
2008-07-20 17:36:40 -04:00
< p class = "how" >
You can also use it programmatically:
< / p >
< pre >
jQuery.timeago(new Date()); //=> " < span id = "prog_date" > < / span > "
jQuery.timeago("2008-07-17T09:24:17Z"); //=> " < span id = "prog_string" > < / span > "
jQuery.timeago(jQuery("abbr#some_id")); //=> " < span id = "prog_element" > < / span > " // [title=" 2008-07-20" ]< / pre >
2008-07-18 11:34:06 -04:00
2008-07-18 21:08:45 -04:00
< h3 > Where?< / h3 >
< p > < a href = "jquery.timeago.js" > Download the " stable" release< / a > .< / p >
< p >
The code is hosted on
GitHub: < a href = "http://github.com/rmm5t/timeago" > http://github.com/rmm5t/timeago< / a > .
Go on, live on the edge.
< / p >
2008-07-18 11:34:06 -04:00
< h3 > Who?< / h3 >
< p >
Timeago was built by < a href = "http://ryan.mcgeary.org" > Ryan McGeary< / a >
while standing on the shoulders of giants. John Resig wrote about
a < a href = "http://ejohn.org/blog/javascript-pretty-date/" > similar
approach< / a > . The verbiage was based on
the < tt > distance_of_time_in_words< / tt > ActionView helper
in < a href = "http://rubyonrails.org" > Ruby on Rails< / a > .
< / p >
2008-07-18 21:08:45 -04:00
< h3 > When?< / h3 >
2008-07-18 17:00:35 -04:00
< p >
2008-07-18 21:08:45 -04:00
Timeago was conceived < abbr class = "timeago" title = "2008-07-17T02:30:00-0500" > on July 17, 2008< / abbr > . < span class = "help" > (Yup, that's powered by timeago too)< / span >
2008-07-18 17:00:35 -04:00
< / p >
2008-07-19 12:08:43 -04:00
< h3 > Huh?< / h3 >
2008-07-18 11:34:06 -04:00
< p class = "last" >
2008-07-18 21:08:45 -04:00
Need a Rails helper to make those fancy microformat < tt > abbr< / tt > tags? Fine, here ya go:
2008-07-18 11:34:06 -04:00
< / p >
2008-07-18 21:08:45 -04:00
< pre >
def timeago(time, options = {})
options[:class] ||= "timeago"
content_tag(:abbr, time.to_s, options.merge(:title => time.getutc.iso8601)) if time
end< / pre >
2008-07-18 11:34:06 -04:00
< / div >
< div id = "footer" >
< div style = "float:right;" >
< a href = "http://www.opensource.org/licenses/mit-license.php" > MIT
License< / a >
< / div >
Copyright © 2008 < a href = "http://ryan.mcgeary.org" > Ryan McGeary< / a >
< / div >
< script type = "text/javascript" >
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
< / script >
< script type = "text/javascript" >
var pageTracker = _gat._getTracker("UA-2856277-2");
pageTracker._initData();
pageTracker._trackPageview();
< / script >
< / body >
< / html >
