Div opening and closing automatically

Asked

Viewed 694 times

0

Well, I’m going to put ADS on one of my pages, and it’s going to be at the top of the centered page. And I wanted the person entering the page to show the ads, and would have a close (X) function, and after 5 minutes to open again, and so on, every 5 minutes to open the ADS.

I have that 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 didn’t want it to appear that hide layer and show layer, I wanted it to appear an "X" on the right of the ads and that it opens every 5 minutes.

  • Already have some code? HTML or Javascript?

  • I still don’t have.

  • 2

    Paulo, to be without HTML or JS this question is very wide because you can do it in many different ways. It does the HTML part and puts here the code and which div has the ads. So it is more objective the question and we can help with the JS part.

1 answer

1

Okay, so the changes you have to HTML is to put <a href="#" id="ocultar">Ocultar a camada</a> inside #capaefectos and change this "Hide layer" text to simply X. The JS (Event Handler) may be the same, but within the function that closes the div you can directly fire the counter to the next opening, 5 mins later. How 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 the 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
});
  • 1

    Man, thanks, thanks a lot, settled.

  • @Train if the answer answered what you needed, mark it as correct by clicking on the "check" on the left side.

Browser other questions tagged

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