Advanced Search

Return to Snippet

Revision: 40568
at February 3, 2011 22:15 by demwunz
Initial Code 
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
	<meta charset="utf-8">	
	<style>
		html body{width:100%;height:100%;padding:0px;margin:0px;overflow:hidden;font-family:arial;font-size:10px;color:#6e6e6e;background-color:#000}
		#header-bar{height:40px;background-color:#000;border-bottom:1px solid #191919;z-index:100;line-height:40px;margin-bottom:1px;padding-left:20px;}
		#preview-frame{width:100%;background-color:#fff}
	</style>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
	<script>!window.jQuery && document.write('<script src="js/jquery-1.4.4.min.js"><\/script>')</script>
	<script type="text/javascript"> 
	var calcHeight = function() {
		var headerDimensions = $('#header-bar').height();
		$('#preview-frame').height($(window).height() - headerDimensions);
	}
	$(function() {
		calcHeight();
		var iframe = $('#preview-frame'),
		selector = $("#switcher"),
		state,
		selected = state;
		selector.change(function(e){
			state = $(this).val();
			iframe.attr('src', state);
			e.preventDefault();
		});
		$("#refresh").click(function(e) {
				iframe.attr({
					src: state
			});
			e.preventDefault();
		});
	});
	$(window).resize(function() {
		calcHeight();
	}).load(function() {
		calcHeight();
	});	
	</script>
</head>
<body> 
	<div id="header-bar">     
		<div class="switcher"> 
			<select name="switcher" id="switcher">
				<option value="page.html">Page</option>
				<option value="another-page.html">Another page</option>
			</select>
			<button type="button" id="refresh">Refresh</button>
		</div> 
	</div> 
	<iframe id="preview-frame" src="homepage.php" name="preview-frame" frameborder="0" noresize="noresize"></iframe> 
</body>
</html>
Initial URL 









Initial Description





This snippet will allow you to create a template browser for when you need to show multiple pages quickly. simply add the new pages into the select dropdown options and you're away.









Initial Title





Static template switcher









Initial Tags





html, jquery









Initial Language





jQuery