positioning content after div transform
javascript, jquery, scale, transform
Solution
A nice person on one of my other questions actually answered this, but since someone up-voted my question I guess I will put it here as well.
There is a great CSS option to append a transformed element. This is what I ended up doing thanks to the help of a fellow stackoverflow'r.
-webkit-transform-origin: top center;
-moz-transform-origin: top center;
transform-origin: top center;
Problem
I have content in a div that I am trying to scale according to a user's preferences. I am using Louis Remi's transform.js to do this. However, when I do, it pushes the content either way above the top of the div (cutting off content on scale in) or way far down the container (leaving a lot of white space on scale out). I was wondering if there was anyway that I can push content so that it would affix itself to the top of the div? Here is a jsfiddle example. Right now it is at a .50 scale which shows content being in the middle of the screen leaving a lot of space on top of and bottom of div. HTML ``` <div id="reportContainer"> <div id="zoomMe"> <div id="content1" class="fillerBox"> </div> <div id="content2" class="fillerBox"> </div> <div id="content3" class="fillerBox"> </div> <div id="content4" class="fillerBox"> </div> <div id="content5" class="fillerBox"> </div> </div> </div> ``` CSS ``` #reportContainer { margin: 0;padding:15px;overflow-y:scroll;overflow-x:hidden; border:2px solid black;} .fillerBox { background-color:#ccc;border:1px dashed #000;height:1500px;width:910px;margin:0 auto;margin-bottom:30px; } ``` JS ``` $(document).ready(function() { $("#reportContainer").height($(window).height()-50); $("#zoomMe").css('transform', 'scale(.50)' ); }); ```