Question

I have a page with a 2 column structure.

I want to make one of the two column (a div) resizable using jQuery resize function (http://api.jquery.com/resize/) but i have two problems:

1. when the left column is resized I want the right one to change a css parameter in relation to how many px the other column has been resized: for example I want to add 3px to the margin of the right column when the left column grows by 3px?

2. I want to make the div resizable only horizontally and to resize it not using the “resize are” in the bottom-right corner but using a line on the border.

I’ll only post the css code because the html one seems to be “executed”, but there are simple two div .sidebar and .content

.sidebar{
width: 220px;
float: left;
position: fixed;
margin-bottom: 0px;
padding-bottom: 0px;

overflow:auto;
}

.content{
float: right;
position: fixed;
padding-left: 220px;
overflow: auto;
}

Answer 1

I dont understand your problem, but I guess that you are actually using jQuery UI Resizable (http://jqueryui.com/demos/resizable/), instead of jquery resize (which is an event and not a feature to resize elements). If that is the case, you can define a callback function, that can be fired when your resizing is done.

something like this:

var onResized = function(){
  $("#seconddiv").css("width", 300 + (300-$("#yourdiv").width()) +"px" );

};

$("#yourdiv").resizable(stop:onResized);

In this example, i assume your divs are by default 300 pixels with, so the same amount that one div has been increased, is substracted from the other.

If you dont want to allow vertical resizing, you can add a callback like this:

$("#yourdiv").resizable({
    resize: function(event, ui) {
        ui.size.height = ui.originalSize.height;
    }
});

or you can set minHeight and maxHeight to the same value like this:

$("#yourdiv").resizable({
    minHeight: 555, maxHeight:555
});

If you are not using Resizable, then I dont understand your question.

Hope it helps 🙂