Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Alex Branco

Contagem Regressiva iniciar quando popup for mostrada

Recommended Posts

Boa noite galera,

Sou iniciante e tenho uma dúvida que deve ser simples. Estou desenvolvendo um site em wordpress e utilizando o plugin wbounce para wordpress que é uma exit intent popup que abre quando a pessoa tira o mouse da janela com a intenção de navegar para outro site.

Consegui fazer com que essa popup feche depois de aberta após um tempo definido por mim. E também mostrar um contador regressivo de tempo para a janela fechar.

Porém essa contagem inicia quando o site é aberto e preciso que só se inicie quando a div da popup for mostrada.

Segue o código que estou utilizando:

jQuery(document).ready(function($){
var $banner       = $('#wbounce-modal'); // objeto banner
var $tempo     = 10; // milisegundos
var $intervalo;

// funcao que fechará o banner
function fechar(){
    $("#wbounce-modal").hide();
}
setTimeout(fechar, $tempo*1000);
    
    function contador(){
    $intervalo = window.setInterval(function() {
    var tempoContagem     = $("#contador").html();
    var atualizaContagem     = eval(tempoContagem) - eval(1);
    $("#contador").html(atualizaContagem);
 
    // chegando em zero o contador é parado
    if(atualizaContagem == 0){
      pararContagem();
    }
     }, 1000);
  }
    
    // funcao para limpar o contador 
  function pararContagem(){
     window.clearInterval($intervalo);
  }
 
  // chamada da funcao que fará a contagem
  contador();
})

 

Tentei inserir: if($('#wbounce-modal').css('display') == 'block'){}, mas não deu certo!

 

