Get started with split.js CDN
MIT licensed
Split.js: Create resizable, detachable, draggable web panes.
Tags:- css
- split
- flexbox
- tiny
- split-layout
Stable version
Copied!
How to start using split.js CDN
<!DOCTYPE html>
<html>
<head>
<title>Get started with split.js CDN - cdnhub.io</title>
<style>
#pane1, #pane2 {
width: 50%;
height: 100px;
background-color: #ddd;
float: left;
}
</style>
</head>
<body>
<div id="container" style="height: 200px; border: 1px solid #ccc;">
<div id="pane1">Pane 1</div>
<div id="pane2">Pane 2</div>
</div>
<script src="https://cdn.cdnhub.io/split.js/1.6.5/split.min.js"></script>
<script>
const container = document.getElementById('container');
const panes = [document.getElementById('pane1'), document.getElementById('pane2')];
const split = new Split(container, {
sizes: [30, 70],
direction: 'horizontal'
});
split.on('resize', () => {
console.log('Resized:', split.size);
});
split.resize();
</script>
</body>
</html>
Copied!
Copied!
Copied!
All versions
0.1.0
0.2.0
0.2.1
0.2.2
0.2.3
0.2.4
0.2.5
0.2.6
0.3
0.3.1
0.4
0.4.1
0.4.2
0.4.3
0.4.4
0.4.5
0.4.6
0.4.7
1.0.0
1.0.1
1.0.2
1.0.3
1.0.4
1.0.5
1.0.6
1.0.7
1.1.0
1.1.1
1.1.2
1.1.3
1.1.4
1.2.0
1.3.0
1.3.1
1.3.2
1.3.3
1.3.4
1.3.5
1.4.0
1.5.0
1.5.1
1.5.10
1.5.11
1.5.2
1.5.3
1.5.4
1.5.5
1.5.6
1.5.7
1.5.9
1.6.0
1.6.1
1.6.2
1.6.3
1.6.4
*** 1.6.5