How to make a miniature of a div [closed]

Question

I have a div with text and images, and I want to show a miniature of this div in a different place in the page. Any solutions?

Edit: I want smaller copy of the div, and this should work on IE8, so css3 isn't good solution.

Answer 1

You can try with html2canvas. This script allows you to take "screenshots" of webpages or parts of it.

IE8 requires that you include either FlashCanvas or ExplorerCanvas.

It might not be a pixel-perfect representation, but it might get you close.

Once you have your screenshot you should be able to just shrink the canvas (HTML5 canvas, ExplorerCanvas, or FlashCanvas) down to whatever size you need - note: you may run into problems with anti-aliasing and artifacts in the scaled version ... so some additional work may be needed.

Answer 2

try something like this:

$('#myDiv').clone().appendTo('body').css({'position':'absolute','left':'50px;','top':'300px','transform':'scale(0.5)'})
});

note: as they say, you should check under what browser is user and add the vendor (moz, ms, o, webkit, etc ..) to the css property transform

here you can play a bit with it: http://jsfiddle.net/ZPMNz/11/ (with firefox vendor)

---

But if you need support for ie8, could add a class to the div and declare different styles for it:

 $('#myDiv').clone().appendTo('body').addClass('.thumb')});
    });

and then you have

#myDiv { width:500px;}
#myDiv h1{ font-size:20px;}
#myDiv h2{}
#myDiv p{}

#myDiv.thumb { width:200px;}
#myDiv.thumb h1{ font-size:10px;}
#myDiv.thumb h2{}
#myDiv.thumb p{}

it's more work but has more compatibility