Skip to content


Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

172 lines (157 sloc) 7.858 kb
<html xmlns="" xml:lang="en">
<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="" 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($) {
$("#prog_date").text(jQuery.timeago(new Date()));
* { 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.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; }
<div id="content">
<h1><img src="clock.png" /> timeago</h1>
<h2>a jQuery plugin</h2>
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 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 class="example">
This page was last modified <abbr class="modified timeago">sometime before now [browser might not support document.lastModified]</abbr>.
<p class="example">
Ryan was born <abbr class="timeago" title="1978-12-18T17:17:00Z">Dec 18, 1978</abbr>.
<p>Timeago was originally built for use with <a href=""></a> (coming soon) to timestamp comments.</p>
<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="">microformats</a></em> like the cool kids.</li>
<p class="how">
First, load <a href="">jQuery</a> and the plugin:
&lt;script src=&quot;jquery.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;jquery.timeago.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;</pre>
<p class="how">
Now, let's attach it to your timestamps on DOM ready:
jQuery(document).ready(function() {
<p class="how">
This will turn all <tt>abbr</tt> elements with a class
of <tt>timeago</tt> and an <a href="">ISO 8601</a> timestamp in the title:
&lt;abbr class=&quot;<em>timeago</em>&quot; title=&quot;<em>2008-07-17T09:24:17Z</em>&quot;&gt;July 17, 2008&lt;/abbr&gt;</pre>
<p class="how">
into something like this:
&lt;abbr class=&quot;timeago&quot; title=&quot;2008-07-17T09:24:17Z&quot;&gt;<em><abbr class="timeago" title="2008-07-17T09:24:17Z">time ago</abbr></em>&lt;/abbr&gt;</pre>
which yields: <abbr class="timeago" title="2008-07-17T09:24:17Z">July 17, 2008</abbr>. As time passes, the timestamps will automatically update.
<p class="how">
You can also use it programmatically:
jQuery.timeago(new Date()); //=> &quot;<span id="prog_date"></span>&quot;
jQuery.timeago("2008-07-17"); //=> &quot;<span id="prog_string"></span>&quot;
jQuery.timeago(jQuery("abbr#some_id")); //=> &quot;<span id="prog_element"></span>&quot; // [title=&quot;2008-07-20&quot;]</pre>
<p class="how">
To support timestamps in the future, use the <tt>allowFuture</tt> setting:
jQuery.timeago.settings.allowFuture = true;</pre>
<p><a href="jquery.timeago.js">Download the &quot;stable&quot; release</a>.</p>
The code is hosted on
GitHub: <a href=""></a>.
Go on, live on the edge.
Timeago was built by <a href="">Ryan McGeary</a>
while standing on the shoulders of giants. John Resig wrote about
a <a href="">similar
approach</a>. The verbiage was based on
the <tt>distance_of_time_in_words</tt> ActionView helper
in <a href="">Ruby on Rails</a>.
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 class="last">
Need a Rails helper to make those fancy microformat <tt>abbr</tt> tags? Fine, here ya go:
def timeago(time, options = {})
options[:class] ||= "timeago"
content_tag(:abbr, time.to_s, options.merge(:title => time.getutc.iso8601)) if time
<div id="footer">
<div style="float:right;">
<a href="">MIT
Copyright &copy; 2008 <a href="">Ryan McGeary</a>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "' type='text/javascript'%3E%3C/script%3E"));
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-2856277-2");
Jump to Line
Something went wrong with that request. Please try again.