trouble with javascript setTimeout

They have: 2 posts

Joined: Mar 2010

hi,

i'm making a page with an image on it. when that image is clicked i want it to make one div visible, and also run the javascript function to make a second div visible after 2 seconds. Everything seems to work correctly except that the javascript runs on page load instead of waiting for when the image is clicked. any help much appreciated. thanks!

Here's the javascript:

<script type="text/javascript">
function showIt() {
  document.getElementById("show_1").style.visibility = "visible";
}
setTimeout("showIt()", 2000);
</script>
</head>

Here's the html:

<div id="flyer1">content
<div id="show_1" style="visibility:hidden">content
</div>
</div>

<div id="image">
<a href="javascript:void(0)" onclick="MM_showHideLayers('flyer1', '','show')"; "showIt()">image</a>
</div>

pr0gr4mm3r's picture

He has: 1,502 posts

Joined: Sep 2006

I don't see where the MM_showHideLayers() function came from. Try changing the HTML to this:

<div id="flyer1">content
<div id="show_1" style="visibility:hidden">content
</div>
</div>

<div id="image">
<a href="javascript:void(0)" onclick="setTimeout("showIt()", 2000)">image</a>
</div>

And then remove the setTimeout("showIt()", 2000); statement from the Javascript.

They have: 2 posts

Joined: Mar 2010

thanks for the suggestion. i'll give it a try

Greg K's picture

He has: 2,145 posts

Joined: Nov 2003

The MM_showHideLayers is a function packaged with Dreamweaver (MM = Macromedia, who originated Dreamweaver).

Lots of places use it, but that is the origin of most functions beginning with MM_

The solution is a combination of the two, You will still need MM_showHideLayers() function which shows layer 1 when you clock the image, but as mentioned you need to move the setTimeout() so that it is is out side of the "root" code that executes on load.

Additionally, while you can execute multuple items within an onclick (and others), you must keep them all within one set of quotes.

Try this:

<script type="text/javascript">
    function showIt() {
        document.getElementById("show_1").style.visibility = "visible";
    }

    function waitShow() {
       setTimeout("showIt()", 2000);
   }
</script>

....

<a href="#" onclick="MM_showHideLayers('flyer1', '','show'); waitShow();">image</a>

Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.