preview of Div Content

Question

In my Code, one main div is there. main div's width and height is fixed. and I want to create the preview of the content of main div. what should I do to create preview of Div ?.

<div id="imageContainer" style="width: 680px; height: 482px;" align="center">
innerHTML Content.

Another divs, images etc...

</div>

I have minimized the height and width of main div but the content is not shrinking according to height and width of main div.

Answer 1

You can anyway create another css class ... and give reduced properties to the inner elements and then change the class of div to show the preview through javascript.

for ex:

.original {
   font-size: 30px;
}

.preview {
   font-size: 10px; # if the preview is 1/3 of original
}

OR google if there are any ready-made methods for doing this.

Answer 2

My javascript is a little rusty but I think you need to duplicate the div and everything in it. Then put the new div wherever you want the preview to appear, and style it however you want it to look, shrinking the height and width of the div, the font-size of the content, and also the height/width of any images it contains. I would suggest using relative sizes (For example 30% instead of 8px) I think you will get more consistent results that way.