JSFiddle - React, Tailwind, and code Playground

by zippyskippy

HTML

<div class="alert">Resizing or scrolling this window will add #json to the web address enabling a parent iframe to resize the iframe given the dimensions found in the iframe's src attribute.</div>

<a href="http://fiddle.jshell.net/zippyskippy/RJN3G/show/" target="_blank">demo in new window</a>

<h1><img src="http://www.lipsum.com/images/lorem.gif"></h1>

<h4>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</h4>
<h5>"There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..."</h5>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin velit nibh, id hendrerit sem. Sed at velit in metus porta ornare at id lacus. Mauris nec posuere arcu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean enim dui, lobortis vitae lobortis dapibus, porta vitae mauris. Pellentesque non magna tortor. Duis rutrum egestas neque, vel venenatis libero pretium ac. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In nec pretium lacus. Vestibulum erat tortor, euismod et malesuada non, feugiat vel urna. Pellentesque venenatis nisl nec risus aliquet dignissim. Quisque urna erat, dignissim eget pretium sit amet, porttitor id est. Vestibulum justo tortor, venenatis ac faucibus sed, sagittis feugiat ligula. Ut eleifend, quam ut vehicula sodales, sapien arcu iaculis felis, id pulvinar turpis sapien id odio. Morbi ipsum tellus, faucibus ac fermentum ac, feugiat vitae mi. Aliquam urna elit, vehicula at dapibus non, luctus ut augue.
</p>
<p>
Cras sagittis, neque sit amet vehicula consequat, purus leo ultrices lacus, ut dictum metus lacus fringilla lacus. Nunc porta risus pretium quam accumsan in egestas nibh dictum. Phasellus in erat id odio aliquet hendrerit sed ac mi. Quisque ac elit adipiscing odio auctor aliquet. Morbi eu enim tellus. Donec arcu dui, feugiat sed hendrerit vitae, cursus ut...

CSS

.alert { color: red; font-family:arial; font-size:bigger}

JavaScript

function updateLocation(){

    var loc = window.location.href;
    window.location.href = loc.replace(/#{.*}#/,"") 
    	+ "#{docHeight:"+$(document).height() 
        + ",windowHeight:"+$(window).height()
        + ",scrollHeight:"+$(window).scrollTop()
        +"}#";

};

//setInterval(updateLocation,500);

$(window).resize(updateLocation);
$(window).scroll(updateLocation);

alert( $('.alert').text() );