how to make this work with jquery 1.12.4 [closed]

Question

i have script which displays iframe after certain seconds.

<script type="text/javascript">//<![CDATA[
$(window).load(function(){
setTimeout(function(){
$(".hidden_div").show(function(){
$(this).find("iframe").prop("src", function(){
return $(this).data("src");
});
});
}, 5000);
});//]]> 
</script>

But it works with only code.jquery.com/jquery-1.8.3.js i am using wordpress's jquery 1.12.4

If i use both then i get lot of jquery errors from theme.

how to make the script work with 1.12.4 jquery?

Answer 1

If you only have one iframe, just set the iframe's src attribute in the .show() callback function.

<script type="text/javascript">//<![CDATA[
    jQuery(window).load(function($){
        setTimeout(function(){
            $('.hidden_div').show(function(){
                $(this).find('iframe').attr('src', 'https://example.com/');
            });
        }, 5000);
    });//]]> 
</script>

If you need more dynamic code, remove the src attribute of the iframe, and add a new attribute with the url like so

<iframe data-src="https://example.com/"></iframe>

And then clone the data attribute to the src attribute like so:

<script type="text/javascript">//<![CDATA[
    jQuery(window).load(function($){
        setTimeout(function(){
            $('.hidden_div').show(function(){
                var src = $(this).find('iframe').attr('data-src');
                $(this).find('iframe').attr('src', src);
            });
        }, 5000);
    });//]]> 
</script>

If you want to use the original code you have, this will work. The problem is you don't have the $ jQuery alias defined yet.

<script type="text/javascript">//<![CDATA[
    jQuery(window).load(function($){
        setTimeout(function(){
            $(".hidden_div").show(function(){
                $(this).find("iframe").prop("src", function(){
                    return $(this).data("src");
                });
            });
        }, 5000);
    });//]]> 
</script>

Answer 2

It's jQuery issue, not WordPress related, try with

<script type="text/javascript">//<![CDATA[
jQuery(window).load(function(){
    setTimeout(function(){
        jQuery(".hidden_div").show(function(){
            jQuery(this).find("iframe").prop("src", function(){
                return jQuery(this).data("src");
            });
        });
    }, 5000);
});//]]> 
</script>