Search code examples
jqueryhtmlnestedscaleabsolute

jQuery scale div contents (nested div)

How can I get the blue box to scale with the red one? (using jQuery-UI)

http://jsfiddle.net/Y54EB/1/

This is the basic code, CSS:

#outer {
    position:relative;
    height:100px;
    width:150px;
    z-index:1;
    background:#F00;
}
#nested {
    position:absolute;
    left:50px; top:20px;
    width:50px; height:20px;
    z-index:2;
    background:#00F;
    cursor:pointer;
}

And HTML:

<div id="outer">
<div id="nested" onclick="$('#outer').effect('scale', {scale:'content',percent:50}, 1000);" />
</div>
Solution

  • I realize this is old, but if I understand you correctly, I was trying to achieve the same thing and came across this jQuery plugin that does the job:

    https://github.com/heygrady/transform/wiki