kylebragger/sliding_frames.html

## sliding_frames.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<title>Sliding Frames</title>
		<meta name="warning" content="HC SVNT DRACONES" />
		<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/reset/reset-min.css" />
		<style type="text/css">
			div#container { overflow: hidden; visibility: hidden; }
			div#navigation { position: absolute; top: 10px; left: 10px; }
			div#navigation span { cursor: pointer; text-decoration: underline; color: white; }
			ul#frames li { float: left; }
		</style>
	</head>
	<body>
		<div id="container">
			<div id="navigation">
				<span onclick="frame(1)">one</span>
				<span onclick="frame(2)">two</span>
				<span onclick="frame(3)">three</span>
			</div>
			<ul id="frames">
				<li id="frame1" style="background: gray;"></li>
				<li id="frame2" style="background: gold;"></li>
				<li id="frame3" style="background: navy;"></li>
			</ul>
		</div>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.1/mootools-yui-compressed.js"></script>
		<script type="text/javascript">
			/* MooTools "More" */ Fx.Scroll=new Class({Extends:Fx,options:{offset:{x:0,y:0},wheelStops:true},initialize:function(B,A){this.element=this.subject=$(B);this.parent(A);var D=this.cancel.bind(this,false);if($type(this.element)!="element"){this.element=$(this.element.getDocument().body);}var C=this.element;if(this.options.wheelStops){this.addEvent("start",function(){C.addEvent("mousewheel",D);},true);this.addEvent("complete",function(){C.removeEvent("mousewheel",D);},true);}},set:function(){var A=Array.flatten(arguments);this.element.scrollTo(A[0],A[1]);},compute:function(E,D,C){var B=[];var A=2;A.times(function(F){B.push(Fx.compute(E[F],D[F],C));});return B;},start:function(C,H){if(!this.check(arguments.callee,C,H)){return this;}var E=this.element.getSize(),F=this.element.getScrollSize();var B=this.element.getScroll(),D={x:C,y:H};for(var G in D){var A=F[G]-E[G];if($chk(D[G])){D[G]=($type(D[G])=="number")?D[G].limit(0,A):A;}else{D[G]=B[G];}D[G]+=this.options.offset[G];}return this.parent([B.x,B.y],[D.x,D.y]);},toTop:function(){return this.start(false,0);},toLeft:function(){return this.start(0,false);},toRight:function(){return this.start("right",false);},toBottom:function(){return this.start(false,"bottom");},toElement:function(B){var A=$(B).getPosition(this.element);return this.start(A.x,A.y);}});

			var current = 1;
			var scroller = new Fx.Scroll('container',{
				transition: Fx.Transitions.Sine.easeOut,
				duration: 300,
				onComplete: refigure
			});

			function frame(number) {
				scroller.toElement('frame' + number);
				current = number;
			}

			function refigure() {
				var height = window.getHeight();
				var width = window.getWidth();

				var frames = $$('ul#frames li');
				$('frames').setStyle('width',width * frames.length);
				frames.setStyle('width',width);
				frames.setStyle('height',height);

				$('container').setStyle('width',width);
				$('container').scrollLeft = (current * width) - width;
			}

			window.addEvent('resize',function() {
				refigure();
				if(Browser.Engine.gecko) setTimeout(refigure,50);
			});

			refigure();
			$('container').setStyle('visibility','visible');
		</script>
	</body>
</html>
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
	<title>Sliding Frames</title>
	<meta name="warning" content="HC SVNT DRACONES" />
	<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/reset/reset-min.css" />
	<style type="text/css">
	div#container { overflow: hidden; visibility: hidden; }
	div#navigation { position: absolute; top: 10px; left: 10px; }
	div#navigation span { cursor: pointer; text-decoration: underline; color: white; }
	ul#frames li { float: left; }
	</style>
	</head>
	<body>
	<div id="container">
	<div id="navigation">
	<span onclick="frame(1)">one</span>
	<span onclick="frame(2)">two</span>
	<span onclick="frame(3)">three</span>
	</div>
	<ul id="frames">
	<li id="frame1" style="background: gray;"></li>
	<li id="frame2" style="background: gold;"></li>
	<li id="frame3" style="background: navy;"></li>
	</ul>
	</div>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.1/mootools-yui-compressed.js"></script>
	<script type="text/javascript">
	/* MooTools "More" */ Fx.Scroll=new Class({Extends:Fx,options:{offset:{x:0,y:0},wheelStops:true},initialize:function(B,A){this.element=this.subject=$(B);this.parent(A);var D=this.cancel.bind(this,false);if($type(this.element)!="element"){this.element=$(this.element.getDocument().body);}var C=this.element;if(this.options.wheelStops){this.addEvent("start",function(){C.addEvent("mousewheel",D);},true);this.addEvent("complete",function(){C.removeEvent("mousewheel",D);},true);}},set:function(){var A=Array.flatten(arguments);this.element.scrollTo(A[0],A[1]);},compute:function(E,D,C){var B=[];var A=2;A.times(function(F){B.push(Fx.compute(E[F],D[F],C));});return B;},start:function(C,H){if(!this.check(arguments.callee,C,H)){return this;}var E=this.element.getSize(),F=this.element.getScrollSize();var B=this.element.getScroll(),D={x:C,y:H};for(var G in D){var A=F[G]-E[G];if($chk(D[G])){D[G]=($type(D[G])=="number")?D[G].limit(0,A):A;}else{D[G]=B[G];}D[G]+=this.options.offset[G];}return this.parent([B.x,B.y],[D.x,D.y]);},toTop:function(){return this.start(false,0);},toLeft:function(){return this.start(0,false);},toRight:function(){return this.start("right",false);},toBottom:function(){return this.start(false,"bottom");},toElement:function(B){var A=$(B).getPosition(this.element);return this.start(A.x,A.y);}});

	var current = 1;
	var scroller = new Fx.Scroll('container',{
	transition: Fx.Transitions.Sine.easeOut,
	duration: 300,
	onComplete: refigure
	});

	function frame(number) {
	scroller.toElement('frame' + number);
	current = number;
	}

	function refigure() {
	var height = window.getHeight();
	var width = window.getWidth();

	var frames = $$('ul#frames li');
	$('frames').setStyle('width',width * frames.length);
	frames.setStyle('width',width);
	frames.setStyle('height',height);

	$('container').setStyle('width',width);
	$('container').scrollLeft = (current * width) - width;
	}

	window.addEvent('resize',function() {
	refigure();
	if(Browser.Engine.gecko) setTimeout(refigure,50);
	});

	refigure();
	$('container').setStyle('visibility','visible');
	</script>
	</body>
	</html>