A new great experience for users, web-masters, web-designers and coders generally! Expecially, for bloggers, e-magazine publishers and not alone.

SLIRK Layout
by Angelo Amoroso

Creative Commons License

licensed under a
Creative Commons
Attribution - Share Alike 3.0
Unported License

Creative Commons License

licensed under a
Creative Commons
GNU General Public License

CONTACT

La casa editrice INTERSCIENZE idea, progetta, realizza e pubblica contenuti testuali, grafici, audio, video, informatici e pubblicitari a carattere prevalentemente ma non esclusivamente scientifico, in forma tradizionale (libri, riviste, opuscoli, poster) o mediante tecniche che ne consentano lettura, visione, ascolto, archiviazione e diffusione (supporti magnetici, ottici, trasmissioni multimediali, web), svolgendo inoltre le attività connesse di marketing, ufficio stampa e tipografia.

Please, report BUGS!




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;
}