<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2>
</div>
</div>
$(function() {
"use strict";
$.fn.copyHeight = function( timer ) {
var $this = $( this );
timer = timer || 2000;
return $this.each(function( index, iframe ) {
var $iframe = $( iframe );
var action = function() {
var $mirror = $( 'html', $iframe.contents() );
var mirrorHeight = $mirror.css( 'height', 'auto' ).outerHeight();
$iframe.css( 'height', mirrorHeight );
};
var timeout = setTimeout(function() {
action( $iframe );
}, timer);
$iframe.load(function() {
clearTimeout( timeout );
action( $this );
});
});
};
$.fn.autoHeight = function( interval ) {
var $this = $( this );
interval = interval || 10000;
return $this.each(function( index, iframe ) {
var $iframe = $( iframe );
var $mirror = $( 'html', $iframe.contents() );
$iframe.copyHeight( 0 );
var cachedHeight = $mirror.outerHeight();
setInterval(function() {
var currentHeight = $mirror.outerHeight();
if ( cachedHeight !== currentHeight ) {
$iframe.copyHeight( 0 );
cachedHeight = currentHeight;
}
}, interval);
});
};
});
$(function () {
var $iframe = $( 'iframe' );
$iframe.autoHeight();
// Test height change:
setTimeout(function() {
for ( var i = 0; i < 2000; i++ ) {
$( 'body', $iframe.contents() )
.append( '<h1>Added content.</h1>' );
}
}, 3000);
});
