Posted By

demwunz on 02/03/11

Tagged

html
jquery

Versions (?)

Last Edited at 02/03/11 10:15pm

Statistics

Viewed 428 times

Favorited by 0 user(s)

Related snippets

Static template switcher

/ Published in: jQuery

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.

Highlighted TextExpand

<!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>

Report this snippet Tweet