How to resize DIV with its component using Javascript

Question

Dear All,

I have created a html page of two DIV with tab component using jquery. Tab component is resizable and have min/max width. There is a scrollable divider between DIV. But the problem are the components of the div, which are not resizing according to the resized div position, it is overlaping on the other div.

Any suggestion or code will be helpful.

Thanks and regards,

Global

Answer 1

You can use jQuery with jQuery resize plugin (because default jQuery resize event handler only works when event target is window) to resize child divs when parent div has been resized.

Here is an example that will shrink parent div after 2 seconds, causing child div to also shrink:

Javascript:

$(document).ready(function() {
    $('#parent').bind("resize", resizeChild);
    setTimeout(resizeParent, 2000);
});

function resizeChild()
{
    $("#child").css('width', $('#parent').width() - 20);
    $("#child").css('height', $('#parent').height() - 20);
}

function resizeParent() 
{
    $("#parent").css('width', '100px')
    $("#parent").css('height', '100px')  
}

​ HTML:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"&gt;&lt;/script&gt;
<script type="text/javascript" src="http://github.com/cowboy/jquery-resize/raw/v1.1/jquery.ba-resize.min.js"&gt;&lt;/script&gt;
<div id='parent'>
<div id='child'></div>
</div>​

CSS:

#parent {
    width:200px;
    height:200px;
    border:1px solid black;
}

#child {
    width:180px;
    height:180px;    
    border:1px solid black;
}​

Proof of concept here: http://jsfiddle.net/t26ZW/