how to implement this?

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

Most Liked Posts
  1. double t33, Jan 28, 2012

    double t33 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>
     
    share
    + Quote Reply
  2. ergdegdeg, Jan 28, 2012

    ergdegdeg Moderator emeritus

    ergdegdeg

    Joined:
    Oct 13, 2007
    #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
     
    share
    + Quote Reply
  3. double t33, Jan 28, 2012

    double t33 thread starter macrumors newbie

    Joined:
    Mar 3, 2011
    Location:
    Bedford
    #3
    Thank you very much, just what I needed! :D
     
    share
    + Quote Reply
(You must log in or sign up to post here.)

Share This Page