Div opening and closing automatically

Question

Div opening and closing automatically

Navigation

#1 by (1 votes)

0

Well, I'll put ADS on a page of mine, and it will be at the top of the page centralized. And I wanted the person to enter the page the ads would show, and would have a close (X) function, and after 5 minutes would open again, and so it goes, every 5 minutes open the ADS again.

I have this code:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
    <title>Efeitos com jQuery</title>
    <script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script><script>$(document).ready(function(){$("#ocultar").click(function(event){
      event.preventDefault();
      $("#capaefectos").hide("slow");
    });

    $("#mostrar").click(function(event){
      event.preventDefault();
      $("#capaefectos").show(1000);
    });
});
</script>
<style>
body {
    background: black;
}
</style>
</head>

<body>
 <center>
<div id="capaefectos" style="background-color: #cc7700; color:fff; padding:10px;width: 800px;height: 100px;border-radius: 10px;">

  <p>Camada de Efeitos</p>
  <p>&nbsp;</p>
  <p>Aqui você pode colocar o qualquer coisa!</p>
</div>

<p>
<a href="#" id="ocultar">Ocultar a camada</a> | 
<a href="#" id="mostrar">Mostrar a camada</a>  
</p>
 </center>
</body>
</html>

But I did not want this layer to appear and show layer, I wanted to see an "X" on the right of the ads and that it open every 5 minutes.

jquery

asked by anonymous 18.02.2015 / 14:54

1 answer

Problems in displaying accents with htmlspecialchars How to parse a Json with 2 columns in Objective-C?

score 1 · Answer 1

Okay, so the changes you have to HTML are to put <a href="#" id="ocultar">Ocultar a camada</a> inside #capaefectos and change this text "Hide layer" to simply X . The JS (event handler) can be the same, but within the function that closes the div you can directly trigger the counter to the next opening, 5 mins later. Since JavaScript works in milliseconds 5 minutes is 5 * 60 * 1000 ms.

So HTML can be:

<div id="capaefectos" style="background-color: #cc7700; color:fff; padding:10px;width: 800px;height: 100px;border-radius: 10px;">

  <p>Camada de Efeitos</p>
  <p>&nbsp;</p>
  <p>Aqui você pode colocar o qualquer coisa!</p>
  <a href="#" id="ocultar">X</a>
</div>

and JS:

$(document).ready(function(){
    $("#ocultar").click(function(event){
      event.preventDefault();
      $("#capaefectos").hide("slow"); // esconder
      setTimeout(function(){          // temporizador
          $("#capaefectos").show();
      }, 5 * 60 * 1000);
    });
    $("#capaefectos").show(); // mostrar quando a página carrega
});