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.

Everything is getting “JavaScripted”! Here’s one! MD5 hash function

As far as I know, all web developers are familiar (or even expert) in JavaScript these days; at least, since the release of the first version of jQuery. Most people were forgetting it; but, plugins like jQuery, MooTools and others gave it a new life. Now all web developers are using it and making love with it.

I was surfing the web and suddenly found this very smart guy name Joseph Myers. He has done a lot of great jobs on JavaScript and one of them is a function which hash your string using the MD5 algorithm.

You know, I’m not going to go through details about what he has done; as a result, you can download this function from here and add to your project if you want to use it.

How it works

It’s very simple! After you’ve added this file to your project, the “mdf()” function can be used in order hash any string. Here’s an example:

Please enter your email address:<br />
<input type="email" id="userEmail" />
<button type="button" id="makeHash">Create</button>
<p id="result">

</p>
<script src="/Scripts/jquery-1.8.2.min.js"></script>
<script src="/Scripts/md5.js"></script>
<script>
    $(document).ready(function () {
        $("#makeHash").click(function () {
            $("#result").text(md5($("#userEmail").val()));
        });
    });
</script>

How to create a tab control using ASP.NET and JavaScript

It may happen to any ASP.NET Developer that the customers want to have a Tab Control in their websites. There are many ASP.NET components such as Telerik RAD Controls, ComponentArt, DevExpress, etc. which can help you out in this but sometimes they are expensive for your project capacity.

In this post, I’m going to show you how you can create a very simple Tab Control using ASP.NET and JavaScript.

You can do lots of thing in order to create a Tab Control but what I’m going to do is to create a class that is inherited from System.Web.UI.WebControl:

    public class TabControl : System.Web.UI.WebControls.WebControl
    {
    }

You can make your Tab Control flexible by adding some properties to it. For example, enable your developers to set CssClass to a TabItem:

 

private string _MainCssClass;
private string _ItemCssClass;
private string _InActiveCssClass;
private string _ActiveCssClass; 
private Unit _ItemWidth = 70;
private HorizontalAlign _HorizontalAlign = HorizontalAlign.NotSet;
private string _LinkCssClass;

They’re OK; but the interesting part is to use of a string array in order to store TabItem names:

private string[] _TabNames = { "Item1", "Item2" };

This is also a property, so developers can add their own items. Another important property is a list of Panels of those TabItems. Actually, Panels are the content of each TabName:

private List<Panel> _Panels = new List<Panel>();

In the field above, developers can add their specified panels for each TabItem. The most important method in creating custom web controls is the Render() method which enable you to design your control using HTML tags. Here is my Render() method:

 

protected override void Render(System.Web.UI.HtmlTextWriter w)
{
    if (_Panels.Count == 0 || _Panels == null)
        throw new NullReferenceException("Please specify at least one panel.");
 
    w.WriteLine("<!-- Developed by Mohammad Mahdi Ramezanpour. © 2008 Marlik. -->");
    w.WriteLine(String.Format(@"<table cellpadding=""0"" cellspacing=""0""
    class=""{0}""><tr id=""MarlikTabControl"">", _MainCssClass));
    foreach (Panel p in this.Panels)
    {
        cols.Add("Tab_" + _itemIndex);
        w.WriteLine(String.Format(@"<td onmouseover=""javascript:this.style.cursor='hand';""
        class=""{0} {3}"" align=""{5}"" id=""Tab_{4}"" 
        onclick=""ShowTabContent('{1}', 'Tab_{4}');"" width=""{2}"">",
         _ItemCssClass, p.ClientID, this._ItemWidth, this._InActiveCssClass, 
         this._itemIndex, this._HorizontalAlign.ToString()));
        w.WriteLine(String.Format(@"<a class=""{1} {2}"">{0}</a>",
        _TabNames[_itemIndex], _LinkCssClass,  _ItemCssClass));
        _itemIndex++;
        w.WriteEndTag("td");
    }
    w.Write("</tr></table>");
    w.WriteLine(JavaFunctions().ToString());
    base.Render(w);
}

How it works?

In the first I checked for available panels and if there was no panels so an exception will be throwing using NullReferenceException.

As you know, there is a writer parameter as System.Web.UI.HtmlTextWriter in Render() method that enable you to generate HTML codes in your web component. You have to use that if you want to use HTML or any client-side code in your web control. Add I did above is to create a HTML <table></table> tag but rows and columns will be generating dynamically using HtmlTextWriter.

You can download the full code here: TabControl