gustinmi/timeline.html

## timeline.html
<!DOCTYPE html>
<html>
<head>
    <title>Creating simple page navigator with remote pages</title>
    <style type="text/css">
        div.viewport {
            position: relative;
            border-collapse: collapse;
            width: 800px;
            height: 200px;
            overflow: hidden;
        }
        div.viewport div.content {
            border: 1px solid white;
            position: absolute;
            width: 5000px;
        }
        div.viewport div.content {
            /* IE > 8 */
            transition-timing-function: ease-out;
            transition-property: left;
            transition-duration: 1s;
            /* Opera */
            -o-transition-timing-function: ease-out;
            -o-transition-property: left;
            -o-transition-duration: 1s;
            /* Safari and Chrome */
            -webkit-transition-timing-function: ease-out;
            -webkit-transition-property: left;
            -webkit-transition-duration: 1s;
            /* Firefox 4 */
            -moz-transition-timing-function: ease-out;
            -moz-transition-property: left;
            -moz-transition-duration: 1s;


        }
        div.pages div{
            width: 800px;
            display: inline-block;
        }
        div.content > div {
            display: inline-block;
            width: 800px;
            /*border: 1px solid gray;*/
        }

    </style>
</head>
<body>
    <div class="viewport">
        <div class="content">
            <div>Landing</div>
        </div>
    </div>
    <!--This pages div could be on some other page-->
    <div class="pages" style="display: none">
        <div class="first">First</div>
        <div class="second">Second</div>
        <div class="third">Third</div>
    </div>
    <div id="loader" style="display: none"></div>
    <div>
        <div>
            <input id="btnBack" type="submit" value="Back">
        </div>
        <div>
            <input id="btnForward" type="submit" value="Forward">
        </div>
    </div>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
    "use strict";
    $(document).ready(function () {
        var jqContent = $('div.viewport div.content'),
            jqLoader = $('div#loader'),
            currPosition = 0,
            states = [
                {
                    "order" : 0,
                    "jqSel" : "div.pages div.first",
                    "loaded" : false
                },
                {
                    "order" : 1,
                    "loaded" : false,
                    "jqSel" : "div.pages div.second"
                },
                {
                    "order" : 2,
                    "loaded" : false,
                    "jqSel" : "div.pages div.third"
                },
                {
                    "order" : 3,
                    "loaded" : false,
                    "jqSel" : "div.pages div.last"
                }
            ],
            current = 0;

        jqContent.css('left', currPosition + 'px');

        $('input#btnForward').click(function(e){
            e.preventDefault();
            e.stopImmediatePropagation();
            var loaderExpr;
            current = states[current]["order"] + 1;
            loaderExpr= 'timeline.html?_=' + Date.now() + ' ' +  states[current]["jqSel"]; // load syntax URL [space] SELECTOR
            if (!states[current]["loaded"]){ //load only once
                jqLoader.load(loaderExpr, function() {
                    jqContent.append($('div#loader div'));
                    currPosition = currPosition - 800;
                    jqContent.css('left', currPosition  + 'px');
                    states[current]["loaded"] = true;
                });
            }else{
                currPosition = currPosition - 800;
                jqContent.css('left', currPosition  + 'px');
            }
        });
        $('input#btnBack').click(function(e){
            e.preventDefault();
            e.stopImmediatePropagation();
            current = states[current]["order"] - 1;
            currPosition = currPosition + 800;
            jqContent.css('left', currPosition  + 'px');
        });
    });
</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Creating simple page navigator with remote pages</title>
	<style type="text/css">
	div.viewport {
	position: relative;
	border-collapse: collapse;
	width: 800px;
	height: 200px;
	overflow: hidden;
	}
	div.viewport div.content {
	border: 1px solid white;
	position: absolute;
	width: 5000px;
	}
	div.viewport div.content {
	/* IE > 8 */
	transition-timing-function: ease-out;
	transition-property: left;
	transition-duration: 1s;
	/* Opera */
	-o-transition-timing-function: ease-out;
	-o-transition-property: left;
	-o-transition-duration: 1s;
	/* Safari and Chrome */
	-webkit-transition-timing-function: ease-out;
	-webkit-transition-property: left;
	-webkit-transition-duration: 1s;
	/* Firefox 4 */
	-moz-transition-timing-function: ease-out;
	-moz-transition-property: left;
	-moz-transition-duration: 1s;


	}
	div.pages div{
	width: 800px;
	display: inline-block;
	}
	div.content > div {
	display: inline-block;
	width: 800px;
	/border: 1px solid gray;/
	}

	</style>
	</head>
	<body>
	<div class="viewport">
	<div class="content">
	<div>Landing</div>
	</div>
	</div>
	<!--This pages div could be on some other page-->
	<div class="pages" style="display: none">
	<div class="first">First</div>
	<div class="second">Second</div>
	<div class="third">Third</div>
	</div>
	<div id="loader" style="display: none"></div>
	<div>
	<div>
	<input id="btnBack" type="submit" value="Back">
	</div>
	<div>
	<input id="btnForward" type="submit" value="Forward">
	</div>
	</div>
	<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
	<script type="text/javascript">
	"use strict";
	$(document).ready(function () {
	var jqContent = $('div.viewport div.content'),
	jqLoader = $('div#loader'),
	currPosition = 0,
	states = [
	{
	"order" : 0,
	"jqSel" : "div.pages div.first",
	"loaded" : false
	},
	{
	"order" : 1,
	"loaded" : false,
	"jqSel" : "div.pages div.second"
	},
	{
	"order" : 2,
	"loaded" : false,
	"jqSel" : "div.pages div.third"
	},
	{
	"order" : 3,
	"loaded" : false,
	"jqSel" : "div.pages div.last"
	}
	],
	current = 0;

	jqContent.css('left', currPosition + 'px');

	$('input#btnForward').click(function(e){
	e.preventDefault();
	e.stopImmediatePropagation();
	var loaderExpr;
	current = states[current]["order"] + 1;
	loaderExpr= 'timeline.html?_=' + Date.now() + ' ' + states[current]["jqSel"]; // load syntax URL [space] SELECTOR
	if (!states[current]["loaded"]){ //load only once
	jqLoader.load(loaderExpr, function() {
	jqContent.append($('div#loader div'));
	currPosition = currPosition - 800;
	jqContent.css('left', currPosition + 'px');
	states[current]["loaded"] = true;
	});
	}else{
	currPosition = currPosition - 800;
	jqContent.css('left', currPosition + 'px');
	}
	});
	$('input#btnBack').click(function(e){
	e.preventDefault();
	e.stopImmediatePropagation();
	current = states[current]["order"] - 1;
	currPosition = currPosition + 800;
	jqContent.css('left', currPosition + 'px');
	});
	});
	</script>
	</body>
	</html>