CODEWITHSUNDEEP
jqueryhtmliframe
Jason
Jason

Reputation: 213

Alternative to using .remove on a div / iframe

Currently I have a link that when clicked generates a iframe contained in a DIV. This DIV contains a link that when clicked hides it.

However I don't want to just hide it, I want the iframe 'removed' so its not running in the background.

I understand that .remove does this but then I cannot generate it again.

This is the code currently:

$(document).ready(function() {
    $("#overlay").hide();
});

$("#ShowSlideshow").live('click', function() {
    $("#overlay").show();
    $('#slideshow').html('<iframe border="0" frameborder="0" width="100%" height="100%" src="index.html"></iframe>').show()
});

$("#HideSlideshow").live('click', function() {
    $("#overlay").hide();
    $("#slideshow").hide();
});

Here are the DIVS:

<div id="overlay"><a href="#" id="HideSlideshow">Close Slideshow</a>
<div id="slideshow"></div>
</div>

Upvotes: 1

Views: 1466

Answers (2)

Pandian
Pandian

Reputation: 9126

Give some ID to IFrame and Remove the Iframe From Div... Then it works...

Try the Below...

Fiddle : http://jsfiddle.net/458bM/50/

HTML :

<div id="overlay"><a href="#" id="HideSlideshow">Close Slideshow</a>

<div id="slideshow"></div>
</div>
<a href="#" id="ShowSlideshow">Show Slideshow</a>

JQuery :

$(document).ready(function() {
    $("#overlay").hide();
});

$("#ShowSlideshow").live('click', function() {
    $("#overlay").show();
    $('#slideshow').html('<iframe border="1" frameborder="1" width="100%" id="iframeshow" height="100%" src="http://www.green.org/"></iframe>').show()
});

$("#HideSlideshow").live('click', function() {
    $("#overlay").hide();
    $("#iframeshow").remove();
});

Upvotes: 1

Kristoffer K
Kristoffer K

Reputation: 2053

You don't want to remove the actual #slideshow, you just want to remove the iframe inside the #slideshow. Like so:

$("#HideSlideshow").live('click', function() {
    $("#overlay").hide();
    $("#slideshow iframe").remove();
});

Upvotes: 2

Related Questions