How to make an image appear after 10 minutes using javascript?

Question

Im trying to make a script in which an image appears for the user after 10 minutes. Think of it as a timer. And once the timer reaches 0, an image appears. Im pretty new to javascript, so I really have no idea where to start. Does anyone know of a script which will do the job, or maybe point me in the right direction? Thanks.

Please don't. I don't want my web interfaces to be time-dependent. — Lightness Races in Orbit, Jun 18 '11 at 17:29
Maybe it's a secret coupon, there are reasons for doing this. — mVChr, Jun 18 '11 at 17:31
no its not like that. If a user hasn't been active for 10 minutes, I want an image to pop up which will lead to a faq to help them out. — user796855, Jun 18 '11 at 17:31
If a user hasn't done anything on your site for 10 minutes, it's more likely to be because they _don't want to_, than because they have spent 10 minutes trying to find a link to click on. The popup will just be annoying. — Lightness Races in Orbit, Jun 18 '11 at 18:36

score 4 · Answer 1 · answered Jun 18 '11 at 17:30

4

HTML:

<img src="yourimage.jpg" id="yourImageId" style="display: none" />

JS:

setTimeout(function() { document.getElementById('yourImageId').display('block'); }, 10 * 60 * 1000);

with setTimeout you set the timer to trigger after 10 * 60 * 1000 ms ( = 10 minutes); It triggers the function and display's the hidden image. Fore tidyness put your css for hiding the image in a proper css file.

answered Jun 18 '11 at 17:30

fijter

17,607
2
25
28

thanks, but what do you mean by imageID? And how can i go about making the image "clickable"? Like how can i link it to another page? – user796855 Jun 18 '11 at 17:32
yourImageId is the id attribute of your HTML element. So you put a around the image and change yourImageId by newlink in the javascript to show the linked image after 10 minutes. – fijter Jun 18 '11 at 17:34

score 4 · Accepted Answer · answered Jun 18 '11 at 17:38

This is how you should add your image to your HTML

<img id="myimage" src="" style="display:none" />

Here is your JavaScript:

<script type="text/javascript">
setTimeout(function(){
    document.getElementById('myimage').style.display = 'block';
},600000);
</script>

You can test it here

score 1 · Answer 3 · answered Jan 02 '15 at 03:57

Can you repeat this for every image in a slideshow? I have tried your code to blackout for, say 500 ms, the transition between previous image and the next image to prevent their concatenation. Since the (random) images have a very different aspect ratio, I do not use (cross)fading here. Now, your code only works once, right at the start of the show, and then the images are concatenated again. My piece of code

#blackit { display: none; }  
<body>

<script>

document.write('<img id="blackit" onload="resizeImage()" margin="0" border="0" alt="" src="" '+rimages[Math.floor(Math.random()*(rimages.length))]+'">')


var timeoutID = setTimeout(function() { document.getElementById('blackit').style.display        ='block'; }, 500); 

var paused = false;

document.onkeydown = function(evt) {
    evt = evt || window.event;
    if (evt.keyCode == 32) {
        paused = !paused;
    }
};


(function loop() { 
var  rantime = Math.round(Math.random() * 7000) + 1000;
timeoutID; 
setTimeout(function() { 
   if (!paused) { 
       rotateImage(); 
       }
    loop();
   }, rantime);
})();

score 0 · Answer 4 · edited May 23 '17 at 10:27

Have a look at setTimeout. You can hide the image initially (with CSS display: none;) and after the timeout finished, show the image.

Example:

var timeout = setTimeout(function() {
    document.getElementById('imageID').style.display = 'block';
}, 10000); // of course you have to set the right time

As you want to detect user inactivity, also have a look at Detecting idle time in JavaScript elegantly and others.

score 0 · Answer 5 · answered Jun 18 '11 at 17:31

0

Look for setTimeOut method in javascript if you can use jQuery 1.4+ it has jQuery delay function.

answered Jun 18 '11 at 17:31

sushil bharwani

29,685
30
94
128

score 0 · Answer 6 · answered Jun 18 '11 at 17:32

You could use the setTimeout() function to achieve this. The function takes two parameters, a function to run and the time to delay. 10 minutes = 600 seconds which works out as 600,000 milliseconds, which is the timescale JS uses. So you could do something like this, if you were using jQuery of course:

setTimeout(function() {
    $("#my-img").show();
},600000);

Or if not do it with regular JS using:

setTimeout(function() {
    document.getElementById("my-img").style.display = "block";
}, 600000);

score 0 · Answer 7 · answered Jun 18 '11 at 17:32

0

setTimeout(function(){
    // do some stuff here, like add an image for example...
}, (60 * 10 * 1000))
// seconds * minutes * 1000

answered Jun 18 '11 at 17:32

Billy Moon

57,113
24
136
237

thanks, but doesnt seem to work. How do i add images using javascript? – user796855 Jun 18 '11 at 17:35
use jQuery, which makes this task and a thousand others much easier. Do something like `$('').appendTo($('body'))` – Billy Moon Jun 18 '11 at 17:46

How to make an image appear after 10 minutes using javascript?

7 Answers7