PDA

View Full Version : Changing a web page using a clock


Twallis1
04-09-2008, 02:37 PM
Hi There

I have designed a web page that has graphics I would like to change automatically according to the time of day.

Does any body know how this is done? Or can any body direct me to a tutorial that might be able to help me?

Thanks and Regards
Tremayne Wallis

pete
04-09-2008, 02:41 PM
You will need to get the time in either JS or PHP/ASP/CF and then create an if statement, something like this in pseudo code

if(hour >12) { // after midday
show image 1
} else {
show image 2
}

Do you know any JS? Does your server run PHP? What language would you prefer to do this in?

Twallis1
04-09-2008, 02:45 PM
it's just a concept web site for a University project at the moment so not running it on a server. I will probably hand it in so it runs on a disc.

I have designed the graphics though, it's just coding isn't my domain really, however I have done some basic HTML before with previous web sites I have made and I don't find this stuff hard to pick up.

pete
04-09-2008, 02:56 PM
In javascript which will run in any browser you could do this:


<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){
alert('it is between 1pm and 5pm');
} else if(h>=9 && h<=12){
alert('it is between 9am and 12pm');
}
}
}
window.onload = function(){
timeScript.showImage();
}
</script>
run that in your browser you can of course add any number of if statements to determine a time period. Where I have alerts you could have code to change an images src, (document.images['imagename'].src = '') but you should be able to get the idea.

Twallis1
04-09-2008, 02:59 PM
Okay, excellent, I'll give that a go tonight and report back.

Thanks!!!

Twallis1
04-21-2008, 05:12 PM
Hi

Thanks for the help before. I tried the code you gave me and it didn't seem to have an effect.

I am wondering, each time an image is called in the code you gave me does it need to be set as a background and aligned? I am thinking that perhaps the images are not showing because Dreamweaver doesn't know what to do with the images due to the code not stating that the images should be set as a background, or should it just show the images?

Any help will be appreciated. I'm getting the hang of what I need to do but still need help getting over some of the hurdles.

Thanks
Tremayne

pete
04-21-2008, 05:29 PM
Please paste in the code you are using. I am not sure why you mentioned DW, DW is not a browser, view the page in a browser.

Rob_Che
04-24-2008, 09:54 PM
I'm very interested in the outcome of this...
Post where you're upto... let's get it going !

Rob

Twallis1
05-02-2008, 03:01 PM
cool ok, will do!! I'll give it a go this afternoon, I haven't really had a chance to try out Pete's suggestion as I've been working on another design project.

I'll see how far I can get tonight though and let you know how it's going.

Twallis1
05-03-2008, 04:28 PM
Hello Again

I wondered if I have got this right,

