Papermashup

Subscribe


Tweets


"RT @bethgordon: .@Tesco Please rethink archaic 'Approved by Mums'. Pretty sure it's not just mothers who make childcare decisions. https://…"

@ashleyford 2 days ago

"Is there ever a time that @DFS doesn't have a sale on?"

@ashleyford 5 days ago

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

Papermashup

Dynamically updating times using jQuery

AshleyAshley

With the rise of Facebook and Twitter we’re so used to instantly updating data and being able to judge fresh content almost instantly. Facebook for instance automatically updates how long ago someone left a comment on the fly without even refreshing the page. There’s an easy frontend solution to generating this. and here are the advantages and disadvantages.

Advantages

Disadvantages

The Code

first you need to include the Timeago jQuery plugin and helper.js file. Then you simply call the function below and specify the class that your timestamp is.


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

The HTML


    <div id="content"> 
   
      <p> 
        You opened this page <abbr class="loaded time">a moment ago</abbr>. <span class="help">(This will update every minute. Wait for it.)</span> 
      </p> 
      <p> 
        The 20th of June was <abbr class="time" title="2010-06-20 12:23:04">20th June 2010</abbr>.
      </p> 

    </div> 

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

Comments 3
  • Enamul Hoq
    Posted on

    Enamul Hoq Enamul Hoq

    Reply Author

    Very great and helpful post thanks for sharing this with us


  • Kenny R
    Posted on

    Kenny R Kenny R

    Reply Author

    sweet, for those with php5 and want to easily convert your unix timestamp to iso8601 use

    [quote]

    [/quote]


  • Chiel
    Posted on

    Chiel Chiel

    Reply Author

    If you’re not afraid to use html5 elements (you shouldn’t be! :D), then you can also use the element, with the datetime attribute. It’s great for something like this.