how to implement this?

Discussion in 'Web Design and Development' started by double t33, Jan 28, 2012.

  1. double t33 macrumors newbie

    Mar 3, 2011
    if anyone could help would be very grateful!

    how do you highlight opening hours for the certain day the user accesses the website in a table, hard to explain but if you look at

    how it highlights the day today

    source code for this part:

    <div class="hourswrap">
    <h3>Main Branch</h3>
    <table class="hourstable">
    <tr id="hours-Monday" class="hours-standardDay"><td>Monday</td><td>9:30 am</td><td>to</td><td>6:30 pm</td></tr>
    <tr id="hours-Tuesday" class="hours-standardDay"><td>Tuesday</td><td>9:30 am</td><td>to</td><td>6:30 pm</td></tr>
    <tr id="hours-Wednesday" class="hours-standardDay"><td>Wednesday</td><td>9:30 am</td><td>to</td><td>6:30 pm</td></tr>
    <tr id="hours-Thursday" class="hours-standardDay"><td>Thursday</td><td>9:30 am</td><td>to</td><td>6:30 pm</td></tr>
    <tr id="hours-Friday" class="hours-currentDay"><td>Friday</td><td>9:30 am</td><td>to</td><td>6:00 pm</td></tr>
    <tr id="hours-Saturday" class="hours-standardDay"><td>Saturday</td><td>10:00 am</td><td>to</td><td>4:00 pm</td></tr>
    <tr id="hours-Sunday" class="hours-standardDay"><td>Sunday</td><td>11:00 am</td><td>to</td><td>3:00 pm</td></tr>
    </table><p class="hourstext">The time is now 11:22pm. Sorry but we are currently closed.<br>We will be open on Saturday from 10:00am.</p><p class="hourstext">Tel: 01234 360036</p>
    <p class="hourstext">Hours may change on public holidays - please contact us prior to travelling</p>
  2. ergdegdeg Moderator emeritus


    Oct 13, 2007
    Well, you can probably use JavaScript or whatever server-side language you're using to detect the current day of the week and then give the corresponding line in the table a specific CSS class/ID with the desired styling. In your example, the current day's line has a class of "hours-currentDay", while the others have "hours-standardDay".

    Here's how you could do it in JavaScript:
  3. double t33 thread starter macrumors newbie

    Mar 3, 2011

Share This Page