anselmh/responsive-img-wo-cookies.html

## responsive-img-wo-cookies.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8 />
    <title>Responsive Images using Dynamic Base URL</title>

    <script>
    (function(){
      var assetSubdomain = null;
      if( screen.width < 480 ){
          assetSubdomain = 'tiny';
      }
      else if( screen.width < 960 ){
          assetSubdomain = 'small';
      }
      else if( screen.width < 1024 ){
          assetSubdomain = 'medium';
      }
      else {
          assetSubdomain = 'large';
      }
      if(assetSubdomain){
        document.write('<base href="//' + assetSubdomain + '-images.' + location.host + '/">');
      }
    })();
    </script>

    <style>
      img { possition:absolute; top:-10000px; }
      .pass { color:green; }
      .pass:after { content:" (pass)"; }
      .fail { color:red; }
      .fail:after { content:" (fail)"; }
    </style>
  </head>
  <body>
    <h1>Responsive Images using Dynamic Base URL</h1>
    <p>Proof of concept for <a href="http://blog.keithclark.co.uk/responsive-images-using-cookies/#comment-16">Schepp's comment</a>  on Keith Clark's <a href="http://blog.keithclark.co.uk/responsive-images-using-cookies/">Responsive images using cookies</a>. No cookies needed!!! This works in Firefox and Chrome, but doesn't seem to work in Safari. (<a href="http://jsbin.com/ugodu3/edit">Edit jsbin</a>)</p>
    <p>Image src: <span id=src>Loading…</span></p>
    <p><img src="/images/revert.png"> &lt;- this should NOT look like that -&gt; <img src="http://jsbin.com/images/revert.png"></p>
    <p>Link test: <a id="link" href="./" target="_blank">should leed back to this JSBin again</a></p>
  	<script>
  	window.onload  = function(e){
    var headEl = document.getElementsByTagName('head')[0];
    var baseEl = headEl.getElementsByTagName('base')[0];
    headEl.removeChild(baseEl);

    /*
    var srcEl = document.getElementById('src');
    srcEl.textContent = document.images[0].src;
    srcEl.className += srcEl.textContent.indexOf('-images') != -1 ? 'pass' : 'fail';
    */

    var linkEl = document.getElementById('link');
    linkEl.className += linkEl.textContent.indexOf('-images') == -1 ? 'pass' : 'fail';
};

  	</script>

  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset=utf-8 />
	<title>Responsive Images using Dynamic Base URL</title>

	<script>
	(function(){
	var assetSubdomain = null;
	if( screen.width < 480 ){
	assetSubdomain = 'tiny';
	}
	else if( screen.width < 960 ){
	assetSubdomain = 'small';
	}
	else if( screen.width < 1024 ){
	assetSubdomain = 'medium';
	}
	else {
	assetSubdomain = 'large';
	}
	if(assetSubdomain){
	document.write('<base href="//' + assetSubdomain + '-images.' + location.host + '/">');
	}
	})();
	</script>

	<style>
	img { possition:absolute; top:-10000px; }
	.pass { color:green; }
	.pass:after { content:" (pass)"; }
	.fail { color:red; }
	.fail:after { content:" (fail)"; }
	</style>
	</head>
	<body>
	<h1>Responsive Images using Dynamic Base URL</h1>
	<p>Proof of concept for <a href="http://blog.keithclark.co.uk/responsive-images-using-cookies/#comment-16">Schepp's comment</a> on Keith Clark's <a href="http://blog.keithclark.co.uk/responsive-images-using-cookies/">Responsive images using cookies</a>. No cookies needed!!! This works in Firefox and Chrome, but doesn't seem to work in Safari. (<a href="http://jsbin.com/ugodu3/edit">Edit jsbin</a>)</p>
	<p>Image src: <span id=src>Loading…</span></p>
	<p><img src="/images/revert.png"> <- this should NOT look like that -> <img src="http://jsbin.com/images/revert.png"></p>
	<p>Link test: <a id="link" href="./" target="_blank">should leed back to this JSBin again</a></p>
	<script>
	window.onload = function(e){
	var headEl = document.getElementsByTagName('head')[0];
	var baseEl = headEl.getElementsByTagName('base')[0];
	headEl.removeChild(baseEl);

	/*
	var srcEl = document.getElementById('src');
	srcEl.textContent = document.images[0].src;
	srcEl.className += srcEl.textContent.indexOf('-images') != -1 ? 'pass' : 'fail';
	*/

	var linkEl = document.getElementById('link');
	linkEl.className += linkEl.textContent.indexOf('-images') == -1 ? 'pass' : 'fail';
	};

	</script>

	</body>
	</html>