Making a smaller copy of a div?

Question

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

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

EDIT: All content should also be 1/8 scale.

This thin tall overview div doesn't have to be interoperable, just show exactly the contents of another larger div.

Any ideas how I should / should have done this?

Thanks!

Answer 1

Just an idea, you can try -webkit-transform and other similar css styles on jQuery .clone() your larger div. How,

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

Not sure if this will work, but his idea is :)

Change I know that this may not work in all browsers, but it saves you from having to resize all the children, I believe.

Answer 2

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); 

You can then use the append () method to place this clone in a new position on your page. Note, however, that the new width will depend on the content of the div you are cloning. Therefore, you may need to set an overflow, etc., to make sure that it works correctly.

Answer 3

On top of my head

 $origDiv = $('#originaldiv'); $cloneDiv = $origDiv.clone(true); 

Then set all the individual size-sensitive properties of $ cloneDiv to 1/8 of the original. Do something like iterate over the images to calculate their new height / width.

It's crazy to do this with jQuery, but do as much as you can with HTML and CSS and use jQuery for more dynamic elements.