Just a quick note here to share a jQuery plugin that Todd Sharp shared with me: Prettydate. Prettydate takes dates (which you would hide within your DOM) and formats them in a more generic "time since.." form. So for example, a date within a few seconds will post as "just now", whereas an entry a few minutes old will display as "5 minutes old." The plugin supports dates up to one month old and will automatically update while your users look at a page. This creates a cool effect. They may initially see:
But within a few minutes this will be:
I created a quick ColdFusion script that demonstrates this. The one thing you have to remember is that you must convert the dates to ISO8601 format. In the following example I've used hard coded dates but obviously you could get this data from a database:
<head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript" src="/jquery/jquery.prettydate.js"></script> <script> $(document).ready(function() { $("div#content > p.article > span").prettyDate() }) </script> <style> .date { font-family: Arial, Helvetica, sans-serif; font-size: 10px; display:block; } </style> </head> <body> <cfset articles = [ {title="Article AAA", date=dateAdd("s", -50, now())}, {title="Article One", date=dateAdd("n", -5, now())}, {title="Article Two", date=dateAdd("n", -58, now())} ]> <div id="content"> <cfloop index="article" array="#articles#"> <cfoutput> <p class="article"> <span class="title"><b>#article.title#</b></span><br/> <span class="date" title="#dateFormat(article.date,'yyyy-mm-dd')#T#timeFormat(article.date,'HH:mm:ss')#"></span> Some kind of teaser here...<br/> </p> </cfoutput> </cfloop> </div> </body> </html><html>
The screen shots I pasted above show the result of this example. For more docs and examples, see the plugin's home page. Note - this is an update to a plugin John Resig originally created so if you Google, make sure you get the new one.