CODEWITHSUNDEEP
htmliframe
Muiter
Muiter

Reputation: 1520

Only load div iframe onclick

I have this part of code. When the page is loaded also all div's are loaded but not yet visible. Is the an way to start loading the content of the div when it's clicked? Now the page is slowed down because of all div's

<a href="#?w=550" rel="popup_add_dossier" class="poplight" title="'.$lang['form_add'].'"><img src="images/icon/new.png" ></a>

<div id="popup_add_dossier" class="popup_block">
<iframe src="add_dossier.php" frameborder="0" scrolling="no" width="550" height="400">

Upvotes: 14

Views: 63076

Answers (3)

shotasenga
shotasenga

Reputation: 979

jQuery makes it easy!

Load below in the <head> section.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script>
jQuery(function(){
    $("iframe").each(function(){
        this.tmp = this.src;
        this.src = "";
    })
    .parent(".popup_block")
    .click(function(){
        var frame = $(this).children("iframe")[0];
        console.log(frame);        frame.src = frame.tmp;
    });
});
</script>

Upvotes: 5

user869048
user869048

Reputation: 46

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    $('#button').click(function(){
        if(!$('#iframe').length) {
                $('#iframeHolder').html('<iframe id="iframe" src="http://google.com" width="700" height="450"></iframe>');
        }
    });   
});
</script>

<a id="button">Button</a>
<div id="iframeHolder"></div>

Upvotes: 3

mck89
mck89

Reputation: 19241

Do you mean load the iframe inside the div only when an element is clicked? If so you can delete the iframe src attribute from the iframe tag and set the src only when the element is clicked.

On the iframe:

<iframe id='ifr' frameborder="0" scrolling="no" width="550" height="400">

On the clickable element:

onClick='document.getElementById("ifr").src="add_dossier.php";'

Upvotes: 24

Related Questions