Podem me ajudar?

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por Keven Augusto
      Primeiramente, bom dia/boa tarde/boa noite.
       
      Eu estou migrando de vez para o Linux e percebi que não possui nenhuma aplicação nativa de cronometro como a que estava acostumado a utilizar no Windows 10. Eu faço home office, então uso muito para gerir o tempo de trabalho diário e gostaria de utilizar no Ubuntu também. 
       
      Procurei na loja do sistema, mas não encontrei nenhum que me agradasse e, como estudante de Engenharia de Computação, pensei em fazer um simples que execute no terminal mesmo e possua as funções básicas que preciso: start, pause e reset.
       
      Porém, estava pensando e não aprendi ainda e não tenho a menor ideia de como faria para que fosse exibido no terminal o contador e ao mesmo tempo examinar o teclado para que pause a execução caso seja pressionada uma determinada tecla.
       
      Alguém teria alguma ideia de como possa fazer para isso?
       
      Eu pensei em iniciar um novo terminal via código mesmo e ir mostrando o contador neste outro terminal, aí no primeiro eu insiro os comandos para pausar, começar ou reiniciar o tempo. Penso que seja mais ou menos isso que preciso fazer, mas não tenho certeza e gostaria de uma luz.
    • Por calves_oliveira
      Pessoal, não tenho conhecimento em Thread e em Timer mas consegui criar esses dois métodos porém está com um erro e não consigo resolver, a idéia é o seguinte: um classe manda uma jlabel para o método mostraLabel e ele chama o outro método desizaLabel os dois metodos abaixo vai apresentar a mensagem durante 3 segundos e dois deslizar para sair da tela.
      Sei que tem um erro no loop do metodo deslizaLabel pois ele esta com loop infinito mas não consigo tirar… quero que ao jlabel deslizar até o fim do form ele finalize o Thread.
      e também se alguém tiver alguma sugestão de como otimizar esse processo será bem vindo.
      public void mostraLabel(JLabel lbl) { ActionListener action = new ActionListener() { @Override public void actionPerformed(ActionEvent e) { tempo.stop(); deslizaLabel(lbl); } }; tempo = new Timer(3000, action); tempo.start(); } private void deslizaLabel(JLabel lbl){ new Thread(){ @Override public void run(){ int x = 0; int y = lbl.getLocation().y; while(true){ x++; if(x > lbl.getWidth()){ this.stop(); } lbl.setLocation(x,y); try { sleep(10); } catch (InterruptedException ex) { } } } }.start();}  
    • Por MateusOFCZ
      Olá, eu criei uma página de publicidade, porém não fluiu como eu queria, então coloquei essa página em uma DIV, alguém poderia me informar se irá funcionar caso eu faça um sistema para ocultar essa DIV depois de 10 segundos?
      <!--- Publicidade ------> <div id="publicidadediv"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title><?= $config['hotelName'] ?> - Publicidade</title> <script src="/templates/GalaxyServers/client/js/jquery-latest.js" type="text/javascript"></script> <script src="/templates/GalaxyServers/client/js/jquery-ui.js" type="text/javascript"></script> <script src="/templates/GalaxyServers/client/js/spacehotel2018.js"></script> <script src="/templates/GalaxyServers/client/js/flash_detect_min.js"></script> <script src="/templates/GalaxyServers/client/js/client.js" type="text/javascript"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="icon" type="image/png" href="<?= $config["favicon"];?>"> </head> <body> <body style="background-color:black;"> <center><img src="https://i.imgur.com/kHdzpqq.png" style="width:396px;height:91px;"></center> <center><?php $imagens = array(); $imagens[] = '<a href="https://hobbyhotel.club/hotel?room=255" target="_blank"><img src="https://i.imgur.com/O0gSito.png" style="width:330px;height:250px;"></a>'; $imagens[] = '<a href="https://hobbyhotel.club/hotel?room=255" target="_blank"><img src="https://i.imgur.com/O0gSito.png" style="width:330px;height:250px;"></a>'; $chave = array_rand($imagens); $imagem = $imagens[$chave]; echo $imagem; ?></center> <center><img src="https://i.imgur.com/9FH4A5O.png" style="width:396px;height:91px;"></center> </body> </div> <!--- Publicidade ------> Gostaria de sabem também como faço para ocultar tudo isso após X segundos...
    • Por Joachim Augusto
      ola tudo bem ? preciso criar no meu site algo assim:>  http://leocdmoral.com.br/cd/1290/
      quando clica em download, abre outra página, só que eu queria dentro do proprio post do wordpress uma contagem regressiva, e direcionar a pessoa para um link download, obrigado
    • Por Sulivan1999
      Sou novo em programação, e estou com alguns códigos para por uma contagem regressiva cima de um banner. Já consegui fazer a contagem regressiva de 10 segundos, não estou conseguindo por ela acima do banner, para que quem acessar o site veja. Segue abaixo os códigos que estou usando, se alguém poder me ajudar agradeço muito!
       
      <body> <div style='position: fixed; z-index: 60000; font-family:verdana;font-size:10px;background-color: #FFFFFF;'><p>Fecha em:<p></span></div> <div style="font-family:verdana;font-size:10px; z-index: 70000;" onLoad="relogio()"> <span id="spanRelogio"> </span></div> <div class='footer' id='banner_popup' style='position:fixed; left: 1px; bottom: 0px; height: 100%; width: 100%; z-index:50000;'> <iframe border='0' class='overlay2' frameborder='0' height='100%' marginheight='0' marginwidth='0' scrolling='No' src='http://radiojaboticabal.com.br/publicidade-pop-up/index1.html' style='max-width: 100%; width: 100%;'/> </div> </body> <script language='JavaScript'> function fecha_banner() { var banner_obj = document.getElementById(&#39;banner_popup&#39;); banner_obj.style.display = &#39;none&#39;; } setTimeout(&#39;fecha_banner()&#39;, 17000); </script> <script> /* Tablet Portrait size to standard 960 (devices and browsers) */ @media only screen and (min-width: 768px) and (max-width: 959px) { p{ font-size: 23px; } } /* All Mobile Sizes (devices and browser) */ @media only screen and (max-width: 767px) { p{ font-size: 19px; } } /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ @media only screen and (min-width: 480px) and (max-width: 767px) { p{ font-size: 15px; } } /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ @media only screen and (max-width: 479px) { p{ font-size: 11px; } } </script> <script> var min, seg; min = 0; seg = 10 function relogio(){ if((min > 0) || (seg > 0)){ if(seg == 0){ seg = 59; min = min - 1 } else{ seg = seg - 1; } if(min.toString().length == 1){ min = "0" + min; } if(seg.toString().length == 1){ seg = "0" + seg; } document.getElementById('spanRelogio').innerHTML = min + ":" + seg; setTimeout('relogio()', 1000); } else{ document.getElementById('spanRelogio').innerHTML = "Aguarde..."; } } </script>  
      Quero que fique mais ou menos desse jeito aqui. Obs: Do jeito que esta no canto superior direito do banner do print.

       
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.