Run script after 20 seconds

Asked

Viewed 656 times

0

I have a script but would like to make a change to it so that it appears to the user after 20 seconds browsing the site. I tried to make the change in setTimeout, but did not resolve because it appears immediately without following the set 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);

    }

});

javascript jquery

  • Take a look at setInterval. http://answall.com/questions/128883/intervalo-de-tempo-em-um-while-com-javacript/128887#128887

  • Hello Igor! When you write "the same appears immediately without following the stipulated time setTimeout" - which leads you to this conclusion?

  • I do not know why, I do not understand much in this area of programming, but I wanted a help of what could possibly be happening, but with this "the same appears immediately without following the stipulated time setTimeout" I mean that the script appears without following the time that is in setTimeout.

  • Igor, the script will always appear there, what will happen is that with the setTimeout() it will only run after the given time...Besides, I believe that Sergio’s question refers to the fact that if your code appears to the user, there is something very wrong, because it is not visible unless open in debug...

  • The problem is you must be doing it the other way around, hide is the method to hide and show to display, then it is very likely that your HTML is always visible and after 20s it will hide. Opposite of what you want.

  • @Guilhermelautert That’s exactly how he is! After the time it disappears, but what changes do I have to do to make it the other way around, instead of running it this way, run this: Appear after setTimeout() time? You can help me?

Show 1 more comment

1 answer

1

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

Then just create the timer and change the display:none for block that he will display;

You can do this with pure JS, as in the example below or with the 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>

Browser other questions tagged javascript jquery

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