jquery-timeago/index.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 src="test.js" type="text/javascript"></script>
    <script type="text/javascript">
      jQuery(document).ready(function($) {
        $('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; 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; }
      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>How?</h3>
      <p class="how">
        First, load <a href="http://jquery.com/">jQuery</a> and the plugin:
      </p>

      <pre>
&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:
      </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>
&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:
      </p>

      <pre>
&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>

      <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 &copy; 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>
first version 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" />`
			`<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>`
More unit tests added 2008-07-18 15:58:26 -04:00			`<script src="test.js" type="text/javascript"></script>`
first version 2008-07-18 11:34:06 -04:00			`<script type="text/javascript">`
			`jQuery(document).ready(function($) {`
			`$('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; }`
More unit tests added 2008-07-18 15:58:26 -04:00			`pre { background-color: #333; color: #fff; margin: 12px 0; font-size: 12px; padding: 0 6px; }`
first version 2008-07-18 11:34:06 -04:00			`pre em { font-style: normal; background-color: #554; }`
			`pre, tt { font-family: monaco,"courier new",mono; }`
More unit tests added 2008-07-18 15:58:26 -04:00			`abbr { border-bottom: 1px dotted #333; }`
first version 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">`
Updated homepage 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>.`
first version 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>`

			`<h3>How?</h3>`
			`<p class="how">`
			`First, load <a href="http://jquery.com/">jQuery</a> and the plugin:`
			`</p>`

			`<pre>`
More unit tests added 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>`
first version 2008-07-18 11:34:06 -04:00
			`<p class="how">`
			`Now, let's attach it to your timestamps on DOM ready:`
			`</p>`

			`<pre>`
More unit tests added 2008-07-18 15:58:26 -04:00			`jQuery(document).ready(function() {`
			`jQuery('abbr[class*=timeago]').timeago();`
			`});</pre>`
first version 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>`
More unit tests added 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>`
first version 2008-07-18 11:34:06 -04:00
			`<p class="how">`
			`into something like this:`
			`</p>`

			`<pre>`
Updated homepage 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>`
first version 2008-07-18 11:34:06 -04:00
			`<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>`