in JavaScript

Introducing timeago: A jQuery library to update fuzzy timestamps automatically

You may have seen at least one of these timestamps in websites especially social networks:

time1

time3

These timestamps are very important and useful in all websites that time matters. But you may have wondered how to implement such a thing in your own web applications.

There are a couple of ways to do so. The first one is to implement this functionality server side. I’ve implemented a server side C# function to do it; but, there would be a very big issue: As the time goes on, the timestamp won’t update! The whole page needs to be refreshed! You may have use ajax to refresh the time but this method also costs lots of resources. The best place to do such a thing is client and that’s exactly what timeago does!

What is timego?

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”).

Timeago has lots of advantages over server side implementation I’ve mentioned above. Here are some:

  • It is very lightweight (About 8KB when not minified and about 4KB when minified and GZiped)
  • Runs on user’s browser; consequently, it won’t cost any server resources.
  • It can be used alongside¬†caching techniques while it runs on client.
  • The timestamps’ values will update live so there’s no need to refresh the whole page or make ajax requests to update them.
  • It’s free and open-source!

How to use timeago?

Using timeago it very simple. Imagine you have a span element in your web page and you want to update the value of this field using timeago. The very first step is to use jquery.timeago.js file in your page’s head element. You also need jQuery library as well; so, add it too if you haven’t:


After that place your ‘span’ as following:

July 17, 2008

As you may have noticed that we put the real datetime we want to calculate from in the ‘title’ attribute. The final step is to add the following piece of javascript in your page:

$(document).ready(function() {
  $("span.timeago").timeago();
});

You’re done! The javascript code above converts all span elements which has “timeago” class.

How to download timeago

Since timeago is an open-source project, it can be found by its GitHub repository or its official website at:¬†http://timeago.yarp.com/. Don’t forget to check out its website for more examples.

This library was very useful for me. Hope it does the same for you.