yipo/.gitignore

## .gitignore
/pages.json

## demo.html
<!DOCTYPE html>
<html>
<head>
	<title>demo</title>
</head>
<body onload="demo.textContent=location.search.substr(1);" style="margin: 20px;">
	<div id="demo" style="font: 48pt Verdana, Geneva, sans-serif; color: hsl(220, 20%, 90%);"></div>
</body>
</html>

## index.html
<!DOCTYPE html>
<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>webpage-slide</title>
	<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<iframe id="page" src="" frameborder="0"></iframe>
	<div id="navbar">
		<div class="btn-group">
			<a id="prev" class="btn btn-default">&laquo;</a>
			<div class="btn-group">
				<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
					<span id="title"></span>
					<span class="caret"></span>
				</button>
				<ul id="menu" class="dropdown-menu"></ul>
			</div>
			<a id="next" class="btn btn-default">&raquo;</a>
		</div>
	</div>
	<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
	<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
	<script src="script.js"></script>
</body>
</html>

## pages.json.example
[
	{
		"title":"apple",
		"src":"demo.html?apple"
	},
	{
		"title":"banana",
		"src":"demo.html?banana"
	},
	{
		"title":"cherry",
		"src":"demo.html?cherry"
	}
]

## script.js

$.getJSON('pages.json').done(function (pages) {

	$('#menu').each(function (i,menu) {
		$(pages).each(function (i,page) {
			var link=$('<a>').text(page.title).attr('href','#'+i);
			var item=$('<li>').html(link);
			$(menu).append(item);
		});
	});

	window.onhashchange=function () {
		var index=parseInt(location.hash.substr(1));
		if (isNaN(index)) return location.hash='#0';

		var page=pages[index];
		$('#title').text(document.title=page.title);
		$('#page').attr('src',page.src);

		var update_navbtn=function (id,k) {
			var is_valid=(0<=k&&k<pages.length);
			$(id).attr('disabled',!is_valid).attr('href','#'+(is_valid?(k):''));
		};
		update_navbtn('#prev',index-1);
		update_navbtn('#next',index+1);
	};

	$(window).trigger('hashchange');
});


## style.css

body {
	overflow: hidden;
	text-align: center;
}

iframe {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
}

#navbar {
	margin-top: 20px;
}
	<!DOCTYPE html>
	<html>
	<head>
	<title>demo</title>
	</head>
	<body onload="demo.textContent=location.search.substr(1);" style="margin: 20px;">
	<div id="demo" style="font: 48pt Verdana, Geneva, sans-serif; color: hsl(220, 20%, 90%);"></div>
	</body>
	</html>
	[
	{
	"title":"apple",
	"src":"demo.html?apple"
	},
	{
	"title":"banana",
	"src":"demo.html?banana"
	},
	{
	"title":"cherry",
	"src":"demo.html?cherry"
	}
	]

	$.getJSON('pages.json').done(function (pages) {

	$('#menu').each(function (i,menu) {
	$(pages).each(function (i,page) {
	var link=$('<a>').text(page.title).attr('href','#'+i);
	var item=$('<li>').html(link);
	$(menu).append(item);
	});
	});

	window.onhashchange=function () {
	var index=parseInt(location.hash.substr(1));
	if (isNaN(index)) return location.hash='#0';

	var page=pages[index];
	$('#title').text(document.title=page.title);
	$('#page').attr('src',page.src);

	var update_navbtn=function (id,k) {
	var is_valid=(0<=k&&k<pages.length);
	$(id).attr('disabled',!is_valid).attr('href','#'+(is_valid?(k):''));
	};
	update_navbtn('#prev',index-1);
	update_navbtn('#next',index+1);
	};

	$(window).trigger('hashchange');
	});

	body {
	overflow: hidden;
	text-align: center;
	}

	iframe {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	}

	#navbar {
	margin-top: 20px;
	}