jQuery Webpage Preview [duplicate]

by

If you actually want a preview of the live page, you’ll have to use an iframe. If you just want an image preview, Fulvio’s suggestion will work, but won’t show a “live” preview (i.e., no animations that you would normally see, if the user is logged in to a page, you will only see the front page, etc). It is possible to actually scale the contents of an iframe so that it’s a thumbnail, thus achieving the effect you want. For example:

<html>
<head>
<!--[if IE]>
<style>
#frame {
    zoom: 0.2;
}
</style>
<![endif]-->
<style>
#frame {
    width: 800px;
    height: 520px;
    border: none;
    -moz-transform: scale(0.2);
    -moz-transform-origin: 0 0;
    -o-transform: scale(0.2);
    -o-transform-origin: 0 0;
    -webkit-transform: scale(0.2);
    -webkit-transform-origin: 0 0;
}
</style>
</head>
<body>
<iframe id="frame" src="http://www.bing.com">
</iframe>
</body>
</html>

Have fun 🙂

Copy and paste into your browser’s URL bar to preview:

data:text/html,<html><head><!--[if IE]><style>iframe{zoom:0.2;}</style><![endif]--><style>iframe{width:800px;height:520px;border:none;-moz-transform:scale(0.2);-moz-transform-origin:0 0;-o-transform:scale(0.2);-o-transform-origin:0 0;-webkit-transform:scale(0.2);-webkit-transform-origin:0 0;}</style></head><body><iframe src="http://www.bing.com"></iframe></body></html>

More Related Contents:

  1. rocking effect in jquery? [closed]
  2. Twitter bootstrap remote modal shows same content every time
  3. Bootstrap carousel multiple frames at once
  4. jQuery Validate – require at least one field in a group to be filled
  5. jQuery UI Autocomplete widget search configuration
  6. fullcalendar multiple cell select on mobile device?
  7. Set width of a “Position: fixed” div relative to parent div
  8. jQuery counter to count up to a target number
  9. How to Extend Twitter Bootstrap Plugin
  10. Remember which tab was active after refresh
  11. How to use a jQuery plugin inside Vue
  12. How can I display a tooltip on an HTML “option” tag?
  13. jqGrid iterate over the grid Data in a subgrid
  14. jQuery multiselect drop down menu
  15. jQuery: How can I show an image popup onclick of the thumbnail?
  16. Can jQuery add commas while user typing numbers?
  17. How to move child element from one parent to another using jQuery [duplicate]
  18. How to launch jQuery Fancybox on page load?
  19. jQuery file upload: Is it possible to trigger upload with a submit button?
  20. jQuery datepicker- 2 inputs/textboxes and restricting range
  21. How can I check if a jQuery plugin is loaded?
  22. Validating array inputs using jquery validation plugin
  23. Change Placeholder Text using jQuery
  24. Can someone explain how to implement the jQuery File Upload plugin?
  25. How add spaces between Slick carousel item
  26. How to sort by Date with DataTables jquery plugin?
  27. Looking for a JQuery plug-in similar to Accordion, but that allows multiple sections open at once [closed]
  28. jQuery onchange/onfocus select box to display an image?
  29. In-cell data bars in jqGrid – possible or not?
  30. Why return this.each(function()) in jQuery plugins?

Leave a Comment