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