Creating a smaller replica of a div?

Question

I have a div full of text, photos, etc. It is generated dynamically, and usually around 10:1 ratio height:width.

I want to create a replica of this div on the same page, but making it 1/8 of the width.

EDIT: All of the contents should also be at 1/8 scale.

This thin tall overview div doesn't need to be able to be interacted with, just accurately show the contents of the other larger div.

Any Ideas how I would/should do this?

Thanks!

Answer 1

You can use the jQuery clone() method to make the copy and css() method to change the width.

  var w = $("#thediv").width();
  var clone = $('#thediv').clone().css("width", w/8);

Then you can use the append() method to place this clone into some new position on your page. Note however, that the new width will depend on the content of the div that you are cloning. So you may have to set the overflow and so on to make sure it works properly.

Answer 2

Just an idea, you may try out the -webkit-transform and other such css styles on a jQuery .clone() of your larger div. Like,

$('#theDiv').clone().css('-webkit-transform', 'scale(.125, .125)');

Not sure if that would work, but its an idea :)

Edit I know this might not work on all browsers out there, but it will save you the trouble of resizing all the child elements, I believe.