Skip to content

Instantly share code, notes, and snippets.

@Hypersapien

Hypersapien/splitter.html

Created September 18, 2018 13:12
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Hypersapien/1c38b7124d4f82cda5820770515718a7 to your computer and use it in GitHub Desktop.
Save Hypersapien/1c38b7124d4f82cda5820770515718a7 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
splitter.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
* {
box-sizing: border-box;
}
#container {
position: absolute;
width: 100%;
height: 100%;
}
#left_pane,
#right_pane {
top: 0;
height: 100%;
position: absolute;
padding: 10px;
color: black;
}
#left_pane {
width: 25%;
left: 0;
background: lightgrey;
border-right: 2px solid black;
}
#right_pane {
width: 75%;
right: 0;
background: white;
}
</style>
<script src="https://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
Container
<div id="left_pane" class="ui-widget-content">Left pane</div>
<div id="right_pane">Right pane</div>
</div>
<script type="text/javascript">
$("#left_pane").resizable({
handles: 'e',
resize: function() {
$("#right_pane").outerWidth($("#container").innerWidth() - $("#left_pane").outerWidth());
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment