CODEWITHSUNDEEP
javascriptjquery
James Daley
James Daley

Reputation: 289

jquery delay document ready function by number of seconds?

I have a div called noti_box which fades in on page load. Sometimes there may be only one noti_box div or there might be 2 3 or 4.

a user can close this div should they want to by clicking on it.

If no noti_boxes are displayed on the page I am trying to fade in another div, lets call this div (advert).

however with my current script I have, because my first div noti_box takes a couple of seconds to fade in it will automatically show my advert div. what should happen is my advert div should only show once the user has closed the div noti_box, not before it fades in on the page.

Is there a way I can delay my jquery function to wait until the noti_box has finished fading in?

noti_box jquery:

<script>
    $('.noti_box').each(function(i) {
    // 'i' stands for index of each element
    $(this).hide().delay(i * 1000).fadeIn(1500);
});
</script>

my advert div jquery:

<script type="text/javascript">
$(document).ready(function(){
if ($('.noti_box').is(':hidden')) {
$(".advert").fadeIn("slow");
}
}); </script>

I have gotten close to what I need:

<script>        
$(document).ready(function(){
    var animations = [];

    $('.noti_box').each(function(i) {
        animations.push(
           $(this).hide().delay(i * 1000).fadeIn(1500).promise()
        );
    });
    $.when.apply($, animations).done(function () {
        if ($('.noti_box').is(':visible')===false) {
        $(".advert").fadeIn("slow");
    }});
});
</script>

by using this script my noti_boxes fade in and if I close them within like 1 second of them fading in then my advert box fades in. however if I wait after 1 second then I close the noti_boxes my advert doesn't fade in at all. Any ideas?

Upvotes: 0

Views: 1307

Answers (3)

James Daley
James Daley

Reputation: 289

I found the answer to my question, I set a time interval for my last function to repeat every second. 

<script>        
$(document).ready(function(){
    var animations = [];

    $('.noti_box').each(function(i) {
        animations.push(
           $(this).hide().delay(i * 1000).fadeIn(1500).promise()
        );
    });

    $.when.apply($, animations).done(function () {
        time=setInterval(function(){
        if ( $('.noti_box:visible').length === 0 ) {
            $(".advert").fadeIn("slow");
        } },1000);
    });
});
</script>

Upvotes: 0

Shomz
Shomz

Reputation: 37711

Since you know the amount of elements and the amount of time each takes to fade, you can calculate the total needed delay for the advert to show, something like this: 

// number of elements * their delay + fade time
var totalDelay = ($('.noti_box').length - 1) * 1000 + 1500; 
$(document).ready(function(){
  setTimeout(function(){
    $(".advert").fadeIn("slow");
  }, totalDelay);
});

Here's an example with 5 noti boxes (can be any number): 

$('.noti_box').each(function(i) {
  // 'i' stands for index of each element
  $(this).hide().delay(i * 1000).fadeIn(1500);
});

// number of elements * their delay + fade time
var totalDelay = ($('.noti_box').length - 1) * 1000 + 1500;
$(document).ready(function() {
  setTimeout(function() {
    $(".advert").fadeIn("slow");
  }, totalDelay);
});
.advert {
  display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="noti_box">1</div>
<div class="noti_box">2</div>
<div class="noti_box">3</div>
<div class="noti_box">4</div>
<div class="noti_box">5</div>
<div class="advert">ADVERT</div>

Upvotes: 1

J Bourne
J Bourne

Reputation: 1439

Try putting document.ready in Javascript SetTimeout function.

Upvotes: 0

Related Questions