I have a parent div with a child div inside. The parent div is using jquery Ui resizable. How can i make the child div inherent the parent div dimensions in 开发者_高级运维real time when parent div is resized.
Here's what i have http://jsfiddle.net/dtxhe/7/
After resize, the child div is not resizing according to it's parent.
You can also use this :
http://jsfiddle.net/dtxhe/11/
Code :
$("#container").resizable({ alsoResize: '#child' });
You need to utilize the resize
event of the resizable object.
http://jsfiddle.net/dtxhe/10/
$("#container").resizable({
resize: function(event, ui) {
var parentwidth = $("#container").innerWidth();
var parentheight = $("#container").innerHeight();
$("#child").css({'width':parentwidth, 'height':parentheight});
}
});
You can change the size of the child to fit parent in the $.resize event. e.g(changed the code to reduce jquery selector calls):
$("#container").resize(function(){
var $this = $(this);
var parentwidth = $this.innerWidth();
var parentheight = $this.innerHeight();
$("#child").css({'width':parentwidth, 'height':parentheight});
});
$("#container").resizable();
$("#container").resize();
Working example: http://jsfiddle.net/Chandu/dtxhe/9/
You must bind to the resize event, like so: http://jsfiddle.net/bWMxm/2/
精彩评论