nafg/responsive.html

## responsive.html
<html>
<!-- Usage:
    file://path/to/responsive.html#<url>,<scalefactor>,<width1>x<height2>,<width2>x<height2>...
    For livereload, it's recommended to generate
        <script src="http://127.0.0.1:35729/livereload.js"></script>
    on your pages, rather than using the browser extension, so that live css reloading can work.
-->
<head>
    <style type="text/css">
        #iframes {
          -webkit-transform-origin: top left;
        }
        iframe {
            display: inline;
            vertical-align: bottom;
            margin: 10px;
            box-shadow: 0 0 0 5px black;
        }
        #zoom, .zoom {
          height: 32px;
          width: 100px;
          font-size: 25px;
        }
    </style>
    <script type="text/javascript">
      function main() {
        var h = location.hash.substring(1).split(",")
        var url = h.shift()
        document.getElementById("zoom").value = h.shift()
        var dims = h.map(function(s) { return s.split("x") })
        window.cont = document.getElementById("iframes")
        dims.forEach(function(d) {
          var w = d.shift()
          var h = d.shift()
          var i = document.createElement("iframe")
          i.style.width = w
          i.style.height = h
          i.src = url
          cont.appendChild(i)
        })
        zoom()
      }
      function zoom() {
        var z = document.getElementById("zoom").value
        cont.style.webkitTransform="scale("+z+","+z+")"
      }
    </script>
</head>
<body onload="main()">
<div>
    <label class="zoom">Zoom <input type="number" value="1.0" step="0.05" id="zoom" onchange="zoom()" /></label>
    | <a href="https://gist.github.com/nafg/5507310">Source</a>
</div>
<div id="iframes"></div>
</body>
</html>
	<html>
	<!-- Usage:
	file://path/to/responsive.html#<url>,<scalefactor>,<width1>x<height2>,<width2>x<height2>...
	For livereload, it's recommended to generate
	<script src="http://127.0.0.1:35729/livereload.js"></script>
	on your pages, rather than using the browser extension, so that live css reloading can work.
	-->
	<head>
	<style type="text/css">
	#iframes {
	-webkit-transform-origin: top left;
	}
	iframe {
	display: inline;
	vertical-align: bottom;
	margin: 10px;
	box-shadow: 0 0 0 5px black;
	}
	#zoom, .zoom {
	height: 32px;
	width: 100px;
	font-size: 25px;
	}
	</style>
	<script type="text/javascript">
	function main() {
	var h = location.hash.substring(1).split(",")
	var url = h.shift()
	document.getElementById("zoom").value = h.shift()
	var dims = h.map(function(s) { return s.split("x") })
	window.cont = document.getElementById("iframes")
	dims.forEach(function(d) {
	var w = d.shift()
	var h = d.shift()
	var i = document.createElement("iframe")
	i.style.width = w
	i.style.height = h
	i.src = url
	cont.appendChild(i)
	})
	zoom()
	}
	function zoom() {
	var z = document.getElementById("zoom").value
	cont.style.webkitTransform="scale("+z+","+z+")"
	}
	</script>
	</head>
	<body onload="main()">
	<div>
	<label class="zoom">Zoom <input type="number" value="1.0" step="0.05" id="zoom" onchange="zoom()" /></label>
	\| <a href="https://gist.github.com/nafg/5507310">Source</a>
	</div>
	<div id="iframes"></div>
	</body>
	</html>