Function for delay / delay opening of a div

Question

Function for delay / delay opening of a div

Navigation

#1 by (2 votes)

2

I have a floating div with a 'close' button, which makes the 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 that the user enters the page. I read a bit about setTimeout but I saw it creates a loop and I just opened the div once.

I am a layman in JS, I am counting on you.

javascript html settimeout

asked by anonymous 12.08.2016 / 23:00

1 answer

NoSuchElementException error while executing application Modeling Categories and sub-categories

score 2 · Answer 1

In fact, you need exactly setTimeout , the one that creates a loop is called setInterval() , which as the name says it will execute the code every X time, returning to your case would look like this:

I just wondered 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>