Run script after 20 seconds

0

I have a script but would like to make a change in it so that it appears to the user after 20 seconds browsing the site. I tried to make the change in setTimeout, but it did not resolve because it appears immediately without following the setTimeout time.

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

    }

});
    
asked by anonymous 30.11.2016 / 02:42

1 answer

1

To do what you want first keep your HTML hidden through display:none; in CSS.

After only creating timer and changing display:none to block it will display

You can do this with pure JS, as in the example below or with jQuery using the method 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>
    
30.11.2016 / 14:13