CODEWITHSUNDEEP
javascripthtmlcss
Mika H.
Mika H.

Reputation: 4329

Adjustable page division boundary

I have two columns in my HTML page. 

<div id="content">
  <div id="left"></div>
  <div id="right"></div>
</div>

Each of them occupies half of the page

#content {
    height: 100%;
}

#left, #right {
    float: left;
    width: 50%;
    height: 100%; 
    overflow: auto;
}

I'd like the boundary between left and right halves to be adjustable by the user. That is, the user can move the boundary to the left or to the right as he/she browses the page. Is it possible to do that somehow?

Upvotes: 3

Views: 542

Answers (2)

icktoofay
icktoofay

Reputation: 128991

Yes, but it requires JavaScript. To apply it, you could of course just set the width of each of the sides:

var leftPercent = 50;
function updateDivision() {
    document.getElementById('left').style.width = leftPercent + '%';
    document.getElementById('right').style.width = (100 - leftPercent) + '%';
}

Now you can adjust the division with, say leftPercent = 50; updateDivision(), but the user isn't going to do that. There are multiple different ways you could present this to the user. Probably the best-suited way would be a little line in the middle they could drag. For this, you could use a little CSS for the positioning:

#content {
    position: relative;
}
#divider {
    position: absolute;
    /* left to be set by JavaScript */
    width: 1px;
    top: 0;
    bottom: 0;
    background: black;
    cursor: col-resize;
    /* feel free to customize this, of course */
}

And then make sure you've got a div with an id of divider in content and update updateDivision to also update the left of divider:

document.getElementById('left').style.left = leftPercent + '%';

Then you just need a little logic to handle the dragging. (Here, I've put all of the elements into appropriately-named variables):

divider.addEventListener('mousedown', function(e) {
    e.preventDefault();
    var lastX = e.pageX;
    document.documentElement.addEventListener('mousemove', moveHandler, true);
    document.documentElement.addEventListener('mouseup', upHandler, true);
    function moveHandler(e) {
        e.preventDefault();
        e.stopPropagation();
        var deltaX = e.pageX - lastX;
        lastX = e.pageX;
        leftPercent += deltaX / parseFloat(document.defaultView.getComputedStyle(content).width) * 100;
        updateDivision();
    }
    function upHandler(e) {
        e.preventDefault();
        e.stopPropagation();
        document.documentElement.removeEventListener('mousemove', moveHandler, true);
        document.documentElement.removeEventListener('mouseup', upHandler, true);
    }
}, false);

You should be able to read it to see how it works, but in short: It listens for when someone presses on the divider. When they do, it'll attach listeners to the page for when they move their mouse. When they do, it updates the variable and calls updateDivision to update the styles. When eventually it gets a mouseup, it stops listening on the page.

As a further improvement, you could make every element have an appropriate cursor style while dragging so your cursor doesn't flash while dragging it.

Try it out.

Upvotes: 4

Max
Max

Reputation: 165

There's nothing in the divisions so nothing will happen. It's like writing:

<h1></h1>

And changing the CSS for h1 and expecting something to be there

Upvotes: -2

Related Questions