Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
branch: master
Fetching contributors…

Cannot retrieve contributors at this time

file 179 lines (164 sloc) 8.465 kb
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179
<!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>
&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>
        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()); //=> &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:
      </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 &quot;stable&quot; 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 &copy; 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>
Something went wrong with that request. Please try again.