Menu
Is there a good technique to make a resizable split pane in HTML?
May it be done using CSS / jQuery / JavaScript or is there a good JavaScript library that have been used?
(An example of a split pane is the favorites bar in Internet Explorer which you may have docked to the left of your main browser window.)
700
HTML Section tag defines the section of documents such as chapters, headers, footers, or any other sections. The section tag divides the content into sections and subsections. The section tag is used when requirements of two headers or footers or any other section of documents are needed.
I wanted a vanilla, lightweight (jQuery UI Layout weighs in at 185 KB), no dependency option (all existing libraries require jQuery), so I wrote Split.js.
It weights less than 2 KB and does not require any special markup. It supports older browsers back to Internet Explorer 9 (or Internet Explorer 8 with polyfills). For modern browsers, you can use it with Flexbox and grid layouts.
91
Improving on Reza's answer:
<html><head><style> .splitter { width: 100%; height: 100px; display: flex; } #separator { cursor: col-resize; background-color: #aaa; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='30'><path d='M2 0 v30 M5 0 v30 M8 0 v30' fill='none' stroke='black'/></svg>"); background-repeat: no-repeat; background-position: center; width: 10px; height: 100%; /* Prevent the browser's built-in drag from interfering */ -moz-user-select: none; -ms-user-select: none; user-select: none; } #first { background-color: #dde; width: 20%; height: 100%; min-width: 10px; } #second { background-color: #eee; width: 80%; height: 100%; min-width: 10px; } </style></head><body> <div class="splitter"> <div id="first"></div> <div id="separator" ></div> <div id="second" ></div> </div> <script> // A function is used for dragging and moving function dragElement(element, direction) { var md; // remember mouse down info const first = document.getElementById("first"); const second = document.getElementById("second"); element.onmousedown = onMouseDown; function onMouseDown(e) { //console.log("mouse down: " + e.clientX); md = {e, offsetLeft: element.offsetLeft, offsetTop: element.offsetTop, firstWidth: first.offsetWidth, secondWidth: second.offsetWidth }; document.onmousemove = onMouseMove; document.onmouseup = () => { //console.log("mouse up"); document.onmousemove = document.onmouseup = null; } } function onMouseMove(e) { //console.log("mouse move: " + e.clientX); var delta = {x: e.clientX - md.e.clientX, y: e.clientY - md.e.clientY}; if (direction === "H" ) // Horizontal { // Prevent negative-sized elements delta.x = Math.min(Math.max(delta.x, -md.firstWidth), md.secondWidth); element.style.left = md.offsetLeft + delta.x + "px"; first.style.width = (md.firstWidth + delta.x) + "px"; second.style.width = (md.secondWidth - delta.x) + "px"; } } } dragElement( document.getElementById("separator"), "H" ); </script></body></html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
