Jump to content

Change Background By Day


cedric
 Share

Recommended Posts

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

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

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

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

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.

Edited by chibineku
Link to comment
Share on other sites

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

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...