Delay/delay function for opening a div

Question

I have a floating div with a 'close' button, which makes Hidden / Visible.

<script language="JavaScript">
function controlaLayer(layerover) 
{ 
if( document.getElementById(layerover).style.visibility == "hidden" ) 
{ 
    document.getElementById(layerover).style.visibility = "visible"; 
} else { 
    document.getElementById(layerover).style.visibility = "hidden"; 
} 
}
</script>

<div id="1">
<div id="2">
<div id="3">

<div id="layerover">
<a href="#" onmouseover="controlaLayer('layerover')"><b>X</b></a>
<img></img>
</div>

</div>
</div>
</div>

I would like this div to load only after 2 seconds the user enters the page. I read a little about setTimeout but saw that creates a loop and I open the div only once.

I’m a JS layman, I’m counting on you.

Answer 1

Actually Voce needs exactly the setTimeout, the one who creates a loop is called setInterval(), that as the name already says will execute the code every X time, going back to your case would look like this:

I was just wondering which div to open.

<script language="JavaScript">
    function controlaLayer(layerover) 
    { 
        if( document.getElementById(layerover).style.visibility == "hidden" ) 
        { 
            document.getElementById(layerover).style.visibility = "visible"; 
        } else { 
            document.getElementById(layerover).style.visibility = "hidden"; 
        } 
    }

    //vai executar quando o doom estiver pronto para ser manipulado
    document.addEventListener('DOMContentLoaded', function(){
        setTimeout(function(){
            //aqui é o codigo que vai ser executado depois do tempo determinado no segundo parametro
            controlaLayer('layerover');
        }, 2000);// <-- o tempo que vai levar ate a funcao ser executada, em milisegundos
    });
</script>

<div id="1">
    <div id="2">
        <div id="3">
            <div id="layerover">
                <a href="#" onmouseover="controlaLayer('layerover')"><b>X</b></a>
                <img></img>
            </div>
        </div>
    </div>
</div>