How to Change color of a text after a time period?

Question

I have created a notice board. I want to show the notices in Red color for the first 48 hours. After 48 hour the color of the Notices will be changed. Now what should i change or add in my code?

HTML body for the notice board -

<div class="col-md-4">
            <div class="widget-item" style="padding-top:0px;margin-top:0px;">
                        <div class="widget-main-title">
                            <h4 class="widget-title">Notice Board</h4>
                        </div> <!-- /.widget-main-title -->
                        <marquee id="dvNotice" FACE="courier" BEHAVIOR="SCROLL" height="247px" onmouseout="this.setAttribute('scrollamount', 2, 0);" onmouseover="this.setAttribute('scrollamount', 0, 0);" scrollamount="2" direction="up" style="text-align: left;">
                            <%--<div class="widget-inner" id="dvNotice">

                            </div> --%><!-- /.widget-inner -->
                        </marquee>
                    <!-- /.request-information -->
            </div> <!-- /.widget-item -->
        </div>

JQuery/JavaScript -

$(document).ready(function () {
PageMethods.loadNotice('', loadNoticeSuccess);
});
function loadNoticeSuccess(result) {
        $("#dvNotice").html('');
        var html = "";
        for (var i = 0; i < result.length; i++) {
            var month_value = result[i].PublishedDate.getMonth();
            var day_value = result[i].PublishedDate.getDate();
            html += "<div class=\"event-small-list clearfix\">";
            html += "<div class=\"calendar-small\"><span class=\"s-month\">" + months[month_value] + "</span><span class=\"s-date\">" + day_value + "</span></div>";
            //html += "<div class=\"event-small-details\"><h5 class=\"event-small-title\"><a href=\"event-single.html\">" + result[i].Title + "</a></h5><p class=\"event-small-meta small-text\">" + result[i].Description + "</p></div></div>";
            html += "<div class=\"event-small-details\"><h5 class=\"event-small-title\"><a href=\"Pages/NoticeBoard/NoticeDetails.aspx?noticeid=" + result[i].NoticeID + "\">" + result[i].Title + "</a></h5><p class=\"event-small-meta small-text\"></p></div></div>";
        }
        html += "<div class=\"event-small-list clearfix\" style=\"text-align:right;padding:0;\"><a href=\"Pages/NoticeBoard/NoticeBoard.aspx\">More</a></div>";
        $("#dvNotice").append(html);
    }

C# Code Behind for loading the notice board -

[WebMethod]
    public static List<Notice> loadNotice(string value)
    {
        IList<Notice> notice = NoticeManager.GetTopPublishedNotice();
        if (notice == null)
        {
            notice = new List<Notice>();
        }
        return notice.ToList();
    }

this link can help you : http://stackoverflow.com/questions/17320399/how-to-change-text-color-after-x-amount-of-seconds and the demo here : http://jsfiddle.net/simevidas/7ZrtQ/ — TheMightyX2Y, Jan 28 '15 at 08:50
the 48 hours are calculated from the "published date", yes ? — Alex, Jan 28 '15 at 11:40

score 0 · Answer 1 · answered Jan 28 '15 at 09:20

I assume you are using some CMS to add these notices. One option is to check difference between notice/content creation time and now on page load. This can be done easily through javascript get Time function.

If you don't have such value then simply add it to you CMS, to store metadata of creation date and time. Most CMS I have encountered have such possibilities.

Hope this theory will help.

score 0 · Answer 2 · answered Jan 28 '15 at 11:30

0

Can you please try this code after appending the html to the div dvNotice ,

setTimeout(function () {
        $('#dvNotice').css('color','yellow'); 
 }, 172800000);

answered Jan 28 '15 at 11:30

JTM

58
7

Breaks on refresh/window close/navigation ... basically never works unless users open the page and no longer touch the browser for 48 hours straight (browser crashes = again, breaks) – Alex Jan 28 '15 at 11:38

score 0 · Answer 3 · edited May 23 '17 at 12:06

I'm leveraging the function from this answer to calculate the difference of two dates, based on the assumption that 48 hours == 2 days

var _MS_PER_DAY = 1000 * 60 * 60 * 24;

// a and b are javascript Date objects
function dateDiffInDays(a, b) {
  // Discard the time and time-zone information.
  var utc1 = Date.UTC(a.getFullYear(), a.getMonth(), a.getDate());
  var utc2 = Date.UTC(b.getFullYear(), b.getMonth(), b.getDate());

  return Math.floor((utc2 - utc1) / _MS_PER_DAY);
}

// tweaked OP code
function loadNoticeSuccess(result) {
    $("#dvNotice").html('');
    var html = "";
    for (var i = 0; i < result.length; i++) {
        var isPast48Hours = dateDiffInDays(new Date(), result[i].PublishedDate) > 2;    
        if (isPast48Hours) { /*setup html for default color*/ }        
        else { /*setup html for red color */ }

        // rest of code, using the html you setup above for the variable color

    }    
}

What's missing here is a real-time verification (and reaction, switching the colors) of the age of the entry: if the page is loaded 47 hours and 59 minutes after the published date, the entry will be red and stay red.

How to Change color of a text after a time period?

3 Answers3