...

View Full Version : timed images?



happypanda
06-19-2008, 09:35 PM
is it possible to have an image appear for a certain number of hours and then just disappear on its own?

can it be done with javascript or do I have to use some other language?

Nile
06-20-2008, 01:21 AM
The script below will display an image only when the hours are between 10-20:


<html>
<head>
<script type="text/javascript">
function disapearImg(){
var dispT;
var date = new Date();
var hours = date.getHours();
switch(hours){
case 10,11,12,13,14,15,16,17,18,19,20:
dispT = "<img src='http://codingforums.com/img/logo.gif' />";
break;
default:
dispT = "";
break;
}
document.getElementById('imgDisplay').innerHTML=dispT;
setTimeout("disapearImg",5000);
}
</script>
<title>Disapearing Image</title>
</head>
<body onLoad="disapearImg()">
<div id="imgDisplay"></div>
</body>
</html>

In the blue change the hours, separate them by commas, and in the red put your image location.
I hope this works, Nile. :D

Philip M
06-20-2008, 09:01 AM
No, it does not work!

Try this:-


<html>
<head>
<script type = "text/javascript">
function disappearImg() {
var now = new Date();
var hours = now.getHours();
if (hours > 9 && hours < 21) { // show image between 10 and 20 hours incl.
var dispT = "<img src='http://codingforums.com/img/logo.gif'>";
}
else {
var dispT = "";
}
document.getElementById('imgDisplay').innerHTML = dispT;
setTimeout("disappearImg", 10000); // check hour value every 10 seconds}

</script>
</head>

<body onLoad="disappearImg()">
<div id="imgDisplay"></div>

</body>
</html>

To make it clear, the image will appear if the page is loaded between 1000 and 2059, or if loaded before that time when the hour reaches 1000, and will disappear when the hour reaches 2100. If the 'appear' and 'disappear' feature is not wanted, then delete the line in red.


All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

Nile
06-20-2008, 02:20 PM
My script defendantly works. You need to specify what hours, so when you ran my script it may have not been an this hour. Your is just shorter because your saying if its less then or greater then. With mine you can put like: 1,3,5,7,8,9,14.

Philip M
06-20-2008, 04:23 PM
My script defendantly works. You need to specify what hours, so when you ran my script it may have not been an this hour. Your is just shorter because your saying if its less then or greater then. With mine you can put like: 1,3,5,7,8,9,14.

Sorry, it does not work. I have tested it thoroughly at 16 hours (and other times). In fact it only works when the hour is 20, that is the last in your list. You can easily test it for yourself.

See http://www.javascriptkit.com/javatutors/switch.shtml

I have never seen anywhere that the case statement can be used as you suggest:-

switch(hours){
case 10,11,12,13,14,15,16,17,18,19,20:

Nile
06-20-2008, 06:55 PM
Hmm, well it worked perfectly for me.

Philip M
06-20-2008, 07:06 PM
Hmm, well it worked perfectly for me.

In which browser?

The case clause within a switch statement specifies one of the values that the switch statement can evaluate to. If the switch statement evaluates to this particular case value then the statements following the case label will be run. It is important to use "break" after each case - this prevents the code from running into the next case. This is what is happening here - so only the final value 20 is recognised.

The following code is valid:-

switch(hours) {
case 10:
case 11:
case 12:
case 13:
case 14:
case 15:
case 16:
case 17:
case 18:
case 19:
case 20:
dispT = "<img src='http://codingforums.com/img/logo.gif' />";
break;

but that is just a long-winded way of saying:-

if (hours > 9 && hours < 21) { // show image between 10 and 20 hours incl.
var dispT = "<img src='http://codingforums.com/img/logo.gif'>";

The code using the switch statement would perhaps be more useful if the image was to show only at (say) 1,4,5,7,12,16,19 and 20 hours.

happypanda
06-22-2008, 07:13 PM
so if I want to add several images that disappear after different amounts of hours, I would have to add the script in the <head> for each image?

Philip M
06-22-2008, 07:24 PM
Yes, but you cannot have multiple scripts with the same function or variable names, as the second will over-write the first.

You will have to rename the functions disappearImg1(), disappearImg2(), and so on, and the variables hours1, hours2, dispT1, dispT2 and so on.

Trinithis
06-22-2008, 07:27 PM
For the record, the following IS legal javascript code:


switch(foo) {
case 10,11,12,13,14,15,16,17,18,19,20:
bar();
}


It's just perhaps a bit deceiving if you don't know much about the comma operator: http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Operators:Special_Operators:Comma_Operator
In all, the given code should only match case 20.

happypanda
06-22-2008, 07:29 PM
would I have to change anything if I just want it to happen for 1 specific date?

Philip M
06-22-2008, 07:35 PM
For the record, the following IS legal javascript code:


switch(foo) {
case 10,11,12,13,14,15,16,17,18,19,20:
bar();
}


It's just perhaps a bit deceiving if you don't know much about the comma operator: http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Operators:Special_Operators:Comma_Operator
In all, the given code should only match case 20.

I am sure you are right, but Nile's code did not work for me in IE6. It only showed the image when the hour was 20, that is the last number in the list. Yours does that as well. It may be "valid" code in a syntactical sense but it seems utterly pointless and fails to achieve what the OP wanted.

Trinithis
06-22-2008, 07:38 PM
. . . which is the expected behavior. Nile, what browser and browser version are you using?

The only good use for the comma operator I have seen/used is within the header of a for loop. Only once have I used it elsewhere, and that was in the header of a while loop.

Philip M
06-22-2008, 08:09 PM
would I have to change anything if I just want it to happen for 1 specific date?

That is somewhat different from what I understood your requirement to be. The above script shows the image each day at or between certain hours. If you want to show an image once only, to expire at a certain day/time, then:-


<html>
<head>
<script type="text/javascript">
function disappearImg() {
var dispT;
var now = new Date(); // current date and time
var yr = now.getFullYear();
var mn = now.getMonth();
var dy = now.getDate()
var hr = now.getHours();

var expiresyr = 2008;
var expiresmn = 5; // months 0 - 11
var expiresdy = 22;
var expireshr = 23; // expires 22/06/2008 at 2300

if ((yr <= expiresyr) && (mn <= expiresmn) && (dy <= expiresdy) && (hr < expireshr)) {
dispT = "<img src='http://codingforums.com/img/logo.gif' />";
}
else {
dispT = "";
}
document.getElementById('imgDisplay').innerHTML = dispT;
setTimeout("disappearImg",10000);
}
</script>

</head>

<body onLoad="disappearImg()">
<div id="imgDisplay"></div>

</body>
</html>

111,111,111 x 111,111,111 = 12,345,678,987,654,321

happypanda
06-22-2008, 08:20 PM
great thanks!!

happypanda
06-24-2008, 12:01 AM
how would I add minutes to it?

Philip M
06-24-2008, 07:07 AM
You should be able to work that out for yourself! :)

var mns = now.getMinutes();

var expiresmns = 30; //or whatever

if ((yr <= expiresyr) && (mn <= expiresmn) && (dy <= expiresdy) && (hr <= expireshr) && (mns < expiresmns)) {


Quizmaster: Which of the three British armed forces is known as "the senior service"?
Contestant: The SS.

Philip M
06-28-2008, 07:37 PM
The following corrects a bug in the previous code (only works if expiry date is in current month) :(


<html>
<head>
<script type="text/javascript">

function disappearImg(){
var dispT;
var now = new Date();
var yr = now.getFullYear();
var mn = now.getMonth();
var dy = now.getDate()
var hr = now.getHours();

var expiresyr = 2008;
var expiresmn = 6; // months 0 - 11
var expiresdy = 28;
var expireshr = 23;
var show = 0;

if (yr < expiresyr) {
show = 1;
}
if ((yr == expiresyr) && (mn < expiresmn)) {
show = 1;
}
if ((yr == expiresyr) && (mn == expiresmn) && (dy < expiresdy)) {
show = 1;
}
if ((yr == expiresyr) && (mn == expiresmn) && (dy == expiresdy) && (hr < expireshr)) {
show = 2;
}

if (show >= 1) {
dispT = "<img src='http://codingforums.com/img/logo.gif'>";
}
else {
dispT = "";
}

document.getElementById('imgDisplay').innerHTML = dispT;
if (show == 2) {
setTimeout("disappearImg",10000); // check every 10 seconds on expiry day until expiry time reached
}
}

</script>

</head>

<body onLoad="disappearImg()">
<div id="imgDisplay"></div>

</body>
</html>

happypanda
07-07-2008, 02:20 AM
do you mean the fixed one only works if the expiry date is within the month or the old one?

I can't get it to work if I want to use the script for multiple images... i added a 2 after everything...

Philip M
07-07-2008, 07:15 AM
do you mean the fixed one only works if the expiry date is within the month or the old one?


No, I mean what I said. You should use the modified script rather than the first one.

You cannot have multiple javascripts on the same page with duplicated names of functions or variables as the second overwrites the first.

You can overcome this by adding a "2" suffix to ALL variable and function names.

How are you calling your scripts? You should use:-

<body onload = "disappearImg(); disappearImg2(); disappearImg3()... " and so on.

happypanda
07-07-2008, 10:48 PM
is there anything wrong here?

<script type="text/javascript">

function disappearImg2(){
var dispT2;
var now2 = new Date();
var yr2 = now.getFullYear();
var mn2 = now.getMonth();
var dy2 = now.getDate()
var hr2 = now.getHours();
var mns2 = now.getMinutes();

var expiresyr2 = 2008;
var expiresmn2 = 6; // months 0 - 11
var expiresdy2 = 7;
var expireshr2 = 20;
var expiresmns2 = 41; //or whatever

var show2 = 0;

happypanda
07-07-2008, 10:52 PM
if (show2 >= 1) {
dispT2 = "<a href='http://www.aol.com><img src='http://images.gif'></a>";
}
else {
dispT2 = "";
}

document.getElementById('imgDisplay2').innerHTML = dispT2;
if (show2 == 2) {
setTimeout("disappearImg2",10000); // check every 10 seconds on expiry day until expiry time reached
}
}

</script>

<body onLoad="disappearImg(); disappearImg2();">
<div id="imgDisplay"></div>
<div id="imgDisplay2"></div>

happypanda
07-10-2008, 10:15 PM
do I have to edit anywhere else to make it work with a second image on the same page?

Philip M
07-11-2008, 08:35 AM
Well, one way to find out would be to try it.

This is not valid:
dispT2 = "<a href='http://www.aol.com><img src='http://images.gif'></a>";

The correct syntax is:-
dispT = "<img src='http://codingforums.com/img/logo.gif'>";
or
dispT = "<img src='http://www.aol.com/images.gif'>";
although tht does not appear to be a valid link.

happypanda
07-12-2008, 10:17 PM
oh so you can't turn the image into a link?

happypanda
07-12-2008, 10:23 PM
I tried it...but only the first image showed up and the link thing worked...

happypanda
07-16-2008, 10:09 PM
am I doing the body part right?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum