Flexbox with Splitter view

In this example below you will see how to do a Flexbox with Splitter view with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by oieduardorabelo, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright oieduardorabelo ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Flexbox with Splitter view</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <header>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium maiores.</header>
<main>
    <nav>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem accusantium est maxime nam hic quia vero illum reiciendis ex quis quaerat aperiam velit repudiandae sit cumque. Quisquam quibusdam cum mollitia ex iste quam molestias! Eum accusantium sapiente nihil fugit vitae nesciunt eveniet eligendi molestias dicta optio aut sint repellat modi iste incidunt laborum quasi maiores facere praesentium soluta iusto dolore accusamus labore nemo consequatur tempore aliquid aperiam dignissimos impedit itaque? Quidem necessitatibus possimus neque natus nobis molestias similique dignissimos dolorem harum iusto nisi maiores molestiae voluptatum maxime minima assumenda placeat voluptas reiciendis repellendus odio nesciunt incidunt amet eos dicta est?</nav>
    <article>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi explicabo eius! Perspiciatis consectetur error hic libero possimus aspernatur voluptas! Excepturi nostrum voluptatem nobis repellat omnis eaque fuga sed modi accusamus sunt iste mollitia tenetur ullam. Consequatur reprehenderit sapiente perferendis facilis dolorem sed dolore dignissimos minus beatae voluptas expedita iste fugiat doloremque harum labore alias commodi soluta deleniti voluptatum rem blanditiis ratione itaque omnis modi odio voluptates cumque vero. Tempora quibusdam at voluptatibus distinctio id harum maxime placeat asperiores vitae saepe sit autem impedit culpa illo quas animi velit aliquam accusantium facere expedita possimus adipisci deleniti suscipit. Molestias enim minima neque!</article>
    <div class="splitter"></div>
    <aside>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione consequatur voluptatibus adipisci tempore recusandae ducimus minus nemo dolorem odit exercitationem illo incidunt quis doloremque saepe accusantium nam maxime voluptates totam maiores nostrum! Iste cumque fugit quasi impedit voluptas dolorem necessitatibus debitis laboriosam enim consequuntur expedita natus quis dolor blanditiis non fugiat accusantium esse molestias. Assumenda cumque temporibus non corporis voluptatum sequi dolor sed nesciunt distinctio voluptate quasi amet ex eos provident praesentium laboriosam eum! Expedita commodi nisi vero delectus dignissimos quos beatae modi esse eaque iste consectetur odio deleniti necessitatibus adipisci autem velit nam architecto voluptatum asperiores inventore praesentium accusamus.</aside>
</main>
<footer>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum tempora!</footer>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/oieduardorabelo/flexbox-with-splitter-view-yzjgb */
html, body {
    width: 100%;
    padding: 0;
    margin: 0;
}

body {
	display: -webkit-flex;
	-webkit-flex-direction: column;
}
 
header {
	height: 75px;
	min-height: 75px;
}
 
footer {
	height: 25px;
	min-height: 25px;
}
 
main {
	display: -webkit-flex;
	-webkit-flex-direction: row;
	flex: auto;
	border: solid grey;
	border-width: 1px 0;
	overflow: hidden;
}
 
nav {
	width: 150px;
	min-width: 150px;
	overflow-x: hidden;
	overflow-y: auto;
}
 
article {
	border: solid grey;
	border-width: 0 0 0 1px;
	flex: auto;
	overflow-x: hidden;
	overflow-y: auto;
}
 
aside {
	width: 50px;
	min-width: 50px;
	overflow-x: hidden;
	overflow-y: auto;
}

.splitter {
    border-left: 1px solid grey;
    width: 4px;
    min-width: 4px;
    cursor: col-resize;
}

/*Downloaded from https://www.codeseek.co/oieduardorabelo/flexbox-with-splitter-view-yzjgb */
var w = window, d = document, splitter;
 
splitter = {
    lastX: 0,
    leftEl: null,
    rightEl: null,
 
    init: function(handler, leftEl, rightEl) {
        var self = this;
 
        this.leftEl = leftEl;
        this.rightEl = rightEl;
 
        handler.addEventListener('mousedown', function(evt) {
            evt.preventDefault();    /* prevent text selection */
 
            self.lastX = evt.clientX;
 
            w.addEventListener('mousemove', self.drag);
            w.addEventListener('mouseup', self.endDrag);
        });
    },
 
    drag: function(evt) {
        var wL, wR, wDiff = evt.clientX - splitter.lastX;
 
        wL = d.defaultView.getComputedStyle(splitter.leftEl, '').getPropertyValue('width');
        wR = d.defaultView.getComputedStyle(splitter.rightEl, '').getPropertyValue('width');
        wL = parseInt(wL, 10) + wDiff;
        wR = parseInt(wR, 10) - wDiff;
        splitter.leftEl.style.width = wL + 'px';
        splitter.rightEl.style.width = wR + 'px';
 
        splitter.lastX = evt.clientX;
    },
 
    endDrag: function() {
        w.removeEventListener('mousemove', splitter.drag);
        w.removeEventListener('mouseup', splitter.endDrag);
    }
};
 
splitter.init(d.getElementsByClassName('splitter')[0], d.getElementsByTagName('article')[0], d.getElementsByTagName('aside')[0]);

Comments