Div Preview Like Thumbnail

I want users on my site to see live preview of a div. For example, there is one big div where user is free to make any changes. I want the user to see a small thumbnail of the same

Solution 1:

One solution is to change the id of the clone, to e.g. "clone" or whatever fits.

$('.big').clone(true).attr('id', 'clone').addClass('small').appendTo("#show");

Solution 2:

I found solution

We use transformation of div using css transform.

var fScaleAmount = 0.5;

   DivObj.css({
    "-moz-transform": "scale(" + fScaleAmount + ")",
    "-moz-transform-origin": "0% 0%",
    "-webkit-transform": "scale(" + fScaleAmount + ")",
    "-webkit-transform-origin": "0% 0%",
    "-ms-transform": "scale(" + fScaleAmount + ")",
    "-ms-transform-origin": "0% 0%",

   });