public
Last active

  • Download Gist
sliding_frames.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69
<!--
sliding frames, as seen on normative.com
-->
<!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>

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.