iFrame with Responsive Content Loading

- - Kode

So your still using iframes….what a drag.
Anyhow, lets look at overcoming a few of its quirks. First off wouldn’t it be awesome if native iframes would snap to the size of whatever is inside? Yep, I think so too so lets build an iFrame with Responsive Content Loading. This means that once the source for the iframe changes so will its height and width. Secondly we’re gonna make it so that it loads whatever link is clicked. The iframe will therefore load and display the clinked link.


<div class="content-wrapper"> 
	<section class="content">
		<div class="row"> 
			<img id="loader" src="images/loading.gif" alt="loading gif"/> 
			<div id="report" class="iframe-container tabcontent"> 
				<iframe id="dframe" src=""> </iframe> 
			</div> 
		</div> 
	</section> 
</div>

<script src="js/jQuery.js"></script>
<script>		
$(document).ready(function(){
  $('#smenu li a').on('click', function(e) {

    if ($(e.target).hasClass('active')) {
      return false;
    }

    $('#smenu li a.active').removeClass('active');
    $('#loader').show();
    var id_of_selected = $(this).attr('href');
    link_to_load = id_of_selected.replace(/^#/, '');

    if (id_of_selected.length) {
      $("#dframe").attr('src', link_to_load);
      $(this).addClass('active');
    }
  });

    $('#dframe').on('load', function () {
      $('#loader').hide();
    });
});
</script>

 

DEMO | DOWNLOAD

Post Tags:
Join the Newsletter

Sign up for our personalized daily newsletter

Kodesmart

#1 GUIDE TO DRUPAL, WORDPRESS, CSS AND CUSTOM CODING | BEGINNER TO PRO