jQuery, delay link replacing iframe target -
i have simple grid layout 4 thumbnails, each link inside changes target of single iframe sits @ top of page. these work fine, want add slight delay iframe's target changing allow page scroll top after each click.
here iframe code;
<iframe id="video-frame" name="video-frame" width="560" height="315" src="[youtube-url]" frameborder="0" allowfullscreen></iframe>
this play button code (of there 4, each different href values;
<a class="play-button" href="[youtube-url]"> </a>
and jquery code scrolls page top on each .play-button
click
$('.play-button').click(function(){ $('html, body').animate({ scrolltop: 0 }, 500); $('#video-frame').attr("src", $(this).attr("href")); });
my issue changing of iframe src causes scroll glitchy need add 650ms delay changing of iframe src scroll has finished
if trying delay running function can try function :
$('.play-button').click(function(e){ e.preventdefault(); $('html, body').animate({ scrolltop: 0 }, 500); setinterval(function () {$('#video-frame').attr("src", $(this).attr("href"));}, 650); });
the set interval run function after given time 650 in our case meaning 650ms. try out , let me know if doesn't work
Comments
Post a Comment