-4

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?

closed as off-topic by Max Yudin, Nathan Johnson, EAMann Mar 3 '18 at 0:20

This question appears to be off-topic. The users who voted to close gave this specific reason:

If this question can be reworded to fit the rules in the help center, please edit the question.

  • You have a callback function in the .prop function, I'm not sure that's valid. Why don't you just have the .hidden_div show after 5 seconds instead of trying to mess the with iframe's src attribute? – Xhynk Mar 1 '18 at 20:00
  • @Xhynk i am trying to 5 secs lazy loading of the iframe – Kishor Parmar Mar 1 '18 at 20:03
  • Nothing to do with WordPress. – Max Yudin Mar 1 '18 at 20:06
  • 2
    You can use it with SolarQwertyJS-SMTH-built-10.143.234 but there is no problem with WordPress. – Max Yudin Mar 1 '18 at 20:44
  • 2
    @MaxYudin is right in that this isn't a WordPress specific problem. Any jQuery loaded into a document in compatibility mode requires the $ alias to be defined – Xhynk Mar 2 '18 at 0:24
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>
  • that did not work with 1.12.4 jquery. – Kishor Parmar Mar 1 '18 at 20:20
  • A few things, why are you relying on such an outdated version of jQuery instead of 3.x? Also, I confirmed it is working with 1.12.4 as you can see here: codepen.io/xhynk/pen/QQoNeZ - Something else must be wrong. What error message are you getting? – Xhynk Mar 1 '18 at 20:37
  • I am using latest wordpress 4.9.4 and its default jquery is 1.12.4. I checked again. your solution works with 1.8.3 and did not work with 1.12.4 – Kishor Parmar Mar 1 '18 at 21:01
  • 1
    Updated the code. You don't have the $ jQuery alias set up. Change the first line to jQuery(window).load(function($){ instead of $(window).load(function(){ – Xhynk Mar 1 '18 at 21:50
  • 1
    And at that rate you could probably just use your original code replacing the first line with jQuery(window).load(function($){ – Xhynk Mar 1 '18 at 21:51
-1

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>
  • This worked. after learning that we should use jquery instead of $ in WORDPRESS, i came back here and saw your answer. So, issue was jquery and wordpress. – Kishor Parmar Mar 1 '18 at 22:16

Not the answer you're looking for? Browse other questions tagged or ask your own question.