Onclick show Image or DIV and hide automatically..

djnp · 06-28-2012, 06:53 PM

Hi, I am looking to show the image or DIV when clicked and hide it automatically (after specific time). It sounds like simple however I Googled for it but nothing found. So, I am hoping I will get something here in this genius JS programmers forum.

Any scripts example would be highly appreciated. (Please make it simple)

Thanks!!

WolfShade · 06-28-2012, 07:15 PM

I don't completely follow. It has to be shown in order to be clicked, so it's already shown. You can automatically hide anything by using setTimeout("function",x); where x is the number of milliseconds (1000 per second) to call the function.

djnp · 06-28-2012, 08:28 PM

Quote:

Originally Posted by WolfShade

I don't completely follow. It has to be shown in order to be clicked, so it's already shown. You can automatically hide anything by using setTimeout("function",x); where x is the number of milliseconds (1000 per second) to call the function.

Thanks for your response. I am new to JS as you can see the code below:

Code:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script>
function showArrow(o) {
	document.getElementById(o).style.display='block';
	setTimeout("showArrow()", 2000);
	}
</script>

<a href="javascript: showArrow('arrow');">show that arrow</a>
<div id="arrow" style="display:none; position: absolute; top: 50px; left: 50px;">↗</div>

I have tried above code and it works for showing the hidden DIV however it doesn't automatically hide the DIV. As I don't know where to specify following code for hiding the DIV?

Code:

document.getElementById(o).style.display='none';

Thanks!!

WolfShade · 06-29-2012, 01:35 PM

You placed the setTimeout that calls a function within the function, so it loops; every 2 seconds, it sets the display to "block".

To stop the setTimeout, you need to set it to a variable and use clearTimeout on the variable.

djnp · 06-29-2012, 07:08 PM

Quote:

Originally Posted by WolfShade

You placed the setTimeout that calls a function within the function, so it loops; every 2 seconds, it sets the display to "block".

To stop the setTimeout, you need to set it to a variable and use clearTimeout on the variable.

It would be really great if you could show, how to do it. Thanks much..

DaveyErwin · 06-29-2012, 07:29 PM

Code:

<!doctype html>
<html>
<head><title></title>
</head>
<body>
<div onclick="var target=childNodes[1];target.style.display='block';setTimeout(function(){target.style.display='none'},2000)">
  clickme
  <img src="pic.jpg" style="display:none;"></div>
</body><html>

djnp · 06-29-2012, 07:35 PM

Quote:

Originally Posted by DaveyErwin

Code:

<doctype html>
<html>
<head><title></title>
</head>
<body>
<div onclick="var target=childNodes[1];target.style.display='block';setTimeout(function(){target.style.display='none'},2000)">
  clickme
  <img src="pic.jpg" style="display:none;"></div>
</body><html>

Genius!! thanks a lot!!