PDA

View Full Version : how to implement this?




double t33
Jan 28, 2012, 04:28 PM
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>



ergdegdeg
Jan 28, 2012, 04:33 PM
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

double t33
Jan 28, 2012, 04:37 PM
Thank you very much, just what I needed! :D