created by http://livecoding.io

options.json

{
    "libraries": [],
    "mode": "html",
    "layout": "fullscreen mode (vertical)",
    "resolution": "reset"
}

water.css

/* css goes here */
  .embed-container { 
	position: relative; 
	padding-bottom: 56.25%; 
	padding-top: 30px; 
	margin:15px 0; 
	overflow: hidden; 
	max-width: 100%; 
	height: auto; }
	
  .embed-container iframe, .embed-container object, .embed-container embed { 
	position: absolute; 
	top: 0; 
	left: 0; 
	width: 100%; 
	height: 100%; }

water.html

<!-- html goes here -->	

<div id="embed-container" >
	</div>

water.js

/* javascript goes here */	


var width = $(window).width(); // grab the window width


var smallUrl= "http://graphics.boston.com/multimedia/graphics/andrew/rub/aha.html?gif=/multimedia/graphics/andrew/gifs/stripgif640.gif"

var largeUurl="http://graphics.boston.com/multimedia/graphics/andrew/rub/aha.html?gif=/multimedia/graphics/andrew/gifs/stripgif640.gif"
	
	if (width < 480)
	var src = smallURL;
	else src = largeURL;

	function createIframe(){
		var i = document.createElement("iframe");
		var a = Math.random() + "";
		var t = a * 10000000000000;
		i.src =  t;
		i.scrolling = "auto";
		i.frameborder = "0";
		i.width = "100%";
		i.height = "600px";
		document.getElementById("embed-container").appendChild(i);
	};

water.json

{}