mrosati84/responsive_iframe_slider.html

## responsive_iframe_slider.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css">
  <style type="text/css">
    #slider {
      width: 100%;
    }
    #debug {
      margin: 15px;
    }
  </style>
</head>
<body>

  <div id="slider"></div>
  <div id="debug">Debug info</div>
  <iframe id="iframe" style="margin-top: 50px;" src="http://foundation.zurb.com/page-templates/feed.html" frameborder="0" width="100%" height="600"></iframe>

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
  <script type="text/javascript" src="https://raw.github.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.min.js"></script>
  <script type="text/javascript">
    (function () {
      var iframe = $('#iframe'),
          debug = $('#debug'),
          updateDebug = function () {
            debug.html(iframe.width() + 'px');
          };
      $('#slider').slider({
        min: 0,
        max: 100,
        slide: function (event, ui) {
          iframe.width((100 - ui.value) + '%');
          updateDebug();
        }
      });
      $(window).on('resize', function () {
        debug.html(iframe.width());
        updateDebug();
      });
    }());
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css">
	<style type="text/css">
	#slider {
	width: 100%;
	}
	#debug {
	margin: 15px;
	}
	</style>
	</head>
	<body>

	<div id="slider"></div>
	<div id="debug">Debug info</div>
	<iframe id="iframe" style="margin-top: 50px;" src="http://foundation.zurb.com/page-templates/feed.html" frameborder="0" width="100%" height="600"></iframe>

	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
	<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
	<script type="text/javascript" src="https://raw.github.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.min.js"></script>
	<script type="text/javascript">
	(function () {
	var iframe = $('#iframe'),
	debug = $('#debug'),
	updateDebug = function () {
	debug.html(iframe.width() + 'px');
	};
	$('#slider').slider({
	min: 0,
	max: 100,
	slide: function (event, ui) {
	iframe.width((100 - ui.value) + '%');
	updateDebug();
	}
	});
	$(window).on('resize', function () {
	debug.html(iframe.width());
	updateDebug();
	});
	}());
	</script>
	</body>
	</html>