Alter CSS dynamically using JQuery (or simple Javascript) based on date comparison -
i hand-coding small calendar of events. wish display basic event information (date, time, location, link learn more). since page have more 10-20 events listed @ given time (and once or twice per year), i'm not over-engineering using calendar plugin or anything.
all wish compare current date against html5 <time date=""></time> attribute , alter css on parent element if date specified in past (by @ least 1 day).
by default background color of <li> element class .event white (#fff). if date in past, want background color on <li class='event'> class change grey (#ddd) when page loads.
<doctype html> <html> <head> <title>events</title> <style> .event { background-color: #fff; } </style> <script> </script> </head> <body> <ul class="row block-grid events"> <li class="small-12 medium-6 large-4 column event"> <dl> <dt><time date="2016-02-02">feb 2</time></dt> <dd>boston public library @ 7:00pm</dd> <dd>book launch</dd> <dd>boston, ma</dd> <dd><a href="http://www.bpl.org">more details</a></dd> </dl> </li> </ul> </body> </html>
here jquery solution. use "addclass()" or similar method more flexibility.
https://jsfiddle.net/4nb0w2yu/1/
$('time').each(function() { var submitted_date = new date($(this).attr('date')); var = new date(); console.log(submitted_date.gettime() < now.gettime()); if (submitted_date.gettime() < now.gettime()) { $(this).parent().parent().css('background', 'gray') } }); 
Comments
Post a Comment