cedric Posted May 19, 2009 Share Posted May 19, 2009 Hi,I have a list of openinghours of a shop on a site.Now I would like to change the css of one <td> depending on the day of the week.Is that possible and if so could anyone tell me how?? Link to comment Share on other sites More sharing options...
jlhaslip Posted May 19, 2009 Share Posted May 19, 2009 You will need some Server Side Scripting to do that.I use php to create a different Background image on this page, depending on the time of day (relative to the Server time).http://www.jlhaslip.trap17.com/samples/misc/time.phpUnless the javascript guys can come up with another method? Link to comment Share on other sites More sharing options...
cedric Posted May 19, 2009 Author Share Posted May 19, 2009 could you give me the php then please? Link to comment Share on other sites More sharing options...
justsomeguy Posted May 19, 2009 Share Posted May 19, 2009 You can use a Javascript date object to figure out which day of the week is it, or which day of the month. var dateobj = new Date();var wday = dateobj.getDay();var mday = dateobj.getDate();switch (wday){ case 0: alert("Sunday"); break; case 1: alert("Monday"); break; case 2: alert("Tuesday"); break; case 3: alert("Wednesday"); break; case 4: alert("Thursday"); break; case 5: alert("Friday"); break; case 6: alert("Saturday"); break;}alert("It is the " + mday + " day of the month"); Link to comment Share on other sites More sharing options...
cedric Posted May 19, 2009 Author Share Posted May 19, 2009 I'm sorry but how can I use the script to change the background-color of something? Link to comment Share on other sites More sharing options...
jlhaslip Posted May 19, 2009 Share Posted May 19, 2009 could you give me the php then please? <?php$hour = date('H');if ($hour < 12 ) { $image = "morning.png";}elseif ($hour < 17 ) { $image = "day.png";}else { $image = "night.png";}$image = imagecreatefrompng( "$image" );if (!$image) { /* See if it failed */ header("Content-type: image/png"); $im = imagecreatetruecolor (150, 30); /* Create a blank image */ $bgc = imagecolorallocate ($im, 255, 255, 200); $tc = imagecolorallocate ($im, 0, 0, 0); imagefilledrectangle ($im, 0, 0, 150, 30, $bgc); /* Output an errmsg */ imagestring ($im, 1, 5, 5, "Error loading Image", $tc); imagepng($im); imagedestroy($im); die(); }header("Content-type: image/png");imagepng($image);imagedestroy($image);?> Save this code as "image.php" and use it as the background image for that table cell.Adjust the times as per your server time, and have the base Images available to be written. Link to comment Share on other sites More sharing options...
chibineku Posted May 19, 2009 Share Posted May 19, 2009 There are two ways that spring immediately to mind:One is to alter the background-img property of the element, the other is to change the class that the element belongs to and have one defined for each day of the week.For the first: <html></head><script type="text/javascript">var img = new Array()img[monday] = [i]imagepath1[/i]img[tuesday]= [i]imagepath2[/i]...function setBG() {var today = new Date()document.getElementById("change").backgroundImg="url("+img[today]+")"}</script></head><body><table><tr><td id="change">Content</td>.... Second way: <html></head><script type="text/javascript">function setBG() {var today = new Date()document.getElementById("change").class=today}</script><style type="text/css">.monday {background-image:url("[i]imagepath1[/i]")}.tuesday {background-image:url("[i]imagepath2[/i]")}...</style></head><body><table><tr><td id="change">Content</td>.... Ha, guess it took me a while to type that...no one had replied when I started. Link to comment Share on other sites More sharing options...
justsomeguy Posted May 19, 2009 Share Posted May 19, 2009 One easy way to do it with Javascript is to give your days IDs that coincide with the weekday value from the date object, and then use that to change the color. ...<td id="day0">Sun</td><td id="day1">Mon</td><td id="day2">Tue</td><td id="day3">Wed</td><td id="day4">Thu</td><td id="day5">Fri</td><td id="day6">Sat</td>...<script type="text/javascript">var dateobj = new Date();var wday = dateobj.getDay();document.getElementById("day" + wday).style.backgroundColor = "red";</script> Link to comment Share on other sites More sharing options...
cedric Posted May 19, 2009 Author Share Posted May 19, 2009 thanks a lot for all the fast answers.I think I will make it easy for myself and take the last one. I think it's greatthat you guys come up with does codes like it's nothing, I hope I'll be able to later aswell.See you later Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.