Split screen left , right and bottom . But bottom should be moved to left side.

Ajay Babu — Fri, 17 May 2024 10:53:03 +0000

Here is my html code
<!DOCTYPE html>

Left Top Bottom

here is my css
.container {
display: flex;

/* Misc */
border: 1px solid #cbd5e0;
height: 32rem;
width: 100%;

}
.resizer[data-direction='horizontal'] {
background-color: #cbd5e0;
cursor: ew-resize;
height: 100%;
width: 2px;
}
.resizer[data-direction='vertical'] {
background-color: #cbd5e0;
cursor: ns-resize;
height: 2px;
width: 100%;
}
.container__left {
/* Initially, the left takes 1/4 width */
width: 50%;

/* Misc */
align-items: center;
display: flex;
justify-content: center;

}
.container__right {
/* Take the remaining width */
flex: 1;

/* Misc */
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;

}
.container__top {
/* Initial height */
height: 12rem;

/* Misc */
align-items: center;
display: flex;
justify-content: center;

}
.container__bottom {
/* Take the remaining height */
flex: 1;

/* Misc */
align-items: center;
display: flex;
justify-content: center;

}
Here is my js
document.addEventListener('DOMContentLoaded', function () {
const resizable = function (resizer) {
const direction = resizer.getAttribute('data-direction') || 'horizontal';
const prevSibling = resizer.previousElementSibling;
const nextSibling = resizer.nextElementSibling;

    // The current position of mouse
    let x = 0;
    let y = 0;
    let prevSiblingHeight = 0;
    let prevSiblingWidth = 0;

    // Handle the mousedown event
    // that's triggered when user drags the resizer
    const mouseDownHandler = function (e) {
        // Get the current mouse position
        x = e.clientX;
        y = e.clientY;
        const rect = prevSibling.getBoundingClientRect();
        prevSiblingHeight = rect.height;
        prevSiblingWidth = rect.width;

        // Attach the listeners to document
        document.addEventListener('mousemove', mouseMoveHandler);
        document.addEventListener('mouseup', mouseUpHandler);
    };

    const mouseMoveHandler = function (e) {
        // How far the mouse has been moved
        const dx = e.clientX - x;
        const dy = e.clientY - y;

        switch (direction) {
            case 'vertical':
                const h =
                    ((prevSiblingHeight + dy) * 100) /
                    resizer.parentNode.getBoundingClientRect().height;
                prevSibling.style.height = h + '%';
                break;
            case 'horizontal':
            default:
                const w =
                    ((prevSiblingWidth + dx) * 100) / resizer.parentNode.getBoundingClientRect().width;
                prevSibling.style.width = w + '%';
                break;
        }

        const cursor = direction === 'horizontal' ? 'col-resize' : 'row-resize';
        resizer.style.cursor = cursor;
        document.body.style.cursor = cursor;

        prevSibling.style.userSelect = 'none';
        prevSibling.style.pointerEvents = 'none';

        nextSibling.style.userSelect = 'none';
        nextSibling.style.pointerEvents = 'none';
    };

    const mouseUpHandler = function () {
        resizer.style.removeProperty('cursor');
        document.body.style.removeProperty('cursor');

        prevSibling.style.removeProperty('user-select');
        prevSibling.style.removeProperty('pointer-events');

        nextSibling.style.removeProperty('user-select');
        nextSibling.style.removeProperty('pointer-events');

        // Remove the handlers of mousemove and mouseup
        document.removeEventListener('mousemove', mouseMoveHandler);
        document.removeEventListener('mouseup', mouseUpHandler);
    };

    // Attach the handler
    resizer.addEventListener('mousedown', mouseDownHandler);
};

// Query all resizers
document.querySelectorAll('.resizer').forEach(function (ele) {
    resizable(ele);
});

});
This code is working fine with resizable screen. But i need bottom area should be moved to left side.

DEV Community: Ajay Babu

Split screen left , right and bottom . But bottom should be moved to left side.