<!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" /> <title>timeago: a jQuery plugin</title> <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> <script src="test.js" type="text/javascript"></script> <script type="text/javascript"> jQuery(document).ready(function($) { $('abbr[class*=timeago]').timeago(); $("#prog_date").text(jQuery.timeago(new Date())); $("#prog_string").text(jQuery.timeago("2008-07-17")); $("#prog_element").text(jQuery.timeago("2008-07-20")); }); </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; } pre { background-color: #333; color: #fff; margin: 12px 0; font-size: 12px; padding: 0 6px; } pre em { font-style: normal; background-color: #554; } pre, tt { font-family: monaco,"courier new",mono; } abbr { border-bottom: 1px dotted #333; } tt { font-size: 14px; } a { color: #06e; padding: 1px; } em { font-style: normal; background-color: #feb } 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"> This page was last modified <abbr class="modified timeago">sometime before now [browser might not support document.lastModified]</abbr>. </p> <p class="example"> Ryan was born <abbr class="timeago" title="1978-12-18T17:17:00Z">Dec 18, 1978</abbr>. </p> <h3>Why?</h3> <p>Timeago was originally built for use with <a href="http://yarp.com">Yarp.com</a> to timestamp comments.</p> <ul> <li>Avoid timestamps dated "1 minute ago" even though the page was opened 10 minutes ago; <em>timeago refreshes automatically</em>, </li> <li>You can <em>take full advantage of page caching</em> in your web applications, because the timestamps aren't calculated on the server.</li> <li>You get to <em>use <a href="http://microformats.org/">microformats</a></em> like the cool kids.</li> </ul> <h3>How?</h3> <p class="how"> First, load <a href="http://jquery.com/">jQuery</a> and the plugin: </p> <pre> <script src="jquery.min.js" type="text/javascript"></script> <script src="jquery.timeago.js" type="text/javascript"></script></pre> <p class="how"> Now, let's attach it to your timestamps on DOM ready: </p> <pre> jQuery(document).ready(function() { jQuery('abbr[class*=timeago]').timeago(); });</pre> <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> <abbr class="<em>timeago</em>" title="<em>2008-07-17T09:24:17Z</em>">July 17, 2008</abbr></pre> <p class="how"> into something like this: </p> <pre> <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> <p> which yields: <abbr class="timeago" title="2008-07-17T09:24:17Z">July 17, 2008</abbr>. As time passes, the timestamps will automatically update. </p> <p class="how"> You can also use it programmatically: </p> <pre> jQuery.timeago(new Date()); //=> "<span id="prog_date"></span>" jQuery.timeago("2008-07-17"); //=> "<span id="prog_string"></span>" jQuery.timeago(jQuery("abbr#some_id")); //=> "<span id="prog_element"></span>" // [title="2008-07-20"]</pre> <p class="how"> To support timestamps in the future, use the <tt>allowFuture</tt> setting: </p> <pre> jQuery.timeago.settings.allowFuture = true;</pre> <h3>Excusez-moi?</h3> <p> Yes, timeago has locale/i18n/language support. Here are some <a href="http://gist.github.com/6251">configuration examples</a>. Email <a href="http://ryan.mcgeary.org">Ryan McGeary</a> for corrections or additional languages. </p> <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/jquery-timeago">http://github.com/rmm5t/jquery-timeago</a>. Go on, live on the edge. </p> <h3>Who?</h3> <p> Timeago was built by <a href="http://ryan.mcgeary.org">Ryan McGeary</a> (<a href="http://twitter.com/rmm5t">@rmm5t</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> <h3>When?</h3> <p> 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> </p> <h3>Huh?</h3> <p class="last"> Need a Rails helper to make those fancy microformat <tt>abbr</tt> tags? Fine, here ya go: </p> <pre> def timeago(time, options = {}) options[:class] ||= "timeago" content_tag(:abbr, time.to_s, options.merge(:title => time.getutc.iso8601)) if time end</pre> </div> <div id="footer"> <div style="float:right;"> <a href="http://www.opensource.org/licenses/mit-license.php">MIT License</a> </div> Copyright © 2008-2009 <a href="http://ryan.mcgeary.org">Ryan McGeary</a> (<a href="http://twitter.com/rmm5t">@rmm5t</a>) </div> <a href="http://github.com/rmm5t/jquery-timeago"><img style="position: absolute; top: 0; right: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png" alt="Fork me on GitHub" /></a> <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>