1.2.4 proportional scrolling layout
JavaScript
window.addEvent('domready',function()
{
var scr_width = window.getSize().x;
var scr_height = window.getSize().y;
var wrapper_width = $('wrapper').getSize().x;
var head_height = $('wrapper').getElementById('header') ? $('wrapper').getElementById('header').getSize().y : 0;
var foot_height = $('wrapper').getElementById('footer') ? $('wrapper').getElementById('footer').getSize().y : 0;
var main_col_scroll_height = $('wrapper').getElementById('main').getScrollSize().y;
$$('html').setStyles(
{
overflow: 'hidden',
margin: 0,
padding: 0,
border: 0
});
$$('body').setStyles(
{
overflow: 'hidden',
margin: 0,
padding: 0,
border: 0
});
var scroll_bar = new Element('div');
scroll_bar.inject($('wrapper'), 'after');
var scroll_bar_content = new Element('div');
var cols = $('wrapper').getElements('div.column');
var scroll_bar_scroll_height = main_col_scroll_height+head_height+foot_height;
scroll_bar_content.setStyles(
{
height: scroll_bar_scroll_height,
width: scroll_bar.getSize().x
});
scroll_bar_content.inject(scroll_bar);
scroll_bar.setStyle('overflow-y', 'scroll');
scroll_bar.scrollTo(scroll_bar.getScrollSize().x,0);
var scroll_bar_width = scroll_bar.getScroll().x;
$('wrapper').setStyles(
{
height: scr_height,
position: 'absolute',
top: 0,
left: (scr_width-wrapper_width-scroll_bar_width)/2,
overflow: 'hidden'
});
scroll_bar.setStyle('overflow-x', 'hidden');
scroll_bar.setStyles(
{
float: 'right',
width: scroll_bar_width+1,
height: scr_height,
position: 'absolute',
top: 0,
right: 0
});
cols.each(function(col)
{
col.setStyles(
{
overflow: 'hidden',
height: scr_height
});
});
var h = head_height*(scroll_bar_scroll_height-scr_height)/scroll_bar_scroll_height;
var m = main_col_scroll_height*(scroll_bar_scroll_height-scr_height)/scroll_bar_scroll_height;
var f = foot_height*(scroll_bar_scroll_height-scr_height)/scroll_bar_scroll_height;
scroll_bar.addEvent('scroll', function()
{
if(scroll_bar.getScroll().y <= h)
{
cols.each(function(col)
{
col.scrollTo(0,0);
});
$('wrapper').scrollTo(0,head_height*scroll_bar.getScroll().y/h);
}
else if(scroll_bar.getScroll().y > h && scroll_bar.getScroll().y <= m+h)
{
$('wrapper').scrollTo(0,head_height);
cols.each(function(col)
{
col.scrollTo(0,(col.getScrollSize().y-scr_height)*(scroll_bar.getScroll().y-h)/m);
});
}
else
{
cols.each(function(col)
{
col.scrollTo(0,col.getScrollSize().y);
});
$('wrapper').scrollTo(0,head_height+foot_height*(scroll_bar.getScroll().y-m-h)/f);
}
});
window.document.addEvent('mousewheel', function(e)
{
e.stop();
var step = scroll_bar_scroll_height/100;
scroll_bar.scrollTo(0,scroll_bar.getScroll().y-e.wheel*step);
});
window.addEvent('resize',function()
{
scr_width = window.getSize().x;
scr_height = window.getSize().y;
$('wrapper').setStyle('height', scr_height);
$('wrapper').setStyle('left', (scr_width-wrapper_width-scroll_bar_width)/2);
scroll_bar.setStyle('height', scr_height);
cols.each(function(col)
{
col.setStyle('height', scr_height);
});
});
});
HTML
<head>
<link type='text/css' rel='stylesheet' href='slirk_mootools_layout.css' />
<script type='text/javascript' src='mootools-1.2.4-core-yc.js'></script>
<script type='text/javascript' src='slirk_mootools_layout.js'></script>
</head>
<body>
<div id='wrapper'>
<div id='header'>
...
</div>
<div id='first' class='column'>
...
</div>
<div id='second' class='column'>
...
</div>
<div id='third' class='column'>
...
</div>
<div id='...' class='column'>
...
</div>
<div id='last' class='column'>
...
</div>
<div id='footer'>
...
</div>
</div>
</body>
CSS
* {
margin: 0;
padding: 0;
border: 0;
outline: none;
}
body {
background: #FFF;
text-align: center;
}
#wrapper {
width: 1000px;
background: #FFF;
margin: 0 auto;
text-align: left;
}
#header {
background: #FFF;
}
#footer {
background: #FFF;
clear: both;
}
#first {
width: 150px;
float: left;
}
#second {
width: 200px;
float: left;
}
#third {
width: 200px;
float: left;
}
#... {
width: 100px;
float: left;
}
#last {
width: 350px;
float: left;
}
