Resizable Split View | srgdev.com

Resizable Split View

Fast, lightweight and easy to use container for two resizable panes(frames), supports minimum size boundaries.JavaScript, HTML, SCSS Download (1KB): split-view.min.js

Demo

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Leo a diam sollicitudin tempor id eu nisl nunc.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut diam quam nulla porttitor massa id.

HTML / JS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html> <html> <head> ... <script src="/path/to/split-view.js"></script> ... </head> <body> ... <div id="wrap_id" class="split-wrap"> <div id="left_id" class="split-left"> <!-- Insert Your Element(s) Here --> </div> <div id="handle_id" class="split-handle"></div> <div id="right_id" class="split-right"> <!-- Insert Your Element(s) Here --> </div> </div> <script> document.getElementById("sid_wrap").split_view=new SplitView("left_id","handle_id","right_id") </script> ... </body> </html>

SCSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
$split_handle_width:6px; $split_original_position:20%; $split_background_color: #d3d3d3; .split-wrap{ position: relative; border: thick solid $split_background_color; } .split-left, .split-handle, .split-right{ position: absolute; display: block; height: 100%; top:0; padding: 0; margin: 0; box-sizing: border-box; overflow: auto; } .split-left{ left: 0; width: $split_original_position } .split-handle{ left: $split_original_position; width: $split_handle_width; background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHdpZHRoPSI2IiBoZWlnaHQ9IjE2IiB2aWV3Qm94PSIwIDAgNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsPSIjNzc3IiBkPSJtMyAxMWExLjUgMS41IDAgMCAxIDEuNSAxLjUgMS41IDEuNSAwIDAgMS0xLjUgMS41IDEuNSAxLjUgMCAwIDEtMS41LTEuNSAxLjUgMS41IDAgMCAxIDEuNS0xLjVtMC00LjVhMS41IDEuNSAwIDAgMSAxLjUgMS41IDEuNSAxLjUgMCAwIDEtMS41IDEuNSAxLjUgMS41IDAgMCAxLTEuNS0xLjUgMS41IDEuNSAwIDAgMSAxLjUtMS41bTAtNC41YTEuNSAxLjUgMCAwIDEgMS41IDEuNSAxLjUgMS41IDAgMCAxLTEuNSAxLjUgMS41IDEuNSAwIDAgMS0xLjUtMS41IDEuNSAxLjUgMCAwIDEgMS41LTEuNXoiLz48L3N2Zz4="); background-repeat: no-repeat; background-position: center; background-color: $split_background_color; cursor: col-resize; z-index: 4; } .split-right{ right: 0; left: $split_original_position; margin-left: $split_handle_width; } .split-cursor-resize{ cursor: col-resize; }

split-view.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
"use strict" /** * @implements {EventListener} * @constructor * @param {string} leftId * @param {string} handleId * @param {string} rightId * @param {number} [leftMin=0] - Left side min. width in percent * @param {number} [rightMin=0] - Right side min. width in percent */ function SplitView(leftId,handleId,rightId,leftMin,rightMin) { /** * @type {Element|undefined} * @private **/ this.p = undefined /** @private **/ this.x = 0 /** @private **/ this.lMin = 1 /** @private **/ this.rMin = 98 /** @private **/ this.drag = false /** @private **/ this.lastPr = 0 | 0 /** @private **/ this.lof = 0 /** @private **/ this.h=document.getElementById(handleId) /** @private **/ this.l=document.getElementById(leftId) /** @private **/ this.r=document.getElementById(rightId) this.hw=this.h.getBoundingClientRect().width if(leftMin && leftMin>0){ this.lMin=leftMin this.lastPr=leftMin this.l.style.width=this.r.style.left=this.h.style.left=leftMin+"%" } if(rightMin && rightMin>0) this.rMin=100-rightMin this.h.addEventListener('mousedown',this,false) this.p=this.h.parentElement } /** * @private * @param {Event|MouseEvent} e * */ SplitView.prototype.handleEvent=function(e){ var pr switch (e.type) { case 'mousedown': this.drag=true this.p.addEventListener('mousemove',this,false) // "window" is because we can end up outside of the parent window.addEventListener('mouseup',this,false) this.opc=this.p.className this.p.className+=" split-cursor-resize" this.lof=this.p.getBoundingClientRect().left+this.hw e.preventDefault() break case 'mousemove': if(this.drag===true){ pr=((e.clientX-this.lof)/this.p.clientWidth*100)|0 if(pr!==this.lastPr && (pr>=this.lMin && pr<=this.rMin)) { this.lastPr=pr this.l.style.width=this.r.style.left=this.h.style.left=pr+"%" } } break case 'mouseup': if(this.drag===false) return this.drag=false this.p.removeEventListener('mousemove',this,false) window.removeEventListener('mouseup',this,false) this.p.className=this.opc break } }