PDA

View Full Version : How to use setTimeout



KennyP
02-24-2015, 10:32 AM
In the following script, would you guys please show me how to properly enter a setTimeout,
or delay, in order that "#info-box" fades in 3 seconds after "#bgAudio" starts playing?

Thanks


<script>
jQuery(function($) {

$('#bgAudio').trigger('play').animate({volume: 1}, 6000);

$('#bgAudio').on('playing', function() {
$("#info-box").fadeIn();
});
$('#bgAudio').on('ended', function() {
$("#info-box").fadeOut();
});
});

</script>

Beverleyh
02-24-2015, 12:37 PM
Untested, but delay() should do it - more info here: http://api.jquery.com/delay/

jQuery(function($) {

$('#bgAudio').trigger('play').animate({volume: 1}, 6000);

$('#bgAudio').on('playing', function() {
$("#info-box").delay(3000).fadeIn();
});
$('#bgAudio').on('ended', function() {
$("#info-box").fadeOut();
});
});

If you need more help, please provide a link to a test page.

KennyP
02-25-2015, 11:15 AM
Thank you so much for taking the time to reply Beverley.
Unfortunately tho, it doesn't seem to work. I'd like to
get #info-box elements to display after everything else.

Because of additional issues this site needs work with, I
made a duplicate test site here (http://www.bjc-testsite.billyjoeconor.com/).

Beverleyh
02-25-2015, 01:00 PM
Hi,

I pulled up an old demo from an earlier thread and added the jQuery delay function: http://fofwebdesign.co.uk/template/_testing/audio-random-caption-timeline.php It works as expected here so the only thing I can think is that there is something else on your page that is causing conflicts.

My advice would be to strip the other scripts and elements back as much as you can until you (hopefully) find the conflicting obstacle.

Hope this helps

KennyP
02-25-2015, 08:16 PM
Thanks again Beverley. I tried removing other scripts one at a time but no luck.
If you would show me how, I'd like to try a setTimeout for the entire info box,
sound and visual. Hopefully that might work?

Beverleyh
02-26-2015, 04:35 PM
I'm on iPhone at the moment which sadly doesn't support auto-play, but I've tried to test as best I can and the timeout below appears to delay the fadein info box too in my stripped-back test page;

$('#bgAudio').on('playing', function() {
setTimeout(function() { $('#info-box').fadeIn(); }, 3000);
});

To delay the audio auto-play as well, try moving the setTimeout function to the outside instead (this is the part I have no way of testing at the moment) More info on how to use setTimeout with JQuery here: http://www.sitepoint.com/settimeout-example/

Beverleyh
02-26-2015, 04:52 PM
From memory, your website is now running on Wordpress?

I don't use Wordpress so can't really offer any specific help for it, but you might also want to read up on jQuery conflicts within Wordpress http://stackoverflow.com/questions/12348168/bullet-proof-way-to-avoid-jquery-conflicts-on-wordpress-plugins

KennyP
02-27-2015, 01:29 AM
Many thanks Beverley. Unfortunately the setTimeout doesn't work either, and you're right about Wordpress.
The way it's setup it has caused many other issues besides this one. Before going on with other site
additions/embellishments I will strip the entire site off WP. When it functions properly, I'll resume the rest of
the work on it.