CODEWITHSUNDEEP
jquerycssjquery-uijquery-ui-resizable
JarroVGIT
JarroVGIT

Reputation: 5324

How to resize a div, within a parent-div, with parentdiv also resizing?

I'm fairly new to jQuery, but I like it a lot! Thumbs up to the developers! :)

My question is about the resizable function. The situation is as follows:

I have a div (parent-div), and within I have 5 other divs (directly next to each other, let's call them div-a through div-e). The parent-div represents a timespan (the longer it is, the more time it represents), and the five childrendiv's represent the five stages within that timespan.

Now, I want to be able to resize (let's say) child-div-c (the fase it represents takes more time). The div's D and E must shift to the left while i resize C, because their fases are just happening later, not shorter or longer. The parent-div must resize as well when i'm resizing C, because the total timespan will be longer.

I hope this is clear. The questions are:

How to move divs next to the resized div? How to resize the parent div?

I am aware of the $(".selector).resizable ({}) event, and I got that working. But when I have 2 div's next to eachother, and I'm resizing one of them, it's not moving allong.

Thanks in advance!

EDIT: Despite this question was downvoted, I have the answer found and made a JSfiddle. See my comment on the accepted answer.

The answer to my second question was this:

$(".selector").resizable( {
       resize: function(event, ui) {
            var widthTotal = 0;
            $(".travelcontainer > .travelfase").each(function(index, element) {
                widthTotal = $(this).innerWidth() + widthTotal;
            });
});

Hope this will help someone else as well :)

Upvotes: 1

Views: 2109

Answers (2)

Horen
Horen

Reputation: 11382

http://jsfiddle.net/MjSfy/1/ it's pretty straight forward. Just align the child-divs with float:left or display:inline-block. Then whenever you change the width of one child-div the parent will adjust as well.

Update:

Use something like this to set the width of a div at runtime:

$("#div-a").css("width", "50px");​

Updated fiddles: http://jsfiddle.net/MjSfy/2/ and http://jsfiddle.net/MjSfy/3/

Upvotes: 2

spacious
spacious

Reputation: 221

If your child divs are being displayed using float:left or display:inline-block you shouldn't have to do anything to move the children after the resizing a preceding child.

If your parent div has a fixed width, you'll have to calculate the total of the children and set (or animate) that manually.

Upvotes: 3

Related Questions