48 |
timeago
49 |
a jQuery plugin
50 |
51 |
What?
52 |
53 | Timeago is a jQuery plugin that makes it easy to support automatically updating fuzzy
54 | timestamps (e.g. "4 minutes ago" or "about 1 day ago"). Download, view
55 | the examples, and enjoy.
56 |
57 |
58 |
59 | You opened this page when you opened the page. (This will update every minute. Wait for it.)
60 |
61 |
62 | This page was last modified sometime before now [browser might not support document.lastModified].
63 |
64 |
65 | Ryan was born Dec 18, 1978.
66 |
67 |
68 |
Why?
69 |
Timeago was originally built for use with Yarp.com to timestamp comments.
70 |
71 | - Avoid timestamps dated "1 minute ago" even though the page was opened 10 minutes ago; timeago refreshes automatically.
72 | - You can take full advantage of page caching in your web applications, because the timestamps aren't calculated on the server.
73 | - You get to use microformats like the cool kids.
74 |
75 |
76 |
How?
77 |
78 | First, load jQuery and the plugin:
79 |
80 |
81 | <script src="jquery.min.js" type="text/javascript"></script>
82 | <script src="jquery.timeago.js" type="text/javascript"></script>
83 |
84 | Now, let's attach it to your timestamps on DOM ready:
85 |
86 |
87 | jQuery(document).ready(function() {
88 | jQuery("abbr.timeago").timeago();
89 | });
90 |
91 | This will turn all abbr elements with a class
92 | of timeago and an ISO 8601 timestamp in the title:
93 |
94 |
95 | <abbr class="timeago" title="2008-07-17T09:24:17Z">July 17, 2008</abbr>
96 |
97 | into something like this:
98 |
99 |
100 | <abbr class="timeago" title="July 17, 2008">time ago</abbr>
101 |
102 | which yields: July 17, 2008. As time passes, the timestamps will automatically update.
103 |
104 |
105 |
106 | You can also use it programmatically:
107 |
108 |
109 | jQuery.timeago(new Date()); //=> ""
110 | jQuery.timeago("2008-07-17"); //=> ""
111 | jQuery.timeago(jQuery("abbr#some_id")); //=> "" // [title="2008-07-20"]
112 |
113 |
114 | To support timestamps in the future, use the allowFuture setting:
115 |
116 |
117 | jQuery.timeago.settings.allowFuture = true;
118 |
119 |
Excusez-moi?
120 |
121 | Yes, timeago has locale/i18n/language support. Here are some configuration examples. Please submit a GitHub pull request for corrections or additional languages.
122 |
123 |
124 |
Where?
125 |
Download the "stable" release.
126 |
127 | The code is hosted on
128 | GitHub: http://github.com/rmm5t/jquery-timeago.
129 | Go on, live on the edge.
130 |
131 |
132 |
Who?
133 |
134 | Timeago was built by Ryan McGeary
135 | (@rmm5t) while standing on the
136 | shoulders of giants. John Resig wrote about
137 | a similar
138 | approach. The verbiage was based on
139 | the distance_of_time_in_words ActionView helper
140 | in Ruby on Rails.
141 |
142 |
143 |
When?
144 |
145 | Timeago was conceived on July 17, 2008. (Yup, that's powered by timeago too)
146 |
147 |
148 |
What else?
149 |
150 | HTML5 has a new time tag and timeago supports it too.
151 |
152 |
153 | <time class="timeago" datetime="2008-07-17T09:24:17Z">July 17, 2008</time>
154 |
155 | Attach timeago like so:
156 |
157 |
158 | jQuery(document).ready(function() {
159 | jQuery("time.timeago").timeago();
160 | });
161 |
162 |
163 | Are you concerned about time zone support? Don't be. Timeago handles
164 | this too. As long as your timestamps are
165 | in ISO 8601 format
166 | and include a
167 | full time
168 | zone designator (±hhmm), everything should work out of the box
169 | regardless of the time zone that your visitors live in.
170 |
171 |
172 |
Huh?
173 |
174 | Need a Rails helper to make those fancy microformat abbr tags? Fine, here ya go:
175 |
176 |
177 | def timeago(time, options = {})
178 | options[:class] ||= "timeago"
179 | content_tag(:abbr, time.to_s, options.merge(:title => time.getutc.iso8601)) if time
180 | end
181 |
182 |
Do you use Timeago?
183 |
184 |
185 | Great! Please add your site to the list
186 | of Sites
187 | that use Timeago.
188 |
189 |
190 |
191 |
199 |
200 |
13 |
Short term
14 |
15 |
You opened this page (you shouldn't see this).
16 |
17 |
18 | This page was last modified sometime before
19 | now (your browser might not support document.lastModified for local resources).
20 |
21 |
22 |
Long term
23 |
24 |
25 | Jett was born
26 | (you shouldn't see this)
27 | [from Z].
28 |
29 |
30 | Jett was born
31 | (you shouldn't see this)
32 | [from -0500].
33 |
34 |
35 | Logan was born
36 | (you shouldn't see this)
37 | [from Z].
38 |
39 |
40 | Logan was born
41 | (you shouldn't see this)
42 | [from -0400].
43 |
44 |
45 | Ryan was born
46 | (you shouldn't see this)
47 | [from Z].
48 |
49 |
50 | Ryan was born
51 | (you shouldn't see this)
52 | [from -0500].
53 |
54 |
55 |
Other formats
56 |
57 |
Date only (abbr element): (you shouldn't see this).
58 |
Date only (time element): .
59 |
Date only (friendly tooltip): February 26th.
60 |
Date only (default tooltip): .
61 |
Timestsamp (with millis): (you shouldn't see this).
62 |
63 |
64 |
65 |
66 |
Cutoff
67 |
68 |
Date that is older than cutoff: (this should be displayed)
69 |
70 |
Date that is newer than cutoff: (you shouldn't see this)
71 |
72 |
Errors
73 |
74 |
Bad (letters): (this should be displayed).
75 |
Bad (blank): (this should be displayed).
76 |
Bad (missing): (this should be displayed).
77 |
78 |
Parsing
79 |
80 |
Ryan was born
81 |
82 | - [from Z]
83 | - [from -00:00]
84 | - [from -05:00]
85 | - [from -0500]
86 | - [from +09:00]
87 | - [from +0900]
88 | - [from blank TZ]
89 | - [from Z with milliseconds]
90 | - [from Z with microseconds]
91 | - [from Z with tenths of a second]
92 | - [from Z with hundreths of a second]
93 |
94 |
95 |
Wording
96 |
97 |
98 | - [-120 min]
99 | - [-60 sec]
100 | - [-30 sec]
101 | - [-1 sec]
102 | - [0 sec]
103 | - [30 sec]
104 | - [45 sec]
105 | - [90 sec]
106 | - [120 sec]
107 | - [45 min]
108 | - [89 min]
109 | - [90 min]
110 | - [120 min]
111 | - [1380 min]
112 | - [25 hours]
113 | - [41 hours]
114 | - [42 hours]
115 | - [48 hours]
116 | - [696 hours]
117 | - [30 days]
118 | - [190 days]
119 | - [366 days]
120 | - [725 days]
121 | - [1095 days]
122 |
123 |
124 |
Settings
125 |
126 |
127 | - [2 min]
128 | - [9 min]
129 | - [10 min]
130 |
131 | - [5840 days]
132 | - [23360 days]
133 |
134 | - [120 sec]
135 | - [120 sec]
136 |
137 | - [-120 min]
138 | - [-60 sec]
139 | - [-30 sec]
140 | - [-1 sec]
141 | - [0 sec]
142 | - [30 sec]
143 | - [45 sec]
144 | - [90 sec]
145 | - [120 sec]
146 | - [45 min]
147 | - [89 min]
148 | - [90 min]
149 | - [120 min]
150 | - [1380 min]
151 | - [25 hours]
152 | - [48 hours]
153 | - [696 hours]
154 | - [30 days]
155 | - [190 days]
156 | - [366 days]
157 | - [1095 days]
158 |
159 | - [-120 min]
160 | - [-60 sec]
161 | - [-30 sec]
162 | - [-1 sec]
163 | - [0 sec]
164 | - [30 sec]
165 | - [45 sec]
166 | - [90 sec]
167 | - [120 sec]
168 | - [45 min]
169 | - [89 min]
170 | - [90 min]
171 | - [120 min]
172 | - [1380 min]
173 | - [25 hours]
174 | - [48 hours]
175 | - [696 hours]
176 | - [30 days]
177 | - [190 days]
178 | - [366 days]
179 | - [1095 days]
180 |
181 | - [-120 min]
182 | - [-60 sec]
183 | - [-30 sec]
184 | - [-1 sec]
185 | - [0 sec]
186 | - [30 sec]
187 | - [45 sec]
188 | - [90 sec]
189 | - [120 sec]
190 |
191 |
192 |
193 |
194 |
195 |
196 |
197 |
588 |
589 |
590 |
--------------------------------------------------------------------------------