Setting Webpages to alter at a set time
Discussion
Hello everyone, I'm rubbish with javascript, but I'm trying to learn it at the moment... I was wondering if anybody knew how you set something to change at a particular time of day.
What I'm after is a coloured circle on a page that will change colour at particular times of the day and will link to another website that will display news topics every 20 minutes, so basically the circle will change colour when a new story is released, it will be used as a way of alerting people to a news story by using colours, but this is just for testing purposes.
Any help would be great, and if you think that I should use something other than js, please say.
Cheers,
AL
What I'm after is a coloured circle on a page that will change colour at particular times of the day and will link to another website that will display news topics every 20 minutes, so basically the circle will change colour when a new story is released, it will be used as a way of alerting people to a news story by using colours, but this is just for testing purposes.
Any help would be great, and if you think that I should use something other than js, please say.
Cheers,
AL
Guess the real question is:
1. Do you want it to change every 20 minutes regardless? OR
2. Do you want it to change when there's a new news-story
(1) is trivial with a bit of JavaScript. Or a bit of server-side code (ASP/PHP/etc)
(2) will need some (most realistically server-side) code to read the target page and check for changes before serving up a web-page to the user to let them know about changes.
More detail?
1. Do you want it to change every 20 minutes regardless? OR
2. Do you want it to change when there's a new news-story
(1) is trivial with a bit of JavaScript. Or a bit of server-side code (ASP/PHP/etc)
(2) will need some (most realistically server-side) code to read the target page and check for changes before serving up a web-page to the user to let them know about changes.
More detail?
OK, well, the thing is, I want the circle to change colour every twenty minutes, so it'll be orange, then change to blue every twenty minutes for 5 minutes...
So it'll be blue orange for 15 minutes, then blue for 5, then orange for 15... etc.
And the circle will link to a news page which I'll be updating every twenty minutes, so the person viewing the page with the circle on will see it change to blue and then be able to view the new news story only when the circle's changed to blue... Will the code that you've given me do anyhting like that, or is it just set to refresh the page every twenty minutes from when the user's opened it?
Cheers again, and I'm sorry for dragging this out
AL
So it'll be blue orange for 15 minutes, then blue for 5, then orange for 15... etc.
And the circle will link to a news page which I'll be updating every twenty minutes, so the person viewing the page with the circle on will see it change to blue and then be able to view the new news story only when the circle's changed to blue... Will the code that you've given me do anyhting like that, or is it just set to refresh the page every twenty minutes from when the user's opened it?
Cheers again, and I'm sorry for dragging this out
AL
This scheme is all well and good. Has nobody noticed that if your browser navigates away from the page and then comes back to it, the user is going to go back to the beginning of the colour sequence.
If they only look at the page for a minute, then they'll only evr see the same colour.
If they only look at the page for a minute, then they'll only evr see the same colour.
Why not have two or three etc pages
=======blue.html======
<HTML>
<HEAD>
<TITLE>Title of your page</TITLE>
<body bgcolor="blue">
<meta http-equiv="Refresh" content="5; url=orange.html">
</HEAD>
<BODY>
</BODY>
I am blue for 5 seconds
</HTML>
======orange.html======
<HTML>
<HEAD>
<TITLE>Title of your page</TITLE>
<body bgcolor="orange">
<meta http-equiv="Refresh" content="15; url=blue.html">
</HEAD>
<BODY>
</BODY>
I am orange for 15 seconds
</HTML>
Same refresh code as above but after a pre-set time it changes the .HTML page - in this case a background of either blue/orange.
=======blue.html======
<HTML>
<HEAD>
<TITLE>Title of your page</TITLE>
<body bgcolor="blue">
<meta http-equiv="Refresh" content="5; url=orange.html">
</HEAD>
<BODY>
</BODY>
I am blue for 5 seconds
</HTML>
======orange.html======
<HTML>
<HEAD>
<TITLE>Title of your page</TITLE>
<body bgcolor="orange">
<meta http-equiv="Refresh" content="15; url=blue.html">
</HEAD>
<BODY>
</BODY>
I am orange for 15 seconds
</HTML>
Same refresh code as above but after a pre-set time it changes the .HTML page - in this case a background of either blue/orange.
Edited by morningside on Tuesday 10th April 19:25
That's a good idea, thanks, but I was thinking more along the lines of the js reading the user's system clock, because as this is remote and I want to try it with more than one person at a time, it's probably best that they're all running at the same time, in case somebody doesn't open the site until 4 or 5 minutes into the test.... Then their site would be behind everyone else's.
Cheers again for all the help,
AL
Cheers again for all the help,
AL
I'm sure there are many ways to do this, but if you have CGI, just serve up a page from on the server which is dynamically generated on the basis of system time at the server.
If you can run an application on the server, just write an app which regenerates a page on the server every 20mins. That way you don't even need CGI. Just put an html refresh into the page.
If you can run an application on the server, just write an app which regenerates a page on the server every 20mins. That way you don't even need CGI. Just put an html refresh into the page.
Read about AJAX - it's JavaScript that allows you to 'silently/transparently/without-the-user-knowing' contact the server and ask for a URL without reloading the whole page again.
When the contents of the URL are returned you can insert them into a DIV or modify any other page element that you can address from JavaScript (i.e. anything and everything).
If you combine AJAX with a bit of PHP and SQL then you start to be able to create some extremely cool/slick/powerful web applications.
For example (and very simply put - the app is considerably more complex than this), I'm working on a Web App that retrieves live information from a database. I run an AJAX call to a PHP page every few seconds, the PHP queries the DB to find out if any new events are present in the DB. If there are new events the DB returns the HTML to present the new events. This HTML is then added to the innerHTML of an existing DIV.
The user never sees a page refresh, yet the content of the page in front of them is changing as and when new information is available.
HTH
best
Ex
When the contents of the URL are returned you can insert them into a DIV or modify any other page element that you can address from JavaScript (i.e. anything and everything).
If you combine AJAX with a bit of PHP and SQL then you start to be able to create some extremely cool/slick/powerful web applications.
For example (and very simply put - the app is considerably more complex than this), I'm working on a Web App that retrieves live information from a database. I run an AJAX call to a PHP page every few seconds, the PHP queries the DB to find out if any new events are present in the DB. If there are new events the DB returns the HTML to present the new events. This HTML is then added to the innerHTML of an existing DIV.
The user never sees a page refresh, yet the content of the page in front of them is changing as and when new information is available.
HTH
best
Ex
AL666 said:
Actually, just thinking about it.... Couldn't I set the webpage (with the circle on) to refresh every 20 seconds and then when I upload a news story, I can also upload the page with the circle on, again, but with a different-coloured circle...
Would that work?
Would that work?
Yes, if combined with a meta-refresh say every minute or so.
Make sure you change the HTML to point to a new GIF file rather than switching the image, or there's a chance it'll cache the old one.
J_S_G said:
AL666 said:
Actually, just thinking about it.... Couldn't I set the webpage (with the circle on) to refresh every 20 seconds and then when I upload a news story, I can also upload the page with the circle on, again, but with a different-coloured circle...
Would that work?
Would that work?
Yes, if combined with a meta-refresh say every minute or so.
Make sure you change the HTML to point to a new GIF file rather than switching the image, or there's a chance it'll cache the old one.
Thanks, that's what I wanted to hear, will the refreshing every minute make the screen visibly refresh, or will it only change if I alter the content?
Cheers again,
AL
AL666 said:
J_S_G said:
AL666 said:
Actually, just thinking about it.... Couldn't I set the webpage (with the circle on) to refresh every 20 seconds and then when I upload a news story, I can also upload the page with the circle on, again, but with a different-coloured circle...
Would that work?
Would that work?
Yes, if combined with a meta-refresh say every minute or so.
Make sure you change the HTML to point to a new GIF file rather than switching the image, or there's a chance it'll cache the old one.
Thanks, that's what I wanted to hear, will the refreshing every minute make the screen visibly refresh, or will it only change if I alter the content?
In IE6, it'll "flicker" very quickly (assuming they're on broadband). In Firefox it shouldn't. Can't remember in IE7.
J_S_G said:
TheExcession said:
Read about AJAX - it's JavaScript that allows you to 'silently/transparently/without-the-user-knowing' contact the server and ask for a URL without reloading the whole page again.
...
...
That's an exceptionally complicated way of achieving this!
I wouldn't say it's complicated, I'd suggest it is the correct way to do it.
With Java Script you can change the URL of the image to be downloaded, stick that as the inner HTML of a DIV and Bob's your unlce's monkey.
It has a lot of benefits, primarily that the whole page doesn't get reloaded. Additionally the OP said that he was trying to learn JavaScript. It took me about 10 minutes to get AJAX working on some of my pages, to the degree where by I'll be using this technology as often as possible. Once you get the example code working, it's piece of piss.
Just my opinion of course.
Hey, thanks for the new reply. I solved this simply, for testing, by creating a page with a blue circle on with a meta-refresh of 5 seconds. Then when I wanted to let the user see a new news story I set the page to redirect to one of 15 pages with a different-coloured pulsing circle on, which then let the user click on it to be sent to the location of the news story.
I set a redirect time of 3 minutes on the page with the pulsing circle on and set the news story to open in a new tab, so when the user had finished reading the story and closed it, the pulsing circle would still be there for a temporary time and would then redirect to the index (blue circle), thus making the story inaccessible again (unless they decided to work our the URLs, which wasn't a problem).
Cheers again, all is well,
AL
I set a redirect time of 3 minutes on the page with the pulsing circle on and set the news story to open in a new tab, so when the user had finished reading the story and closed it, the pulsing circle would still be there for a temporary time and would then redirect to the index (blue circle), thus making the story inaccessible again (unless they decided to work our the URLs, which wasn't a problem).
Cheers again, all is well,
AL
AL666 said:
Hey, thanks for the new reply. I solved this simply, for testing, by creating a page with a blue circle on with a meta-refresh of 5 seconds. Then when I wanted to let the user see a new news story I set the page to redirect to one of 15 pages with a different-coloured pulsing circle on, which then let the user click on it to be sent to the location of the news story.
I set a redirect time of 3 minutes on the page with the pulsing circle on and set the news story to open in a new tab, so when the user had finished reading the story and closed it, the pulsing circle would still be there for a temporary time and would then redirect to the index (blue circle), thus making the story inaccessible again (unless they decided to work our the URLs, which wasn't a problem).
Cheers again, all is well,
AL
I set a redirect time of 3 minutes on the page with the pulsing circle on and set the news story to open in a new tab, so when the user had finished reading the story and closed it, the pulsing circle would still be there for a temporary time and would then redirect to the index (blue circle), thus making the story inaccessible again (unless they decided to work our the URLs, which wasn't a problem).
Cheers again, all is well,
AL
Glad you've sorted it, but are you really sure you want to do this - firing users off to different pages that they havent requested is hardly good usability. Surely better to use the pulsing circle device to highlight new content and encourage the user to click through, rather than dictate their journey?
Gassing Station | Computers, Gadgets & Stuff | Top of Page | What's New | My Stuff