how to implement this?

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

  1. macrumors newbie

    Joined:
    Mar 3, 2011
    Location:
    Bedford
    #1
    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

    http://www.hallmark-cars.co.uk/contactus#hours

    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. Moderator emeritus

    ergdegdeg

    Joined:
    Oct 13, 2007
    Location:
    Nebraska
    #2
    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: http://w3schools.com/jsref/jsref_getday.asp
     
  3. thread starter macrumors newbie

    Joined:
    Mar 3, 2011
    Location:
    Bedford
    #3
    Thank you very much, just what I needed! :D
     

Share This Page