Make Div appear 4 seconds after site loaded

Asked

Viewed 4,693 times

3

How can I make for a div appear 4 seconds after site load?

javascript html

  • Check out this answer: http://answall.com/questions/67872/display-div-ap%C3%B3s-um-certo-tempo-com-settimeout

3 answers

3

You can use this code using jQuery:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
</head>
<body>

Conteudo normal fora da div<br><br>

<div ID="teste" style="display:none;">

Conteudo a ser exibido apos 4 segundos

</div>


<script>
$( document ).ready(function() {
     setTimeout(carregar, 4000);
});

function carregar() {
    $('#teste').show();
}
</script>


</body>
</html>

If you don’t want to use jQuery:

<html>
<head>
</head>
<body onLoad="setTimeout(carregar, 4000);">

Conteudo normal fora da div<br><br>

<div ID="teste" style="display:none;">
Conteudo a ser exibido apos 4 segundos
</div>


<script>

function carregar() {
    document.getElementById("teste").style.display="block";
}
</script>


</body>
</html>

  • Bro is 4 seconds.... kkk It’s nois...

2

If you want to display an existing div that is hidden you will have to use setTimeout and document.getElementById or document.getElementsByClassName or document.querySelector, for example:

Note that setTimeout uses milliseconds, so you have to multiply the seconds by 1000 to make it in milliseconds 

window.onload = function() {
     var segundos = 4;
     setTimeout(function () {
         var foo = document.getElementById("foo");
         foo.className = ""; //Remove a classe hide
     }, segundos * 1000);
};
.hide {
   display: none;
}

#foo {
    background-color: #f00;
    color: #fff;
    padding: 5px;
}
<div id="foo" class="hide">Olá mundo!</div>

If you want to create an element dynamically then you have to use document.createElement:

window.onload = function() {
     var segundos = 4;
     setTimeout(function () {
         //Cria um novo elemento
         var novoDiv = document.createElement("div");
       
         //pega o elemento existente que vai receber o novo div
         var alvo = document.getElementById("target");
       
         //Adiciona um texto ao DIV
         novoDiv.textContent = "Conteudo de texto";
   
         //Adiciona o novo div ao elemento existente
         alvo.appendChild(novoDiv);
     }, segundos * 1000);
};
#target div {
    background-color: #f00;
    color: #fff;
    padding: 5px;
}
<div id="target"></div>

Note you can exchange textContent for innerHTML if you want to add any type of HTML to your new div

I recommend you study these references:

1

Boss see if it helps:

The function in question is the Javascript "setTimeout()". Depending on the effect you want you can customize.

<!DOCTYPE html>
<html>
<body onload="myFunction()">

<p>Nem precisa clicar,aguarde 4 segundos, e veja "Olá".</p>

<button onclick="myFunction()">Clica e aguarda</button>

<script>
function myFunction() {
    setTimeout(function(){ alert("Olá, viu demorou 4 segundos, relógio Suiço!"); }, 4000);
}
</script>

</body>
</html>

Another example:

<!DOCTYPE html>
<html>
<body onload="timedText()()">

<p>Nem precisa clicar, veja a div aparecer, e depois mudar</p>

<button onclick="timedText()">Mostra Div, com mistério</button>
<div id="txt"></div>

<script>
function timedText() {
    var x = document.getElementById("txt");
    setTimeout(function(){ x.innerHTML="2 seconds" }, 2000);
    setTimeout(function(){ x.innerHTML="4 seconds" }, 4000);
    setTimeout(function(){ x.innerHTML="6 seconds" }, 6000);
    setTimeout(function(){ x.innerHTML="Viu com mistério é mais dahora !" }, 8000);
}
</script>

</body>
</html>

Reference here <<<<<<<<

  • This code loads the div by clicking the button, not by uploading the site as it requested.

  • Okay boss, see if it looked the same if you wanted... If you agree to any of the answers, forget to validate... Vlw ;)

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.