JavaScript Forum

**amox** · 03-27-2007, 12:34 AM

Hi,
A div window containing an image appears when loaded and will hide after 3 seconds. It also has a close link for users who can't wait. I have created a link to have it appear again. However, when I clicked on the link, the window does not appear! This bug appears when I let the first div window closes by itself using a setTimeout. However, if i voluntarily closes, I can always click the link to have it appear again. Why so?

Here's my HTML code:

Code:

<body>
<script language="javascript">
    setTimeout('displayTeaser()',3000);
</script>
<div id="teaser" style="display: block; width:575px; height:300px; position:absolute; left: 16px; top: 105px;" >
<table border="0" width="575" cellpadding="0" cellspacing="0">
<tr>
    <td height="20" align="center">
        <div id="closer">
             <strong><a href="javascript:closeTeaser()">[x] Close This Ad</a>
             </strong>
       </div>
    </td>
</tr>
<tr>
    <td><img src="myimage.jpg" /></td>
</tr>
</table>
</div>
<p>Click <a href="javascript:displayAgain()">here</a> to display image again.</p>
</body>

Here's my javascript:

Code:

function displayTeaser(){
    var e=document.getElementById("teaser");
    if(e.style.display=='block'){
        e.style.display = 'none';
        e.style.visibility = 'hidden';
    }
}

function displayAgain(){
    var ee=document.getElementById("teaser");
    if(ee.style.display=='none'){
        ee.style.display='block';
        alert("i'm here!");
    }
}

function closeTeaser(){
    var f=document.getElementById("teaser");
    if(f.style.display=='block')
        f.style.display='none';
}

**RikComery** · 03-27-2007, 12:34 PM

I haven't looked too deeply into your code. However, i notice you have three functions that effectively do the same thing.... Show or hide a div.

This simplified script uses only one function and should work fine.

HTML Code:

<html>
<head>
<script type="text/javascript">
function showHideTeaser(){
  var e=document.getElementById("teaser");
  if(e.style.display == 'block'){
    e.style.display = 'none';
  } else {
    e.style.display = 'block';
  }
}

window.onload = function(){
  setTimeout('showHideTeaser()',3000);
}
</script>
</head>

<body>
<body>

<div id="teaser" style="display: block; width:575px; height:300px; position:absolute; left: 16px; top: 105px;" >
  <table border="0" width="575" cellpadding="0" cellspacing="0">
    <tr>
      <td height="20" align="center">
        <div id="closer">
          <strong><a href="javascript:showHideTeaser()">[x] Close This Ad</a></strong>
        </div>
      </td>
    </tr>
    <tr>
      <td><img src="myimage.jpg" /></td>
    </tr>
  </table>
</div>
<p>Click <a href="javascript:showHideTeaser()">here</a> to display image again.</p>
</body>
</body>
</html>

**amox** · 03-28-2007, 11:48 PM

Wow that works! Thanks!