PDA

View Full Version : Changing a background depending on time


Twallis1
04-21-2008, 04:24 PM
Hi There

I am currently creating a web site for a University project and have come up with a web page that I would like to change depending on the time of day. I have created images for each time of day, dawn, day, dusk and night.

I know the basics of how this should work, i.e. each image will need to be called from it's location and parameters have to be set for how long they show (9-5, 6-12 etc), however I am not sure how this can all be put together to get the result I am after.

If any body can point me in the right direction I would appreciate it.

Regards
Tremayne

pete
04-21-2008, 04:54 PM
I have already done this in your other thread but I get the impression you just pasted it in DW and thats it!
Solution below, just add images and change times, ask if you don't understand parts of the page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="EN">
<head>
<title>demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
var timeScript = {
hour:new Date().getHours(),
getHour:function(){
return this.hour;
},
showImage:function(){
var h = this.getHour();
if(h>=13 && h<=17){
document.getElementById('t').className = 'afternoon';
} else if(h>=9 && h<=12){
document.getElementById('t').className = 'morning';
}
}
}
window.onload = function(){
timeScript.showImage();
}
</script>

<style type="text/css">
<!--
body {
font-family:arial,verdana, sans-serif;
}
#t {
margin:20px auto 20px auto;
width:350px;
height:200px;
}
.afternoon {
background-image:url(afternoon.jpg);
}
.morning {
background-image:url(morning.jpg);
}
-->
</style>
</head>
<body>
<div id="t"></div>
</body>
</html>

Twallis1
04-21-2008, 06:49 PM
Hi

No actually, I wasn't dumb enough to just paste it in, it made me laugh that you thought that. The reason I re-posted was that I couldn't find the revised code that I wrote the other night so I was just looking at alternatives really.

I managed to get one image to show but I couldn't align it correctly and it seemed very tempremental with regards to where the image would show when previewing in a browser, I tried both Firefox and IE for this.

I'll give the code you've given me another go, luckily enough I should be able to fit it to my needs now I've spent abit of time with coding, i'll get back to you.

Thanks again!

pete
04-21-2008, 07:24 PM
I managed to get one image to show but I couldn't align it correctly and it seemed very tempremental with regards to where the image would show when previewing in a browser, I tried both Firefox and IE for this.


Any alignment problems will be the CSS and not the JS, assign a classname and then set your CSS background properties. If you post a link to your example I'll take a look if you are still stuck.