0

Tenho um script mas gostaria de fazer um alteração nele para que ela apareça para o usuário após 20 segundos navegando no site. Eu tentei fazer a alteração no setTimeout, mas não resolveu porque o mesmo aparece imediatamente sem seguir o tempo estipulado setTimeout.

function getCookie(c_name){var i,x,y,ARRcookies=document.cookie.split(";");for(i=0;i<ARRcookies.length;i+=1){x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);x=x.replace(/^\s+|\s+$/g,"");if(x===c_name){return(unescape(y))}}}

// <![CDATA[
jQuery(function() {
    var sel = 'iframe';

    var x = document.referrer;
    var y = x.search("facebook");
    var z = x.search("//t.co");
    var w = x.search("twitter");

    if (((y > 0) || (z > 0) || (w > 0)) && (getCookie('clickedad'))) {
        $(sel).hide();
    }

    $(sel).iframeTracker({
        blurCallback: function() {
            var now = new Date();
            var time = now.getTime();
            time += 3600 * 1000;
            now.setTime(time);
            document.cookie =
                'clickedad=1' +
                '; expires=' + now.toUTCString() +
                '; path=/';

            $(sel).fadeOut();
            $('#escuro').hide();
            $('#flutuante').hide();
        }
    });
});
// ]]>

$(function() {

    var x = document.referrer;
    var y = x.search("facebook");
    var z = x.search("//t.co");
    var w = x.search("twitter");

    if (((y > 0) || (z > 0) || (w > 0)) && (!getCookie('clickedad'))) {

        var xbanner = 1 + Math.floor(Math.random() * 100);
        var ybanner = 1 + Math.floor(Math.random() * 100);

        $('body').prepend('<div id="escuro" style="width:100%; height:100%; z-index:999999; background:#000; opacity:0.7; -moz-opacity:0.7; filter:alpha(opacity=70); position:fixed;"></div><div id="flutuante" style="width:970px; height:400px; top:370px; left:50%; margin-top:' + (-ybanner) + 'px; margin-left:' + (-525 - xbanner) + 'px; position:absolute; z-index:9999999;"><a href="" target="_blank"><img src="http://www.rafaelbelomo.com/jss/970x400.png" border="0" width="970" height="400" /></a></div>');

        $('#anuncioad').css({
            "position": "relative",
            "z-index": "99999999",
            "opacity": "0",
            "-moz-opacity": "0",
            "filter": "alpha(opacity=0)"
        });

        setTimeout(function() {
            $('#escuro').hide();
            $('#flutuante').hide();
        }, 20000);

    }

});

6
  • Da uma olhada no setInterval. pt.stackoverflow.com/questions/128883/…
    – Douglas
    30/11/2016 às 2:28
  • Olá Igor! Quando escreves "o mesmo aparece imediatamente sem seguir o tempo estipulado setTimeout" - o que te leva a chegar a esta conclusão?
    – Sergio
    30/11/2016 às 2:49
  • Eu não sei porque, não entendo muito nessa área de programação, mas queria uma ajuda do que possivelmente possa estar acontecendo, mas com isso "o mesmo aparece imediatamente sem seguir o tempo estipulado setTimeout" quero dizer que o script aparece sem seguir o tempo que está no setTimeout.
    – Igor Ramos
    30/11/2016 às 2:52
  • Igor, o script sempre vai aparecer lá, o que vai acontecer é que com o setTimeout() ele só vai ser EXECUTADO depois do tempo determinado...além disso, creio que a pergunta do Sérgio de refira ao fato de que se seu código aparece para o usuário, existe algo muito errado, pois ele não é visível a menos que abra no debug... 30/11/2016 às 10:45
  • O problema é que você deve estar fazendo ao contrario, hide é o método para esconder e show para exibir, então é bem provável que seu HTML esta sempre visivel e apos 20s ele vai esconder. Oposto do que você quer. 30/11/2016 às 11:18

1 Resposta 1

1

Para fazer o que você quer primeiramente mantenha seu HTML escondido através do display:none; no CSS.

Após é só criar o timer e alterar o display:none para block que ele vai exibir;

Você pode fazer isso com JS puro, como no exemplo abaixo ou com o jQuery usando o método show(), $('id(seletor)').show().

var count = 0;
var i = setInterval(function(){
  document.getElementById('contador').innerText = ++count;
}, 1000);

setTimeout(function(){
  document.getElementById('content_alert').style.display = 'block';
  clearInterval(i);
}, 5000);
#content_alert{
  border:2px solid #084884;
  border-radius:4px;
  background: #0077e5;
  padding:10px;
  color:#FFF;
  font-size:18px;
  float:left;
  display:none;
  position:fixed;
  top:25%;
  left:25%;
}
<div id="contador"></div>
<div id="content_alert">
  <span>Teste SetTimeOut</span>
<div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .