Advanced Search

Static template switcher

/ Published in: jQuery
Save to your folder(s)
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.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <!DOCTYPE html>
  2. <html lang="en" class="no-js">
  3. <head>
  4. 	<meta charset="utf-8">	
  5. 	<style>
  6. 		html body{width:100%;height:100%;padding:0px;margin:0px;overflow:hidden;font-family:arial;font-size:10px;color:#6e6e6e;background-color:#000}
  7. 		#header-bar{height:40px;background-color:#000;border-bottom:1px solid #191919;z-index:100;line-height:40px;margin-bottom:1px;padding-left:20px;}
  8. 		#preview-frame{width:100%;background-color:#fff}
  9. 	</style>
  10. 	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
  11. 	<script>!window.jQuery && document.write('<script src="js/jquery-1.4.4.min.js"><\/script>')</script>
  12. 	<script type="text/javascript"> 
  13. 	var calcHeight = function() {
  14. 		var headerDimensions = $('#header-bar').height();
  15. 		$('#preview-frame').height($(window).height() - headerDimensions);
  16. 	}
  17. 	$(function() {
  18. 		calcHeight();
  19. 		var iframe = $('#preview-frame'),
  20. 		selector = $("#switcher"),
  21. 		state,
  22. 		selected = state;
  23. 		selector.change(function(e){
  24. 			state = $(this).val();
  25. 			iframe.attr('src', state);
  26. 			e.preventDefault();
  27. 		});
  28. 		$("#refresh").click(function(e) {
  29. 				iframe.attr({
  30. 					src: state
  31. 			});
  32. 			e.preventDefault();
  33. 		});
  34. 	});
  35. 	$(window).resize(function() {
  36. 		calcHeight();
  37. 	}).load(function() {
  38. 		calcHeight();
  39. 	});	
  40. 	</script>
  41. </head>
  42. <body> 
  43. 	<div id="header-bar">     
  44. 		<div class="switcher"> 
  45. 			<select name="switcher" id="switcher">
  46. 				<option value="page.html">Page</option>
  47. 				<option value="another-page.html">Another page</option>
  48. 			</select>
  49. 			<button type="button" id="refresh">Refresh</button>
  50. 		</div> 
  51. 	</div> 
  52. 	<iframe id="preview-frame" src="homepage.php" name="preview-frame" frameborder="0" noresize="noresize"></iframe> 
  53. </body>
  54. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.