Posted By

demwunz on 02/03/11


Tagged

html jquery switcher


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

czehner


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.

  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  

You need to login to post a comment.