Search code examples
javascriptjquerycsstransformscale

vertically positioning content after div transform

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 either:

  • Pushes the content way above top of the div (cutting off content on scale in)

  • Pushes the content way too far down the container (leaving a lot of white space on scale out)

I've tried to call this snippet on DOM ready

$("#zoomMe").css({ 'transform' : 'scale(.50)', 'top' : '-2280px' });

but this only works at specific heights. I was wondering if there was anyway that I can push content to the top of the div even if my container changes heights.

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.

Here is a detailed picture of what I am trying to achieve.

Here is a detailed picture of what I am trying to achieve

HTML

<div id="reportContainer">
    <div id="zoomMe">
        <div id="content1" class="fillerBox">&nbsp;</div>
        <div id="content2" class="fillerBox">&nbsp;</div>
        <div id="content3" class="fillerBox">&nbsp;</div>
        <div id="content4" class="fillerBox">&nbsp;</div>
        <div id="content5" class="fillerBox">&nbsp;</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)' );
});
Solution

  • I believe what you are looking for is transform-origin

    http://css-tricks.com/almanac/properties/t/transform-origin/

    This will enable you to set the point on your element that will stay put as transforms occur. By setting the transform-origin to the top center: you can scale the element and keep its position relative to the top in the same place.