Collapse content around a scale

by Keith Henry

HTML

Scale:
<div id=slider></div>
<div id=outer>
    <div id=inner>text</div>
</div>

CSS

#slider {
    display: inline-block;
    width: 200px;
    height: 16px;
}
#outer {
    margin-top: 10px;
    background-color: blue;
    padding: 0;
    border: 2px dotted #0ff;
}
#inner {
    background-color: red;
    width: 600px;
    height: 400px;
    border: 4px dashed #ff0;
    font-size: 32px;
    color: #fff;
    -webkit-transform-origin: left top;
    -ms-transform-origin: left top;
    transform-origin: left top;
}

JavaScript

function collapseScale(inner, scale) {
    var $inner = $(inner);

    // Set the parent to be the same size
    $inner.parent().css({
        width: $inner.outerWidth() * scale,
        height: $inner.outerHeight() * scale
    });

    var scaleCss = 'scale(' + scale + ')'
    $inner.css({
        '-moz-transform': scaleCss,
        '-webkit-transform': scaleCss,
        'transform': scaleCss
    });
}

$('#slider').slider({
    max: 2,
    min: 0.1,
    value: 1,
    step: 0.1,
    change: function (event, ui) {
        collapseScale('#inner', ui.value);
    }
});