Question

I’m trying to create a page layout like This

But I am not sure how to achieve it. What I mean; in that page you can see there are two areas in the page and you can resize the areas using the bar between them.

Thanks!

Answer 1

Yes, it’s certainly possible. There’s probably a JQuery or MooTools plugin out there that does it. Otherwise, I rolled you a simple example using JQuery that you can play with. See this JSFiddle.

Basically the HTML is like this:

<div id="left">Left column!</div>
<div id="verticalresizer">&nbsp;</div>
<div id="right">Right column!</div>​

And then they are positioned absolutely (extra CSS from example cut for simplicity’s sake):

html, body { 
    height: 100%; 
}

#left { 
    width: 200px; /* default starting width */
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
}
#right { 
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 204px; /* width of left col + 4 pixel wide resizer */
}
#verticalresizer { 
    background-color: black; /* so it can be seen */
    width: 4px;
    height: 100%;
    cursor: col-resize;
    position: absolute;
    top: 0;
    left: 200px; /* width of left col */
    bottom: 0;
}

​
Then the JavaScript. First an explanation. Pretty much the code listens for the user to click down on the vertical resizer. Once that happens, it listens for the mouse moving. Every time the mouse moves, resize the columns accordingly and keep the slider underneath the mouse. When the user lets go of the mouse (mouseup), stop listening/resizing.

var left = 200; // starting left col width
var isClicked = false;
var startX = 200; // starting horizontal position of resizer bar
var isMouseDown = false;

// attach listeners to the document itself
$(document).mousedown(function() {
    isMouseDown = true;
}).mouseup(function() {
    isMouseDown = false;
}).mousemove( function(event) {
    if (isClicked && isMouseDown) {
        var newX = event.pageX;

        if (startX != newX) {
            left += (newX - startX);
            if (left < 0) {
                left = 0; // keep from moving the slider beyond the left edge of the screen
                newX = 0;
            }
            setWidthOfLeftColumn( left );
            startX = newX;
        }
    }
});

// attach click listeners to the resizer slider
$("#verticalresizer").mousedown( function(event) {
    isClicked = true;
    startX = event.pageX;
}).mouseup( function (event) {
    isClicked = false;  
});

// function to resize everything
function setWidthOfLeftColumn( value ) {
    $("#left").css("width", "" + left + "px");
     $("#right").css("left", "" + (left + 4) + "px");
     $("#verticalresizer").css("left", "" + left + "px");
 }