showImage:function(){
var h = this.getHour();
if(h>=13 && h<=17){
(document.images['SkylineDay.jpg'].src = 'day');
} else if(h>=9 && h<=12){
document.getElementById('t').className = 'morning';

So - I want to show image 'SkylineDay.jpg' between, say, 13 and 17hrs.

I've put in the name of the image I have created as the source. I tried this in Javascript but I was not able to view it in either Browser on my PC.

pete
05-03-2008, 04:38 PM
Hello Again

I wondered if I have got this right,

showImage:function(){
var h = this.getHour();
if(h>=13 && h<=17){
(document.images['SkylineDay.jpg'].src = 'day');
} else if(h>=9 && h<=12){
document.getElementById('t').className = 'morning';

So - I want to show image 'SkylineDay.jpg' between, say, 13 and 17hrs.

I've put in the name of the image I have created as the source. I tried this in Javascript but I was not able to view it in either Browser on my PC, I also trued it as HTML and I got no image in the browser. I understand the code you gave me, so that's not an issue, I just don't understand why this doesn't work. Unless I have left something un-edited, which is likely.

Post the page, what is this?

(document.images['SkylineDay.jpg'].src = 'day');

document.images is a collection/array, the name would be like this

<img src="SkylineDay.jpg" name="myimage" />
the you would do the following:


document.images['myimage'].src = 'newimage.jpg');src is the image source file so unless you have an image on the server called day with no extension it won't work, I suspect you have it the wrong way around, perhaps you mean:
document.images['day'].src = 'SkylineDay.jpg';

Twallis1
05-04-2008, 11:42 AM
Please see what I have done below, this is the full code for the page I am trying to create. You are correct, I had got the SRC code the wrong way around. Still no joy though.


<!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>=8 && h<=17){
(document.images['day'].src = 'images/SkylineDay.jpg');
} else if(h>=18 && h<=21){
(document.images['dusk'].src = 'images/SkylineDusk.jpg');
} else if(h>=22 && h<=4){
(document.images['night'].src = 'images/SkylineNight.jpg');
} else if(h>=5 && h<=7){
(document.images['dawn'].src = 'images/SkylineDawn.jpg');
}
}
window.onload = function(){
timeScript.showImage();
}
</script>
</head>
<body>
</body>
</html>

pete
05-04-2008, 11:51 AM
Please see what I have done below, this is the full code for the page I am trying to create. You are correct, I had got the SRC code the wrong way around. Still no joy though.

Upload a zip of the images and the HTML page. You don't even have an image in the HTML, yet you have references to four separate images. You are using document.images without understanding what it is or what it does. You need to understand the code you wrote otherwise you will end up getting very frustrated.

Twallis1
05-04-2008, 11:57 AM
I thought that putting the image in as a source (src) would show the image!?

pete
05-04-2008, 12:01 PM
I thought that putting the image in as a source (src) would show the image!?

How can it show an image when your HTML is this:

</head>
<body>
</body>
</html>

I have already explained this earlier, to use document.images you are referencing an image name and changing its source (src) on the page, with nothing in the <body> </body> tags there are no images, so document.images['dusk'] doesn't exist, and document.images.length , eg the number of images on the page will return 0.

Zip your images and attach them here, I'm not running around the web looking for images, I'll happily do the script for you to learn from if you post the images.

Twallis1
05-04-2008, 12:06 PM
Right, i've attached one file, the 4 images are too big to uplaod at once in a zip due to this forum's file size limit. That doesnt matter though so lets just concentrate on getting one image to show first, then I can go away and get the rest to follow suit.

pete
05-04-2008, 12:44 PM
You have attached a very large image so I'm confused as to whether you want it to display as an inline image or a background image!!???

Anyway here is a live working demo for you to munch your way through

http://69.5.28.129/timeofday.htm

rather than changing your computer clock to test you can over-ride the default JS hours by appending a time to the location.search property, so to simulate night do http://69.5.28.129/timeofday.htm?3 eg 3am and for evening http://69.5.28.129/timeofday.htm?19 eg 7pm etc

I have also set the document.title eg <title> tag to show the image file name. Since you didn't add an image in the HTML I have used script to create and append the image. You could do so much more with this like set a timer to check the time so even if a user is on the same page and doesn't reload the image will change automatically, hence the provision for this with checking for document.images['tx'] and removing the child.

There is now more than enough here for you to work with for your own script. If you want to use CSS background images then look at my previous example in the other thread.

Twallis1
05-04-2008, 01:03 PM
Yeah I do want my image to be a background, thats the whole point of this excersize. It's going to be the opening page of my web site and I've made 4 different images in Photoshop with the intention of learning how to have each image show within it's own time band. The thing is I'm way better at at photoshop then I am with script writing, hence being a total doughnut in this thread.

pete
05-04-2008, 01:06 PM
Yeah I do want my image to be a background..

What did you use document.images for then??!!! ... arrggghhh

Right, upload your four images and post the urls so I can download them and I'll do a CSS background script for you, I assume you have web space?

pete
05-04-2008, 01:12 PM
Same script but setting image as background via CSS

http://69.5.28.129/timeofday_css.htm

Twallis1
05-04-2008, 01:23 PM
erm... because you told me to!
I came onto this forum and made it clear that I am new to coding and needed help.

pete
05-04-2008, 01:35 PM
erm... because you told me to!
I came onto this forum and made it clear that I am new to coding and needed help.

No, I explained at the start of this thread that you can change an images src, the initial script I posted used alerts as an example of getting the time of day. I have since replied to every reply from you, I have set up two scripts, one using the method of adding images to the document, see here:

http://69.5.28.129/timeofday.htm (http://69.5.28.129/timeofday_css.htm)

and a new version for using CSS background images, see here

http://69.5.28.129/timeofday_css.htm

I have also created code to allow you to simulate a different time of day rather than messing with your system clock. I have also clearly stated if you upload the images I will do the script for you, although it should be easy to modify this http://69.5.28.129/timeofday_css.htm script because that is exactly what you want apart from different images.

I think it would be fair to say I have tried to help you considerably.

Twallis1
05-04-2008, 01:45 PM
yes you have made a considerable effort which I am greatful for. However, I have no clue about coding and some of your replies have been confused me, which has lead to an unusual tone in your replies with a degree of impateince which has not been helpful. For instance, you give me these links above... but I have no idea to how to find the code, I think at times you may think you are teaching some one who already knows what you are doing.
Thankyou though for the efforts, I'm just trying to jusify my confusion to you without sounding like I am ungreatful.

Twallis1
05-04-2008, 01:46 PM
scratch part of that, I remembered I have to go to 'view source'.
I'll see what I can do with that.

pete
05-04-2008, 01:49 PM
yes you have made a considerable effort which I am greatful for. However, I have no clue about coding and some of your replies have been confused me, which has lead to an unusual tone in your replies with a degree of impateince which has not been helpful. For instance, you give me these links above... but I have no idea to how to find the code, I think at times you may think you are teaching some one who already knows what you are doing.
Thankyou though for the efforts, I'm just trying to jusify my confusion to you without sounding like I am ungreatful.

To find the code you look in the source, in your browser select View -> Source but I have also attached the files here.

If you upload the four images you want to work with I will do the script for you.

Twallis1
05-04-2008, 01:57 PM
I can't upload any of my images. I can only upload 28kb according to the uplaod window which is irritating for obviosu reasons.

Any way, I dont think I need to upload the images, surely this is just the variable. I understand the code you have given me. I can see that it's using images you've saved on your PC (the image names are there), so surely really all I need to do is put in my image names. I can't see the difference and don't understand why it doesnt preview anything when I put my image names in.

pete
05-04-2008, 02:03 PM
I can't upload any of my images. I can only upload 28kb according to the uplaod window which is irritating for obviosu reasons.

Any way, I dont think I need to upload the images, surely this is just the variable. I understand the code you have given me. I can see that it's using images you've saved on your PC (the image names are there), so surely really all I need to do is put in my image names. I can't see the difference and don't understand why it doesnt preview anything when I put my image names in.

Upload to my web space, I have PM'ed you FTP details

Twallis1
05-04-2008, 02:09 PM
PM'ed, FTP, your webspace?

pete
05-04-2008, 02:18 PM
PM'ed, FTP, your webspace?

PM'ed = sent you a private message in this board

FTP - file transfer protocol , the method for transferring data/files between two servers (server - a computer that holds your files)

Web Space - the place files are stored so people can view them on the internet

I must get on with other stuff, I am bowing out of this thread because I don't think I am a very good teacher, I am sure DavidJ or domedia can do a better job. I have always said if the student fails to learn then the teacher is the one who has failed, I admit defeat!

I wish you all the best with your project.

Twallis1
05-04-2008, 02:26 PM
Fair enough. I think you've given me alot of information and that's been the issue, it sounds abit odd but with a new starter a teacher would normally start with the basics, I know becuase I have written photoshop tutuorials. I mean, looking back on what you have given me, you basically gave me a code and advised me to stick my image names in there. That never worked so I'm not sure what has really happened on this thread, thanks for making an effort though.

domedia
05-04-2008, 04:29 PM
Hi Twallis, just read thought this thread. It might be that what you're asking at this point requires a little deeper knowledge of HTML/CSS/JS. It doesn't mean it's impossible though. There's literally thousands of tutorials on how webpages work.

A really good book in getting to know JS from scratch is 'SImply Javascript" from Sitepoint.

Twallis1
05-04-2008, 04:42 PM
Hi There

Funny you should say that. After my last post I got talking to one of my mates and he pointed out that I hadn't pointed the script to the correct file, in which my images where in. I changed this and it works!! Yay.

I'm just trying to figure out how to centre the image now.

domedia
05-04-2008, 07:24 PM
Excellent :)

Centering the image shouldn't be too hard. Could you put your page somewhere temporarily on thew web?

Twallis1
05-04-2008, 07:40 PM
i can't i'm afraid. I haven't any web space. I'm working on that though, but first I just want to get it working.

Rob_Che
05-04-2008, 08:14 PM
That's awesome.. I know nothing about Javascript... that's great.

Witchcraft... but great ;)

pete
05-05-2008, 03:27 PM
I'm just trying to figure out how to centre the image now.

change line 31

document.body.style.background= "url('"+this.path+arguments[0]+"') no-repeat";
to

document.body.style.background= "url('"+this.path+arguments[0]+"') no-repeat center 0px";to create top margin change 0px to whatever such as 5px