1

I'm using jQuery to dynamically scale and zoom a div based on the dimensions of the parent container. However, I'm having a difficult time detecting the height. I have the parent set to auto, but it doesn't detect the change in height as the div rescales.

$(window).load(function () {
    console.log( "window load" );
    function zoomSquare() {
        var $square = $('.square');

        var vh = $square.parent().width(); // Get the height of whatever the parent of square is
        var squareHeight = $square.width(); // Grab the height of .square
        var desiredHeight = Math.round(vh * 0.95);
        var zoom = (desiredHeight / squareHeight);

        //$square.css('zoom', zoom);
        $square.css('-webkit-transform', 'scale(' + zoom + ')');
        $square.css('-moz-transform', 'scale(' + zoom + ')');
        $square.css('-o-transform', 'scale(' + zoom + ')');
        $square.css('transform', 'scale(' + zoom + ')');
    }

    // When the browser is resized
    $(window).on('resize', function () {
        console.log( "resize" );
        zoomSquare();
    });

    // When the page first loads
    $(document).ready(function () {
        console.log( "dom ready" );
        zoomSquare();
    });

});

I have a fiddle here http://jsfiddle.net/sarahwhatsup/33cg5/3/

You can see my background wrapper stays the same height and doesn't expand to fit the scaling div. How do I go about fixing it so the wrapper always fits around the scaled div inside?

user1519225
  • 31
  • 2
  • 4
  • I'm not sure this is possible using CSS3 transforms. Applying a transform doesn't change the size of the DOM element itself (see http://stackoverflow.com/questions/10858523/css-transform-with-element-resizing). You may be able to find alternative solutions that provide the same effect (see http://stackoverflow.com/questions/10627306/scale-zoom-a-dom-element-and-the-space-it-occupies-using-css3-transform-scale) – metadept Mar 31 '13 at 23:53
  • Thanks for the link - I don't think it's going to work for what I'm after though :\ – user1519225 Apr 01 '13 at 03:49
  • Why don't you resize the wrapper div? Right now you are just scaling its children and that's why they are not fitting the wrapper. – hjuster Mar 31 '13 at 23:58
  • The end game is to have divs underneath which will adjust their position based on the height of the div above it (imagine an image gallery with three colums of text underneath). Like in a responsive website how content reflows. – user1519225 Apr 01 '13 at 00:05

1 Answers1

0

i had a similar question, and i guess the solution works here too: http://jsfiddle.net/VTAH4/1/
This solution uses a plugin to detect the re-sizing: Ben Alaman's resize plugin.

$(window).load(function () {

    $.fn.animateHeight = function (container) {
         var thisHeight = $(container).map(function (i, e) {
        return $(e).height();
         }).get();

         return this.animate({
        height: thisHeight
         });
    };

    // When the browser is resized
    $(window).resize(function () {
        $(".square").animateHeight(".wrapper")
    });

    // When the page first loads
    $(document).ready(function () {     
        $(".square").animateHeight(".wrapper")
    });

});
Community
  • 1
  • 1
mahnouel
  • 94
  • 1
  • 1
  • 12