0

I have a customized content management system. I'm using CKEditor to change the content. I want a live preview of the webpage when I click submit button after edit. I'm using iframe but it shows horizontal and vertical scroll bars because the webpage is bigger in size.

I want to do it in a specific dimension to view a complete page means render the webpage in a smaller size. Even it is a image of webpage I don't have any problem.

halfer
  • 19,824
  • 17
  • 99
  • 186
sambit.albus
  • 352
  • 1
  • 7
  • 26

1 Answers1

3

I love css3please:

<style type="text/css">
.box_scale {
              width:300px;
             height:300px;
  -webkit-transform: scale(0.5);  /* Saf3.1+, Chrome */
     -moz-transform: scale(0.5);  /* FF3.5+ */
      -ms-transform: scale(0.5);  /* IE9 */
       -o-transform: scale(0.5);  /* Opera 10.5+ */
          transform: scale(0.5);
             filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */
                     M11=0.9999619230641713, M12=-0.008726535498373935, M21=0.008726535498373935, M22=0.9999619230641713,SizingMethod='auto expand');
}

</style>

<div class="box_scale">
    <iframe width="300" height="300" src="http://example.org"></iframe>
</div>

The only thing besides selecting a scale was to add a width and height to the div. of course, you might want to add some rules for transform origins as well. See also: https://developer.mozilla.org/en/CSS/transform

JayC
  • 7,053
  • 2
  • 25
  • 41
  • With the addition of some PHP, the scale could be coordinated with the reduction in size of the iFrame. – Peter Jun 01 '12 at 17:58
  • Did not work :( Not sure, if I am missing anything. The only thing I see is half the size of iframe, but no full rendering.. – Nitesh Mar 10 '13 at 07:21
  • Some sites now, (including mdn) now seem to have redirects, do not deliver code, or hide content if the content *appears* to be in an iframe. Changing to example.org – JayC Mar 11 '13 at 15:54
  • I can confirm that using `` from http://htmledit.squarefree.com/ retrieves no content. On the network tab, Chrome says the `GET` request actually is *cancelled*. That's some interesting HTTP-Kung-Fu. – JayC Mar 11 '13 at 16:03
  • Actually, since I'm still unable to see how MDN is able to deny, either at the server-side or some other way, showing content in an iframe, I opened up a new question: http://stackoverflow.com/questions/15344187/how-does-it-appear-that-mdn-can-detect-a-request-from-an-iframe-on-the-server-si – JayC Mar 11 '13 at 17:25