Techie Techie - 3 months ago 32
HTML Question

iframe scroll bars are not displaying in chrome after hide and show the iframe element

The scroll bars on the iframe element is not showing when iframe element is hide and show it again.

CODE SNIPPET:

<iframe id="imageFrame" scrolling="yes" src="https://wallpaperscraft.com/image/the_legend_of_zelda_elf_shield_sky_link_22301_1280x1024.jpg" width="100" height="100">

</iframe>
<button id="hideFrame">
Hide Frame
</button>
<button id="showFrame">
Show Frame
</button>

$(document).ready(function() {
$("#hideFrame").click(function() {
$("#imageFrame").hide();
});

$("#showFrame").click(function() {
$("#imageFrame").show();
});
});


JSFIDDLE DEMO:
DEMO

Answer

Solution 1:

HTML:

<iframe id="imageFrame" scrolling="yes" src="https://wallpaperscraft.com/image/the_legend_of_zelda_elf_shield_sky_link_22301_1280x1024.jpg" width="100" height="100">
</iframe>
<button id="hideFrame">
    Hide Frame
</button>
<button id="showFrame">
    Show Frame
</button>

CSS:

.hide{visibility: hidden;position: absolute;}
.show{visibility: visible;}

jQuery:

$(document).ready(function() {
  $("#hideFrame").click(function() {
    $("#imageFrame").addClass('hide').removeClass('show');
  });

  $("#showFrame").click(function() {
    $("#imageFrame").addClass('show').removeClass('hide');
  });
});

Demo: https://jsfiddle.net/17knnLsb/7/


Solution 2:

HTML:

<div class="iframe-wrapper"></div>
<button id="hideFrame">
    Hide Frame
</button>
<button id="showFrame">
    Show Frame
</button>

jQuery:

var iframeMarkup = '<iframe id="imageFrame" scrolling="yes" src="https://wallpaperscraft.com/image/the_legend_of_zelda_elf_shield_sky_link_22301_1280x1024.jpg" width="100" height="100"></iframe>';

$(document).ready(function() {
  $('.iframe-wrapper').append(iframeMarkup);
  $("#hideFrame").click(function() {
    $('.iframe-wrapper').find('iframe').remove();
  });

  $("#showFrame").click(function() {
    $('.iframe-wrapper').append(iframeMarkup);
  });
});

Demo: https://jsfiddle.net/17knnLsb/3/

Comments