jQuery.viewport.JS

Window viewport "screen to thumbs" scrolling navigator

by secretgspot

HTML

<aside id="aside">
    <div class="spacer">
        <h3 title="Pour naviguer écran par écran...">Viewport</h3>
        <nav>
            <ul id="viewport">
                <!--// Plugin insert viewport here //-->
            </ul>
        </nav>
        <a class="top" href="#top" title="Haut de page">Top</a>
    </div>
</aside>

<p>Hydrometer Cask Conditioning Lupulin Craft beer Autolysis Caramel malt. Grainy Lagering Keg Conditioning Tank Conditioning Tank. Pilsner Lambic Solvent-like Berliner Weisse Filter, " 
Imperial Cask." Alpha Acid Yard." Barleywine Malt Extract Lager Chill Haze Noble Hops. Oxygenation Secondary Fermentation; Brewpub Cold filter Pub glass Flute Wheat beer glass.</p>
<p> 
Lauter Filter Helle Fermentation Sparge Lambic Racking Cane Tun, " 
Black Malt Hang." Barley Conditioning Tank Shelf Life Salamanzar Terminal Gravity.</p>
<p> 
Dextrin Mash Shelf Life Berliner Weisse Fruity Lauter Microbrewery Malt Extract. Double Magnum Ester  krug Malt Liquor Lagering Solvent-like. Aroma Hops Lupulin. Lambic, Winy Dry stout. IPA Pasteurization Chill Haze Grist.</p>
<p> 
Centrifugation Imperial;  krug Crystal malt Dry beer Mash. Bright beer Tun Saccharification Dry Hopping Scotch Ale, Carboy Oxidized Dry beer. Musty; Willibecher Dry stout Caramel malt, Lupulin Scotch Ale Dosage Winy Sour? Hop Back Pilsner: Hop Back Hang Original Gravity Enzymes, Racking Craft beer. Kilderkin Helle Alpha Acid. Lauter,  krug Finishing Hops Lauter, Keg, Microbrewery. Mug Cane sugar, Pilsner Mug Dortmunder Racking Cane. All-malt Lambic Brewpub Maltose Sweet. Chill Haze Original Gravity Dosage, Brew Kettle Racking Cane.</p>
<p> 
Shelf Life Oxygenation, Secondary Fermentation Jeroboam Estery. Pub glass Aroma Hops   Mug Pitching." Noble Hops Cask Conditioned Ale Hefe, IPA Chlorophenolic. Pitch Carboy, " 
Becher," Goblet Helle Real Ale: Hang Reinheitsgebot Filter Hop Back Astringent. Dry Hopping Malt Extract Stange, Aroma Hops, Lambic. Berliner Weisse Attenuation Sulfurlike....

CSS

body { 
    background-color: #DDDDDD; 
    font: 20px sans-serif;
    margin:10px;
}

a { color:red; }

.spacer {
    padding: 10px;
}

#aside {
    display:block;
    z-index:250;
    overflow:auto;
    position:fixed;
    width:165px;
    max-height:90%;
    bottom:16px;
    right:16px;
    font:15px/30px Trebuchet, Arial, Verdana;
    color:red;
    border:1px solid rgba(250,250,250,0.2);
    border-radius:8px; -moz-border-radius:8px; -webkit-border-radius:8px; -ms-border-radius:8px; -o-border-radius:8px;
    background:rgb(230,230,230);
    box-shadow:0 5px 10px rgba(60,60,60,0.8),0 0 10px rgba(250,250,250,0.8);
        -moz-box-shadow:0 5px 10px rgba(60,60,60,0.8),0 0 10px rgba(250,250,250,0.8);
        -webkit-box-shadow:0 5px 10px rgba(60,60,60,0.8),0 0 10px rgba(250,250,250,0.8);
        -ms-box-shadow:0 5px 10px rgba(60,60,60,0.8),0 0 10px rgba(250,250,250,0.8);
        -o-box-shadow:0 5px 10px rgba(60,60,60,0.8),0 0 10px rgba(250,250,250,0.8);
}

#viewport { 
    list-style-type:none; 
    margin:0; 
    padding:0; 
    overflow:hidden; 
}
    #viewport li { margin:0; padding:0; float:left; }
    #viewport li a,#viewport ul li a:visited {
        display:block;
        margin:0 0 0.5px 0.5px;
        padding:2px 0px;
        width:22px;
        height:16px;
        line-height:16px;
        font-size:12px;
        font-weight:normal;
        text-align:center;
        color:rgba(5,5,5,0.2);
        text-shadow:0 0.05em 0 rgba(250,250,250,0.6);
        border:1px solid rgba(250,250,250,0.6);
        background:rgba(5,5,5,0.05);
    }
    #viewport li a:hover, #viewport li .current {
        color:rgba(250,250,250,0.9);
        background:rgba(5,5,5,0.3);
        text-decoration:none;
    }

JavaScript

/*
    jQuery.viewport.JS
    Window viewport "screen to thumbs" scrolling navigator
    GPL/MIT/Copyleft - @molokoloco 2011 - http://b2bweb.fr

    * Live JS Fiddle démo : http://jsfiddle.net/molokoloco/Atj8Z/
    * Sources : https://github.com/molokoloco/FRAMEWORK/blob/master/jquery.plugins/jquery.viewport.js
    
    Ex. :
    
        <ul id="viewport">
            <!--// Plugin insert viewport here //-->
        </ul>

        $(document).ready(function() {
            $('#viewport').viewport({tag:'li'});
        });

    Firstly it was implemented in a (larger) code here :

        - Infos : http://www.b2bweb.fr/molokoloco/my-book-readr-v1-12-html5-jquery-polished-page-as-a-book-reader/
        - Demo : http://www.b2bweb.fr/bonus/piratons-la-democratie.html
        - Sources : https://github.com/molokoloco/My-Book-ReadR/
*/

;(function($, window, document, undefined) {
    
    // ----------- UTILITIES... (To put in your framework, outside of this plugin ------------------------------------------ //
    
    // Debug tool
    var db = function() { 'console' in window && console.log.call(console, arguments); },
        _db_ = false; // Wanna print debug in console ?
        
    // Set in cache, intensive use !
    var $window = $(window),
        $document = $(document),
        scrollElement = 'html, body',
        $scrollElement = null;
    
    // Find scrollElement // inspired by http://www.zachstronaut.com/posts/2009/01/18/jquery-smooth-scroll-bugs.html
    $(scrollElement).each(function() { // 'html, body' for setter... window for getter... // window.scrollBy(0,0) is native also
        var initScrollTop = parseInt($(this).scrollTop(), 10);
        $window.scrollTop(initScrollTop + 1);
        if ($(this).scrollTop() == initScrollTop + 1) {
            scrollElement = this.nodeName.toLowerCase(); // html OR body
            if (_db_) db('scrollElement=', scrollElement);
            return false; // Break
        }
    });
    $scrollElement =...