how to make one div visible and hidden in one function

Question

I have written this script. According to me this image should come and disappear after alert block, but it's not happening.

<html>
    <head>
    </head>
    <body>
        <div id='idDivread' 
            style="position:absolute;
                   z-index:100;
                   width:expression(document.body.offsetWidth +'px');
                   height:expression(document.body.offsetHeight + 'px');
                   left:0px;
                   top:0px;
                   display:'none';
                   text-align:center;
                   background-color:#EEF4FD;filter:alpha(opacity=70).">

            <img src='images/Read.gif' 
                style="position:absolute;
                       top:expression(document.body.offsetHeight/2 -36 +'px')">
        </div>
        <div>
            <input type="button" value="click me" onclick ="change();"> 
        </div>
        <p id="example"></p>
    </body>
<script type ="text/javascript">
    function change()
    {
        idDivread.style.display='';
        setTimeout(function(){
            alert("Hello")
        },3000);
        idDivread.style.display='none';
    }
</script>

Any help? Thanks.

It's not question related but I see that you're using CSS Expressions so you might want to look at this answer: http://stackoverflow.com/questions/6191679/css-expressions — MythThrazz, Jun 18 '13 at 09:09

RoToRa · Answer 1 · 2013-06-18T09:18:45.393

The script doesn't stop and wait for the setTimeout to execute. You need to put the hiding of the image into the setTimeout callback function together with the alert:

Also, you can't[*] access an element just by its ID like that. You need to use getElementById to get a reference:

var idDivread = document.getElementById('idDivread');
idDivread.style.display='';
setTimeout(function(){
  alert("Hello");
  idDivread.style.display='none';
},3000);

[*] Well, you can, but you shouldn't, because you are relying on old, non-standard browser features.

EDIT: You urgently should make sure you are using a DOCTYPE, because currently you are relying on Quirks mode, which is a very bad thing. The expressions are (old) IE only and deprecated. They no longer work in current IE (9 and 10) and won't work in any other browser.

score -1 · Answer 2 · answered Jun 18 '13 at 09:07

-1

Try this

document.getElementById('idDivread').style.display='block';
setTimeout(function(){
    alert("Hello");
    document.getElementById('idDivread').style.display='none';
},3000);

answered Jun 18 '13 at 09:07

Harsha Venkataramu

2,887
1
34
58

That's not the problem. Also using an empty string instead of `'block'` is better, because it sets the display to the default value. – RoToRa Jun 18 '13 at 09:13
@RoToRa : So, just because I used display as block , you had to downvote? I don't see any other change apart from that in the answer you have posted! – Harsha Venkataramu Jun 18 '13 at 09:16
You edited your answer. You didn't have the last line inside the callback, when I voted and commented. – RoToRa Jun 18 '13 at 09:20
@RoToRa : Lol,I answered 12 minutes ago and you commented 6 minutes ago!You should have atleast seen an updated answer before commenting.People improvise their answers or correct their mistakes after answering sometimes(including you)! – Harsha Venkataramu Jun 18 '13 at 09:21

how to make one div visible and hidden in one function

2 Answers2