Author: | ashduckett |
---|---|
Views Total: | 2,944 views |
Official Page: | Go to website |
Last Update: | March 27, 2019 |
License: | MIT |
Preview:

Description:
A responsive split layout plugin in vanilla JavaScript that allows you to adjust the width of the split panels by dragging the splitter bar.
How to use it:
Link to SplitterBar’s JavaScript and Stylesheet.
<link href="SplitterBar.css" rel="stylesheet"> <script src="splitterbar.js"></script>
Create a container for the split layout.
<div id="container"> </div>
Split the container into 2 split panels.
const div1 = document.createElement('div'); div1.style.backgroundColor = 'yellow'; const div2 = document.createElement('div'); div2.style.backgroundColor = 'green'; const div1Content = document.createElement('div'); div1Content.innerHTML = 'Left side'; div1Content.classList.add('div-1-content') div1.appendChild(div1Content); const div2Content = document.createElement('div'); div2Content.innerHTML = 'Right side'; div2Content.classList.add('div-2-content') div2.appendChild(div2Content); const splitterBar = new SplitterBar(document.getElementById('container'), div1, div2);
Changelog:
03/27/2019
- JS update