Day 27: Resizable Panels / Split View

Build a two-column layout where the user can drag a divider to resize the left and right panels. Keep this one desktop only and mouse only for the first version.

Core Requirements

HTML / UI

  • Create a wrapper for the split view
  • Add a left panel
  • Add a draggable divider/handle between panels
  • Add a right panel
  • Add sample content in each panel
  • Set a minimum width for each panel

JavaScript

  • Listen for mousedown on the divider
  • Track when resizing is active
  • Listen for mousemove on document
  • Calculate the new left panel width based on mouse position
  • Update the panel width while dragging
  • Listen for mouseup on document
  • Stop resizing on mouseup

JavaScript focus

  • mousedown
  • mousemove
  • mouseup
  • clientX
  • getBoundingClientRect()
  • inline style updates
  • boolean state like isResizing
  • min/max constraints
  • event cleanup

Nice extras

Pick one max:

  • Save panel size to localStorage
  • Add a reset layout button
  • Add keyboard support for the divider
  • Add ARIA attributes to the handle
  • Add a visual “dragging” class while resizing

MDN prep

Resizable Panels / Split View

Preview

This panel can be resized.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque tempore quibusdam eos quae rerum ipsam? Tempora voluptatum odio architecto. Autem, animi! Placeat voluptas saepe cum aliquid doloremque modi dignissimos in.

Settings

This panel adjusts as the left panel changes.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. A ducimus, recusandae minima vel velit tempore reiciendis numquam repudiandae optio sunt non assumenda hic fugit explicabo ex obcaecati animi, consequatur iusto.

The HTML

							
								<div class="split_view">
								    <div class="split_panel split_panel-left">
								        <h2>Preview</h2>
								        <p><strong>This panel can be resized.</strong></p>
								        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque tempore quibusdam eos quae rerum ipsam? Tempora voluptatum odio architecto. Autem, animi! Placeat voluptas saepe cum aliquid doloremque modi dignissimos in.</p>
								    </div>

								    <div class="split_handle" role="separator" aria-orientation="vertical"></div>

								    <div class="split_panel split_panel-right">
								        <h2>Settings</h2>
								        <p><strong>This panel adjusts as the left panel changes.</strong></p>
								        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. A ducimus, recusandae minima vel velit tempore reiciendis numquam repudiandae optio sunt non assumenda hic fugit explicabo ex obcaecati animi, consequatur iusto.</p>
								    </div>
								</div>

The JavaScript

							
								function initSplitViewPanels() {
								    const root = document.querySelector(".split_view");
								    if (!root) return;

								    const left = root.querySelector(".split_panel-left");
								    const seperator = root.querySelector(".split_handle");

								    console.log(root.getBoundingClientRect());
								    let isResizing = false;

								    seperator.addEventListener("mousedown", (e) => {
								        isResizing = true;
								    });

								    document.addEventListener("mousemove", (e) => {
								        if (!isResizing) return;

								        const rootRect = root.getBoundingClientRect();
								        const newLeftWidth = e.clientX - rootRect.left;
								        const minWidth = 240;
								        const maxWidth = rootRect.width - minWidth;

								        if (newLeftWidth < minWidth || newLeftWidth > maxWidth) return;

								        left.style.width = `${newLeftWidth}px`;

								        document.addEventListener("mouseup", () => {
								            if (!isResizing) return;
								            isResizing = false;
								        });
								    });
								}
								initSplitViewPanels();