yramagicman/SideScroller.js

## sidescroll.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
*{
    margin:0;
    padding:0;
}
body{
    overflow-x:hidden;
}
.page {
    overflow:hidden;
    position:absolute;
    top:0;
    bottom:0;
    width: 100%;
    border: 1px solid black;
}
.prev, .next{
    position: fixed;
    top: 45%;
    background: white;
    padding: 10px;
}
.prev{
    left: 10px;
}
.next{
    right: 10px;
}
#page-1{
    background: url('http://fc04.deviantart.net/fs71/f/2011/008/5/a/steampunk_by_zy0rg-d36p7u1.png');
}
#page-2{
    background: url('http://thepaperwall.com/wallpapers/sci-fi/big/big_4c54571b2d0177b51c3c50c5e60c5e53c96d6537.jpg');
}
#page-3{
    background: url('http://thepaperwall.com/wallpapers/video_games/big/big_fafcced1c0c107f6fa3066839f53aed85b783a59.jpg');
}
#page-4{
    background:url('http://thepaperwall.com/wallpapers/fantasy/big/big_85b3812da9abc681d504d86859d2160840e6846a.jpg');
}
.lazy{
    background:none !important;
}
-->
</style>

</head>

<body>
<div class="page">
1
</div>
<div class="page">
2
</div>
<div class="page">
3
</div>
<div class="page">
    4
</div>
<a href="#page-1" class="prev">prev</a><a href="#page-2" class="next">next</a>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="SideScroller.js" type="text/javascript" charset="utf-8">
</script>
</body>
</html>

## SideScroller.js
(function() {
    var divs = $('.page'),
        $next = $('.next'),
        $prev = $('.prev'),
        that = this,
        loc, page;
    for (var i = divs.length - 1; i >= 0; i--) {
        var z = i + 1;
        divs[i].style.left = i * 100 + '%';
        divs[i].id = 'page-' + (i + 1);
        $(divs[i]).addClass('lazy');
    }
    page = window.location.hash;
    if (!page) {
        page = '#page-1';
        $prev.hide();
    }
    $(page).removeClass('lazy');
    $next.click(function() {
        loc = $next.attr('href');
        page = window.location.hash;
        if (!page) {
            page = '#page-1';
        }
        $(page).next('.page').removeClass('lazy');
        if (page) {
            var nextPage = function() {
                var add = parseInt(page.substr(6, 2)) + 1;
                if (add < divs.length) {
                    $prev.show();
                    return add;
                } else {
                    $next.hide();
                    return divs.length;
                }
            };
            $next.attr('href', '');
            $next.attr('href', '#page-' + nextPage());
        } //end if page
    });
    $prev.click(function() {
        loc = $prev.attr('href');
        page = window.location.hash;
        $(page).prev('.page').removeClass('lazy');
        if (page) {
            var prevPage = function() {
                var subtract = parseInt(page.substr(6, 2)) - 1;
                if (subtract > 1) {
                    $next.show();
                    return subtract;
                } else {
                    $prev.hide();
                    return 1;
                }
            };
            $prev.attr('href', '');
            $prev.attr('href', '#page-' + prevPage());
        }
    });
})();
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Untitled Document</title>
	<style type="text/css">
	<!--
	*{
	margin:0;
	padding:0;
	}
	body{
	overflow-x:hidden;
	}
	.page {
	overflow:hidden;
	position:absolute;
	top:0;
	bottom:0;
	width: 100%;
	border: 1px solid black;
	}
	.prev, .next{
	position: fixed;
	top: 45%;
	background: white;
	padding: 10px;
	}
	.prev{
	left: 10px;
	}
	.next{
	right: 10px;
	}
	#page-1{
	background: url('http://fc04.deviantart.net/fs71/f/2011/008/5/a/steampunk_by_zy0rg-d36p7u1.png');
	}
	#page-2{
	background: url('http://thepaperwall.com/wallpapers/sci-fi/big/big_4c54571b2d0177b51c3c50c5e60c5e53c96d6537.jpg');
	}
	#page-3{
	background: url('http://thepaperwall.com/wallpapers/video_games/big/big_fafcced1c0c107f6fa3066839f53aed85b783a59.jpg');
	}
	#page-4{
	background:url('http://thepaperwall.com/wallpapers/fantasy/big/big_85b3812da9abc681d504d86859d2160840e6846a.jpg');
	}
	.lazy{
	background:none !important;
	}
	-->
	</style>

	</head>

	<body>
	<div class="page">
	1
	</div>
	<div class="page">
	2
	</div>
	<div class="page">
	3
	</div>
	<div class="page">
	4
	</div>
	<a href="#page-1" class="prev">prev</a><a href="#page-2" class="next">next</a>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
	<script src="SideScroller.js" type="text/javascript" charset="utf-8">
	</script>
	</body>
	</html>
	(function() {
	var divs = $('.page'),
	$next = $('.next'),
	$prev = $('.prev'),
	that = this,
	loc, page;
	for (var i = divs.length - 1; i >= 0; i--) {
	var z = i + 1;
	divs[i].style.left = i * 100 + '%';
	divs[i].id = 'page-' + (i + 1);
	$(divs[i]).addClass('lazy');
	}
	page = window.location.hash;
	if (!page) {
	page = '#page-1';
	$prev.hide();
	}
	$(page).removeClass('lazy');
	$next.click(function() {
	loc = $next.attr('href');
	page = window.location.hash;
	if (!page) {
	page = '#page-1';
	}
	$(page).next('.page').removeClass('lazy');
	if (page) {
	var nextPage = function() {
	var add = parseInt(page.substr(6, 2)) + 1;
	if (add < divs.length) {
	$prev.show();
	return add;
	} else {
	$next.hide();
	return divs.length;
	}
	};
	$next.attr('href', '');
	$next.attr('href', '#page-' + nextPage());
	} //end if page
	});
	$prev.click(function() {
	loc = $prev.attr('href');
	page = window.location.hash;
	$(page).prev('.page').removeClass('lazy');
	if (page) {
	var prevPage = function() {
	var subtract = parseInt(page.substr(6, 2)) - 1;
	if (subtract > 1) {
	$next.show();
	return subtract;
	} else {
	$prev.hide();
	return 1;
	}
	};
	$prev.attr('href', '');
	$prev.attr('href', '#page-' + prevPage());
	}
	});
	})();