Sliding Screens 2

Fullscreen horizontally-sliding DIVs, with fixed-position navigation. This version scrolls on X and Y axes. Finds 'screen' position by named anchors.

by the_voder

HTML

<div id="container">
    <ul id="navigation">
        <li><a href="#screen1" class="navlink">Screen 1</a></li>
        <li><a href="#screen2" class="navlink">Screen 2</a></li>
        <li><a href="#screen3" class="navlink">Screen 3</a></li>
        <li><a href="#screen4" class="navlink">Screen 4</a></li>
    </ul>
    <div id="screenwrapper">
        <div id="screen1" class="screens"><a name="screen1"></a>
            <div class="screencontent">Screen 1</div>
        </div>
        <div id="screen2" class="screens"><a name="screen2"></a>
            <div class="screencontent">Screen 2</div>
        </div>
        <br class="clearfloat" />
        <div id="screen3" class="screens"><a name="screen3"></a>
            <div class="screencontent">Screen 3</div>
        </div>
        <div id="screen4" class="screens"><a name="screen4"></a>
            <div class="screencontent">Screen 4</div>
        </div>
    </div>
</div>

CSS

body, html {
    height:100%;
    margin: 0;
}
.clearfloat {
    clear:both;
}
ul#navigation {
    position: fixed;
    left: 20px;
    top: 20px;
    z-index: 999;
    padding: 10px;
    background-color: #333;
}
ul#navigation li a:link, ul#navigation li a:visited, ul#navigation li a:active {
    text-decoration: none;
    color: #666;
}
ul#navigation li a:hover {
    text-decoration: underline;
}
.navcurrentpage {
    background-color: white;
}
#container {
    margin: 0;
    padding: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
}
#screenwrapper {
    margin: 0;
    padding: 0;
    position: relative;
    height: 100%;
    width: 400%;
    left: 0px;
}
.screens {
    margin: 0;
    padding: 0;
    float: left;
}
#screen1 {
    background-color: red;
}
#screen2 {
    background-color: green;
}
#screen3 {
    background-color: blue;
}
#screen4 {
    background-color: yellow;
}
.screencontent {
    width: 200px;
    margin: 50px auto;
    text-align: center;
}

JavaScript

///////////////
// VARIABLES //
///////////////

// Global variable to store name of named anchor for current 'screen'
// (note substring() function to remove initial '#' character)
var currentscreenaname = $('a.navlink').first().attr('href').substring(1);

///////////////
// FUNCTIONS //
///////////////

// Resize 'screens' DIVs and container
function resizescreens() {
    // Resize container DIV (assuming 'screens' are arranged in 2x2 grid)
    $('#screenwrapper').width($(window).width() * 2).height($(window).height() * 2);
    // Resize 'screen' DIVs
    $('.screens').width($(window).width()).height($(window).height());
    
    // Reposition container
    var scrollpos = getscrollpos(currentscreenaname);
    $('#screenwrapper').css({
        top:  -scrollpos.top,
        left: -scrollpos.left,
    });
}

// Get relative position of named anchor
function getscrollpos(aname) {
    return $('a[name="' + aname + '"]').position();
}

///////////////////
// INITIAL SETUP //
///////////////////

// Set initial sizes
resizescreens();

// Set current class on first navlink
$('a.navlink').first().addClass('navcurrentpage');

/////////////
// ACTIONS //
/////////////

// Resize DIVs if browser window resized
$(window).resize(function () {
    // Call function
    resizescreens();
});

// Run on navlink click
$('a.navlink').click(function () {
    // Get name of current screen from navlink HREF attribute value, removing leading '#'
    currentscreenaname = $(this).attr('href').substring(1);
    // Call function to get position of matching named anchor
    var scrollpos = getscrollpos(currentscreenaname);
    
    // Clear current class from all navlinks
    $('ul#navigation li a').removeClass('navcurrentpage');
    // Add current class to clicked navlink
    $(this).addClass('navcurrentpage');
    
    // Animate screens container DIV position
    /*
    // Animate X and Y axes simultaneously
    $('#screenwrapper').animate({
        top:  -scrollpos.top,
        left:...