CSS Date Selectors
I recently just finished a project that included a day-by-day itinerary, and an hour-by-hour speakers schedule, I really wanted to highlight the current days events, and emphasis the current speakers bio - not a daunting task by any means - but always looking to skin the cat differently, I used a single line of php, and a two generated css selectors.
here’s an item from the event list
<ol id="3070812">
<li>Effective Sales via email</li>
<li>Time: 12pm</li>
<li>Date: March 7th, 2008</li>
<li>Location: Green Room Loungue</li>
</ol>
and the corresponding generated style:
ol li#3070812
{
color: #ff0033;
font-weight: bold;
}
so it was as simple as generating a unique id based on the events date and time ‘307081200’ (month,day,year,time) and then generating a unique css selector based on the current date and time (at least current to the page request) - I happen to know for certain that I’d have no overlapping events - so I’d have no duplicate IDs, which is invalid markup (if you are going to have duplicate entries - use classes, instead of ID’s)
ol li#<?echo date("mdyH");?>
automatically highlighting the relevant information. simple and effective - to take this a step further I could use some javascript to update on the hour, half-hour whatever.
Obviously you can do this with ANY scripting language in existance - simple and clean - gotta love that.