JSFiddle - React, Tailwind, and code Playground

by rsmclaug

HTML

<a class="widthOne widthBtn"><img src="files/images/graphics/ico_mobile.png" title="View at mobile size" alt="View at mobile size" /></a>
<a class="widthTwo widthBtn"><img src="files/images/graphics/ico_tablet.png" title="View at tablet size" alt="View at tablet size" /></a>
<br/>

<iframe class="sizeFrame" src="http://www.website.com/" style="width:340px;" frameborder="0"></iframe>

JavaScript

// CHANGE WIDTH
$( ".widthOne" ).click(function() { 
    $('.sizeFrame').css('width', '340px'); 
    $('.sizeFrame')[0].contentWindow.location.reload();
});
$( ".widthTwo" ).click(function() {
    $('.sizeFrame').css('width', '1024px'); 
    $('.sizeFrame')[0].contentWindow.location.reload();
});

// MAKE THE IFRAME 100% HEIGHT
jQuery(document).ready(function(){var height = $(window).height();
         $('iframe').css('height', height)
});