Dated and outdated Spans

by Joe Saad

HTML

<div>
Cras sit amet arcu ante, a <span id="Wed Jan 26 2011 16:40:50 GMT+0300" class="DateHighlight">first date</span> tellus. Sed ante nisl, ultricies vitae egestas eu; volutpat sit amet mauris. Duis sollicitudin erat sit amet orci interdum commodo. Proin tempus pharetra tellus et consectetur! Nulla fermentum dui sit amet lorem pellentesque et egestas leo vehicula. Suspendisse potenti. Duis <span id="Tue Aug 14 2012 16:40:50 GMT+0300" class="DateHighlight">Second date</span>faucibus ullamcorper erat ac aliquet. Aliquam et nunc odio. Donec sed turpis sit amet lacus varius fermentum vitae quis lectus? Proin eu elit ut elit aliquet commodo cursus vitae metus.

Pellentesque mollis molestie pharetra. Sed est magna, venenatis dapibus congue eu, posuere nec nisi. Aenean mi quam; volutpat vel pulvinar a, dignissim eu ante. Nulla molestie lobortis mattis. Proin pulvinar suscipit velit sit amet eleifend. Vivamus porttitor egestas tortor, eu sodales nisl tincidunt nec? Aenean sed magna eu enim sagittis facilisis fermentum at sapien. Mauris rhoncus nibh vitae nulla tristique suscipit? Mauris posuere ullamcorper accumsan. Donec a pharetra diam? Fusce egestas semper massa quis euismod. Donec porttitor metus sit amet lorem rhoncus non posuere nisi aliquet. In sapien nulla, luctus ac aliquam a, ullamcorper vitae massa? Curabitur non est nec nunc vulputate ornare condimentum at purus. Mauris non elit id sem adipiscing blandit quis in massa!
</div>

CSS

.DateHighlight {font-weight:bold;}

JavaScript

var d = new Date();
var bDate;
//alert('TRAIL : '+d.getTime());

function dateDiff(dateEarlier, dateLater) {
    var one_day=1000*60*60*24;
   // alert(dateEarlier +' and ' + dateLater);
    return (  Math.round((dateLater.getTime()-dateEarlier.getTime())/one_day)  );
}

$('span.DateHighlight').each(function(){
    bDate = new Date($(this).attr('id'));
    //alert(bDate.getTime()+ ': '+$(this).html());
    //alert(dateDiff(bDate, d));
    if (dateDiff(bDate, d) > 100) {
    //   alert('big');
       $(this).removeClass();        
    }
    else {
        $(this).append('<span class="HDate">('+$(this).attr("id")+')</span>').css('background-color','#EA7EBA');
        $('span.HDate').css({'color':'darkred','font-size':'smaller'})
    }    
});