Created
July 12, 2017 18:34
-
-
Save craftoid/3266e1b8e290111656b5e909c2207d1f to your computer and use it in GitHub Desktop.
Resizable DIV
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<!-- | |
resizable div // simulating a resizable window // bitcraftlab 2017 | |
--> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<style> | |
body { | |
font-family: sans-serif; | |
margin: 0; | |
} | |
#page { | |
background-color: #ccf; | |
position: fixed; | |
right: 0; | |
left: 0; | |
margin-right: auto; | |
margin-left: auto; | |
height: 100%; | |
user-select: none; | |
-moz-user-select: none; | |
-ms-user-select: none; | |
-webkit-user-select: none; | |
} | |
#resizer1, #resizer2 { | |
background-color: rgba(255, 255, 255, 0.5); | |
position: absolute; | |
height:100%; | |
line-height: 100vh; | |
cursor:ew-resize; | |
} | |
#resizer1 { | |
left: 0; | |
} | |
#resizer2 { | |
right: 0; | |
} | |
.block { | |
background-color: #aac; | |
border: 1px solid rgba(0, 0, 0, 0.2); | |
text-align: center; | |
vertical-align: middle; | |
line-height:200px; | |
height: 200px; | |
width: 200px; | |
font-size: 20px; | |
color: #fff; | |
} | |
#grid { | |
display: grid; | |
float: left; | |
width: 100%; | |
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); | |
align-content: space-between; | |
justify-content: space-around; | |
overflow: hidden; | |
} | |
</style> | |
<script> | |
function init() { | |
// get resizers and attach eventlisteners to them | |
document.getElementById('resizer1').addEventListener('mousedown', initResize, false); | |
document.getElementById('resizer2').addEventListener('mousedown', initResize, false); | |
// call this whenever we resize the window | |
window.onresize = resizeWindow //addEventListener('resize', resizeWindow, true); | |
} | |
function initResize(e) { | |
// new event listeners for dragging the mouse | |
window.addEventListener('mousemove', resize, false); | |
window.addEventListener('mouseup', stopResize, false); | |
// new cursor style | |
document.body.style.cursor = 'ew-resize'; | |
} | |
function resize(e) { | |
// get elements | |
var page = document.getElementById('page'); | |
var resizer = document.getElementById('resizer1'); | |
// get width of the resizer and the window | |
var dmin = resizer.offsetWidth; | |
var dmax = window.innerWidth; | |
// distance from the center of the window | |
var w = Math.abs(window.innerWidth / 2 - e.clientX ) * 2; | |
// center on the middle of the resizer | |
w = w + dmin ; | |
// make sure the new width is not wider than the window ... | |
w = Math.min(w, dmax); | |
// ... and at least as wide as the resizer | |
w = Math.max(w, dmin); | |
page.style.width = w + 'px'; | |
} | |
function stopResize(e) { | |
// remove event listeners | |
window.removeEventListener('mousemove', resize, false); | |
window.removeEventListener('mouseup', stopResize, false); | |
// reset cursor style | |
document.body.style.cursor = 'default'; | |
} | |
function resizeWindow(e) { | |
// reset the width of the virtual page to the width of the window | |
var page = document.getElementById('page'); | |
page.style.width = window.innerWidth + 'px'; | |
}; | |
</script> | |
</head> | |
<body onload = "init()"> | |
<div id="page"> | |
<div id="resizer1" >⇆</div> | |
<div id="grid"> | |
<div class="block">block 1</div> | |
<div class="block">block 2</div> | |
<div class="block">block 3</div> | |
<div class="block">block 4</div> | |
<div class="block">block 5</div> | |
<div class="block">block 6</div> | |
<div class="block">block 7</div> | |
<div class="block">block 8</div> | |
<div class="block">block 9</div> | |
</div> | |
<div id="resizer2" >⇆</div> | |
</div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Play with it here.