Div opening and closing automatically

Question

Div opening and closing automatically

Asked 9 years, 7 months ago

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?

– Sergio

2015/02/18 at 13:58
I still don’t have.

– Piu

2015/02/18 at 14:02
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.

– Sergio

2015/02/18 at 14:03

1 answer

Browser other questions tagged jquery

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

by Sergio • **133,294** points · Answer 1 · 2015-02-18T14:23:23+00:00

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
});