index.html 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5. <meta name="microid" content="mailto+http:sha1:566841e568e84b46c92d2291b44b836dfddc5c42" />
  6. <title>timeago: a jQuery plugin</title>
  7. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
  8. <script src="jquery.timeago.js" type="text/javascript"></script>
  9. <script src="test/test_helpers.js" type="text/javascript"></script>
  10. <script type="text/javascript">
  11. jQuery(document).ready(function($) {
  12. prepareDynamicDates();
  13. $("abbr.timeago").timeago();
  14. $("#prog_date").text(jQuery.timeago(new Date()));
  15. $("#prog_string").text(jQuery.timeago("2008-07-17"));
  16. $("#prog_element").text(jQuery.timeago("2008-07-20"));
  17. });
  18. </script>
  19. <style>
  20. * { margin: 0; padding: 0; }
  21. body { font-family: Helvetica,Arial,sans-serif; color: #333; background-color: #ccc; font-size: 16px; line-height: 24px; }
  22. h1 { margin: 0; font-size: 60px; line-height: 100px; text-align: center; }
  23. h2 { margin: -30px 0 40px 50px; font-size: 20px; line-height: 20px; text-align: center; color: #999; }
  24. h3 { margin: 24px 0 6px 0; font-size: 18px; line-height: 18px; border-bottom: 1px solid #ccc; }
  25. h1 img { vertical-align: middle; }
  26. p { margin: 0 0 24px 0; }
  27. p.example { margin: 0 0 12px 0; }
  28. p.how, p.last { margin: 0; }
  29. ul { margin: 0 24px 24px; }
  30. li { line-height: 24px; }
  31. pre { background-color: #333; color: #fff; margin: 12px 0; font-size: 12px; padding: 0 6px; }
  32. pre em { font-style: normal; background-color: #554; }
  33. pre, tt { font-family: monaco,"courier new",mono; }
  34. abbr { border-bottom: 1px dotted #333; }
  35. tt { font-size: 14px; }
  36. a { color: #06e; padding: 1px; }
  37. em { font-style: normal; background-color: #feb }
  38. a:hover { background-color: #06c; color: #fff; text-decoration: none; }
  39. #content { margin:0 auto; padding: 24px; width:700px; background-color:#fff; border: 1px solid #999; border-width: 0 1px 1px 1px; }
  40. #footer { margin:0 auto 24px; padding: 12px; width:700px; line-height: 24px; }
  41. .help { font-size: 14px; color: #888; }
  42. </style>
  43. </head>
  44. <body>
  45. <div id="content">
  46. <h1><img src="clock.png" /> timeago</h1>
  47. <h2>a jQuery plugin</h2>
  48. <h3>What?</h3>
  49. <p>
  50. Timeago is a jQuery plugin that makes it easy to support automatically updating fuzzy
  51. timestamps (e.g. "4 minutes ago" or "about 1 day ago"). <a href="jquery.timeago.js">Download</a>, view
  52. the examples, and enjoy.
  53. </p>
  54. <noscript><p class="example"><strong>Whoah, whoah, whoah. You see the irony here, don't you? You're looking for a jQuery plugin, yet you surf the Internet with JavaScript turned off. This confuses the Interwebs. Afterall, there might be some useful demos and such that you could enjoy, but instead, you're wasting your time reading this. I'm so sorry.</strong></p></noscript>
  55. <p class="example">
  56. You opened this page <abbr class="loaded timeago">when you opened the page</abbr>. <span class="help">(This will update every minute. Wait for it.)</span>
  57. </p>
  58. <p class="example">
  59. This page was last modified <abbr class="modified timeago">sometime before now [browser might not support document.lastModified]</abbr>.
  60. </p>
  61. <p class="example">
  62. Ryan was born <abbr class="timeago" title="1978-12-18T17:17:00Z">Dec 18, 1978</abbr>.
  63. </p>
  64. <h3>Why?</h3>
  65. <p>Timeago was originally built for use with <a href="http://yarp.com">Yarp.com</a> to timestamp comments.</p>
  66. <ul>
  67. <li>Avoid timestamps dated "1 minute ago" even though the page was opened 10 minutes ago; <em>timeago refreshes automatically</em>.</li>
  68. <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>
  69. <li>You get to <em>use <a href="http://microformats.org/wiki/datetime-design-pattern">microformats</a></em> like the cool kids.</li>
  70. </ul>
  71. <h3>How?</h3>
  72. <p class="how">
  73. First, load <a href="http://jquery.com/">jQuery</a> and the plugin:
  74. </p>
  75. <pre>
  76. &lt;script src=&quot;jquery.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
  77. &lt;script src=&quot;jquery.timeago.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;</pre>
  78. <p class="how">
  79. Now, let's attach it to your timestamps on DOM ready:
  80. </p>
  81. <pre>
  82. jQuery(document).ready(function() {
  83. jQuery("abbr.timeago").timeago();
  84. });</pre>
  85. <p class="how">
  86. This will turn all <tt>abbr</tt> elements with a class
  87. of <tt>timeago</tt> and an <a href="http://en.wikipedia.org/wiki/ISO_8601">ISO 8601</a> timestamp in the title:
  88. </p>
  89. <pre>
  90. &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>
  91. <p class="how">
  92. into something like this:
  93. </p>
  94. <pre>
  95. &lt;abbr class=&quot;timeago&quot; title=&quot;July 17, 2008&quot;&gt;<em><abbr class="timeago" title="2008-07-17T09:24:17Z">time ago</abbr></em>&lt;/abbr&gt;</pre>
  96. <p>
  97. which yields: <abbr class="timeago" title="2008-07-17T09:24:17Z">July 17, 2008</abbr>. As time passes, the timestamps will automatically update.
  98. </p>
  99. <p class="how">
  100. You can also use it programmatically:
  101. </p>
  102. <pre>
  103. jQuery.timeago(new Date()); //=> &quot;<span id="prog_date"></span>&quot;
  104. jQuery.timeago("2008-07-17"); //=> &quot;<span id="prog_string"></span>&quot;
  105. jQuery.timeago(jQuery("abbr#some_id")); //=> &quot;<span id="prog_element"></span>&quot; // [title=&quot;2008-07-20&quot;]</pre>
  106. <p class="how">
  107. To support timestamps in the future, use the <tt>allowFuture</tt> setting:
  108. </p>
  109. <pre>
  110. jQuery.timeago.settings.allowFuture = true;</pre>
  111. <p class="how">
  112. To disable timestamps in the past, use the <tt>allowPast</tt> setting.
  113. This setting is set to true by default. When set to false, if the time is in the past then instead of displaying a message like "5 minutes ago" a static message will be displayed.
  114. The staic message displayed can be configured with the <tt>strings.inPast</tt> setting:
  115. </p>
  116. <pre>
  117. jQuery.timeago.settings.strings.inPast = "time has elapsed";
  118. jQuery.timeago.settings.allowPast = false;</pre>
  119. <h3>Excusez-moi?</h3>
  120. <p>
  121. Yes, timeago has locale/i18n/language support. Here are some <a href="https://github.com/rmm5t/jquery-timeago/tree/master/locales">configuration examples</a>. Please submit a <a href="https://github.com/rmm5t/jquery-timeago">GitHub pull request</a> for corrections or additional languages.
  122. </p>
  123. <h3>Where?</h3>
  124. <p><a href="jquery.timeago.js">Download the &quot;stable&quot; release</a>.</p>
  125. <p>
  126. The code is hosted on
  127. GitHub: <a href="http://github.com/rmm5t/jquery-timeago">http://github.com/rmm5t/jquery-timeago</a>.
  128. Go on, live on the edge.
  129. </p>
  130. <h3>Who?</h3>
  131. <p>
  132. Timeago was built by <a href="http://ryan.mcgeary.org">Ryan McGeary</a>
  133. (<a href="http://twitter.com/rmm5t">@rmm5t</a>) while standing on the
  134. shoulders of giants. John Resig wrote about
  135. a <a href="http://ejohn.org/blog/javascript-pretty-date/">similar
  136. approach</a>. The verbiage was based on
  137. the <tt>distance_of_time_in_words</tt> ActionView helper
  138. in <a href="http://rubyonrails.org">Ruby on Rails</a>.
  139. </p>
  140. <h3>When?</h3>
  141. <p>
  142. 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>
  143. </p>
  144. <h3>What else?</h3>
  145. <p class="example">
  146. HTML5 has a new <tt>time</tt> tag and timeago supports it too.
  147. </p>
  148. <pre>
  149. &lt;time class=&quot;<em>timeago</em>&quot; datetime=&quot;<em>2008-07-17T09:24:17Z</em>&quot;&gt;July 17, 2008&lt;/time&gt;</pre>
  150. <p class="how">
  151. Attach timeago like so:
  152. </p>
  153. <pre>
  154. jQuery(document).ready(function() {
  155. jQuery("time.timeago").timeago();
  156. });</pre>
  157. <p>
  158. Are you concerned about time zone support? Don't be. Timeago handles
  159. this too. As long as your timestamps are
  160. in <a href="http://en.wikipedia.org/wiki/ISO_8601">ISO 8601</a> format
  161. and include a
  162. full <a href="http://en.wikipedia.org/wiki/ISO_8601#Time_zone_designators">time
  163. zone designator</a> (±hhmm), everything should work out of the box
  164. regardless of the time zone that your visitors live in.
  165. </p>
  166. <h3>Huh?</h3>
  167. <p class="last">
  168. Need a Rails helper to make those fancy microformat <tt>abbr</tt> tags? Fine, here ya go:
  169. </p>
  170. <pre>
  171. def timeago(time, options = {})
  172. options[:class] ||= "timeago"
  173. content_tag(:abbr, time.to_s, options.merge(:title => time.getutc.iso8601)) if time
  174. end</pre>
  175. <h3>Do you use Timeago?</h3>
  176. <p>
  177. Great! Please add your site to the list
  178. of <a href="https://github.com/rmm5t/jquery-timeago/wiki/Sites-that-use-Timeago">Sites
  179. that use Timeago</a>.
  180. </p>
  181. </div>
  182. <div id="footer">
  183. <div style="float:right;">
  184. <a href="http://www.opensource.org/licenses/mit-license.php">MIT
  185. License</a>
  186. </div>
  187. Copyright &copy; 2008-2015 <a href="http://ryan.mcgeary.org">Ryan McGeary</a>
  188. (<a href="http://twitter.com/rmm5t">@rmm5t</a>)
  189. </div>
  190. <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>
  191. <script type="text/javascript">
  192. var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
  193. document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
  194. </script>
  195. <script type="text/javascript">
  196. var pageTracker = _gat._getTracker("UA-2856277-2");
  197. pageTracker._initData();
  198. pageTracker._trackPageview();
  199. </script>
  200. </body>
  201. </html>