mirror of
https://github.com/scratchfoundation/jquery-timeago.git
synced 2024-11-23 15:57:54 -05:00
156 lines
6.7 KiB
HTML
156 lines
6.7 KiB
HTML
|
<!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 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>
|
||
|
|
var zeropad = function (num) { return ((num < 10) ? '0' : '') + num; };
|
||
|
|
var iso8601 = function (date) {
|
||
|
|
return date.getUTCFullYear() + "-" + zeropad(date.getUTCMonth()+1) + "-" + zeropad(date.getUTCDate())
|
||
|
|
+ "T" + zeropad(date.getUTCHours()) + ":" + zeropad(date.getUTCMinutes()) + ":" + zeropad(date.getUTCSeconds()) + "Z";
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
<script type="text/javascript">
|
||
|
|
jQuery(document).ready(function($) {
|
||
|
|
$('abbr[class*=loaded]').each(function() {
|
||
|
|
this.title = iso8601(new Date());
|
||
|
|
});
|
||
|
|
$('abbr[class*=modified]').each(function() {
|
||
|
|
this.title = iso8601(new Date(document.lastModified));
|
||
|
|
});
|
||
|
|
|
||
|
|
$('abbr[class*=timeago]').timeago();
|
||
|
|
});
|
||
|
|
</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; }
|
||
|
|
pre em { font-style: normal; background-color: #554; }
|
||
|
|
pre, tt { font-family: monaco,"courier new",mono; }
|
||
|
|
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">
|
||
|
|
This page was last modified <abbr class="modified timeago">sometime before now <span class="help">(turn on javascript, loser)</span></abbr>.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<p class="example">
|
||
|
|
Ryan was born <abbr class="timeago" title="1978-12-18T17:17:00Z">Dec 18, 1978</abbr>.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<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>6 hours ago</em></abbr></pre>
|
||
|
|
|
||
|
|
<p class="how">
|
||
|
|
As time passes, the timestamps will automatically update.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<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>
|
||
|
|
|
||
|
|
<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>
|
||
|
|
|
||
|
|
<h3>When?</h3>
|
||
|
|
<p class="last">
|
||
|
|
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>
|
||
|
|
</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>
|