jeffchannell.com

JavaScript Man Page Footer

Posted in JavaScript
2009-06-07 06:02:16 +0000 UTC

Some of you may have noticed the box at the bottom of the screen that keeps track of the page's vertical position. I wrote this in Mootools to sort of mimic some command line Linux tools like "less", "more", and "man".

window.addEvent( 'load', function()
{
    var more = new Element( 'div', {
      'id': 'more'
    }).setStyles({
      'position': 'fixed',
      'bottom': '0px',
      'left': '0px',
      'z-index': '5',
      'color': '#000',
      'font-size': '0.8em',
      'font-weight': 'bold',
      'background-color': 'white',
      'width': '120px',
      'text-align': 'center',
      'opacity': '0.7'
    }).appendText( '' );
    document.body.appendChild( more );
    setInterval( "doMore()", 200 );
});
function doMore()
{
	var bodySize = window.getSize();
	var pct = Math.round( ( bodySize.size.y + bodySize.scroll.y ) / bodySize.scrollSize.y * 100 );
	var txt = pct < 100 ? '--More--('+pct+'%)' : '(END)';
	$E('div#more').setText( txt );
}