여러분들의 도움을 요청해봅니다..
본문
codepen이라는 사이트에서 아래의 예제를 구하게 되었습니다.
div 사이즈를 마우스로 드래그 하여 조절할 수 있게 되어 있는 것인데요..
페이지 로드시 비율은 위의 그림과 같습니다.
하지만 저 비율이 아닌 페이지 로드시 아래의 비율로 먼저 나타나게 하고 싶은데 어떻게 수정을 해야 할지 도저히 모르겠습니다. 이것저것 만져봐도 잘 안되네요.. 스크립트를 전혀 모릅니다..ㅠㅠ
위 페이지는 http://bokjisa.net/code_ex/test/boxsize.php <-- 제 호스팅에 있는 페이지 입니다.
어디를 고쳐야 원하는 사이즈로 보여줄 수 있을까요? 도움 부탁드리겠습니다..(--)(__)
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
</div></html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>box-layout</title>
<style>
html, body {
width: 100%;
height: 100%;
font-family: sans-serif;
font-size: 1.5em;
color: #FFF;
}
body {
display: flex;
flex-direction: row;
-moz-user-select: -moz-none;
-webkit-user-select: none;
-khtml-user-select: none;
-o-user-select: none;
user-select: none;
}
.container {
display: flex;
flex: 1 1 auto;
}
.horizontal {
flex-direction: row;
}
.vertical {
flex-direction: column;
}
.box {
flex: 1 1 0px;
background: linear-gradient(45deg, #1D1F20, #2F3031) repeat scroll 0% 0% transparent !important;
display: flex;
justify-content: center;
align-items: center;
overflow-x: hidden;
overflow-y: auto;
white-space: nowrap;
}
.resizer {
flex: 0 0 auto;
}
.resizer[data-resizer-type=H] {
width: 10px;
background: linear-gradient(to right, #505050, #383838) repeat scroll 0% 0% transparent;
cursor: col-resize;
box-shadow: 1px 0px 0px #6E6E6E inset, 2px 0px 2px rgba(0, 0, 0, 0.4);
}
.resizer[data-resizer-type=V] {
height: 10px;
background: linear-gradient(to bottom, #505050, #383838) repeat scroll 0% 0% transparent;
cursor: row-resize;
box-shadow: 0px 1px 0px #6E6E6E inset, 0px 2px 2px rgba(0, 0, 0, 0.4);
}
</style>
</head>
<body>
<div class="container horizontal">
<div class="container vertical">
<div id="box_1" class="box">BOX 1</div>
<div name="resizerV1"></div>
<div id="box_2" class="box">BOX 2</div>
<div name="resizerV2"></div>
<div id="box_5" class="box">BOX 3</div>
</div>
<div name="resizerH1"></div>
<div id="box_3" class="box" style="display:flex;flex-direction:column">BOX 4<br/><p style="white-space:normal;text-align:center;font-size:0.5em;">drag and drop vertical and horizontal bars to change the flex ratio of boxes</p></div>
<div name="resizerH2"></div>
<div id="box_4" class="box">BOX 5</div>
</div>
<script>
window.onload = function() {
new Resizer(document.querySelector('[name=resizerH1]'), 'H');
new Resizer(document.querySelector('[name=resizerH2]'), 'H');
new Resizer(document.querySelector('[name=resizerV1]'), 'V');
new Resizer(document.querySelector('[name=resizerV2]'), 'V');
};
</script>
<script>
if (typeof Resizer === 'undefined') {
var Resizer = function (resizerNode, type, options) {
resizerNode.classList.add('resizer');
resizerNode.setAttribute('data-resizer-type', type);
this.hidebar = typeof options === 'undefined' ? null : options.hidebar;
this.callbackMove = typeof options === 'undefined' ? null : options.callbackMove;
this.callbackStop = typeof options === 'undefined' ? null : options.callbackStop;
this.processing = false;
this.container = {
node: resizerNode.parentNode,
playingSize: null,
playingRatio: null
};
this.beforeBox = {
node: resizerNode.previousElementSibling,
ratio: null,
size: null
};
this.resizer = {
node: resizerNode,
type: type
};
this.afterBox = {
node: resizerNode.nextElementSibling,
ratio: null,
size: null
};
this.mousePosition = null;
this.beforeBox.node.style.flexGrow = 1;
this.afterBox.node.style.flexGrow = 1;
this.beforeBox.node.style.flexShrink = 1;
this.afterBox.node.style.flexShrink = 1;
this.beforeBox.node.style.flexBasis = 0;
this.afterBox.node.style.flexBasis = 0;
this.resizer.node.addEventListener('mousedown', this.startProcess.bind(this), false);
};
Resizer.prototype = {
startProcess: function (event) {
if (this.processing) {
return false;
}
this.processing = true;
if (this.hidebar) {
this.resizer.node.style.display = 'none';
}
this.beforeBox.ratio = parseFloat(this.beforeBox.node.style.flexGrow);
this.afterBox.ratio = parseFloat(this.afterBox.node.style.flexGrow);
this.mousePosition = this.resizer.type === 'H' ? event.clientX : event.clientY;
this.beforeBox.size = this.resizer.type === 'H' ? this.beforeBox.node.offsetWidth : this.beforeBox.node.offsetHeight;
this.afterBox.size = this.resizer.type === 'H' ? this.afterBox.node.offsetWidth : this.afterBox.node.offsetHeight;
this.container.playingSize = this.beforeBox.size + this.afterBox.size;
this.container.playingRatio = this.beforeBox.ratio + this.afterBox.ratio;
this.stopProcessFunctionBinded = this.stopProcess.bind(this);
document.addEventListener('mouseup', this.stopProcessFunctionBinded, false);
this.processFunctionBinded = this.process.bind(this);
document.addEventListener('mousemove', this.processFunctionBinded, false);
},
process: function (event) {
if (!this.processing) {
return false;
}
var mousePositionNew = this.resizer.type === 'H' ? event.clientX : event.clientY;
var delta = mousePositionNew - this.mousePosition;
var ratio1, ratio2;
ratio1 = (this.beforeBox.size + delta) * this.container.playingRatio / this.container.playingSize;
if (ratio1 <= 0) {
ratio1 = 0;
ratio2 = this.container.playingRatio;
} else if (ratio1 >= this.container.playingRatio) {
ratio1 = this.container.playingRatio;
ratio2 = 0;
} else {
ratio2 = (this.afterBox.size - delta) * this.container.playingRatio / this.container.playingSize;
}
this.beforeBox.node.style.flexGrow = ratio1;
this.afterBox.node.style.flexGrow = ratio2;
this.beforeBox.node.style.flexShrink = ratio2;
this.afterBox.node.style.flexShrink = ratio1;
if (typeof this.callbackMove === 'function') {
this.callbackMove();
}
},
stopProcess: function (event) {
document.removeEventListener('mousemove', this.processFunctionBinded, false);
this.processFunctionBinded = null;
document.removeEventListener('mouseup', this.stopProcessFunctionBinded, false);
this.stopProcessFunctionBinded = null;
if (this.hidebar) {
this.resizer.node.style.display = '';
}
if (typeof this.callbackStop === 'function') {
this.callbackStop();
}
this.processing = false;
}
};
} else {
console.error('"Resizer" class already exists !');
}
</script>
</div></html>
답변 2
118번째 줄 이후 아래코드를 추가하세요.
document.getElementById('box_2').style.flexGrow = 5;
document.getElementById('box_3').style.flexGrow = 4;
document.getElementById('해당 엘리먼트의 아이디').style.flexGrow = 5,4의 숫자를 바꿔가면서 해보시면 됩니다.
css로 넣으면 118번째줄의 스크립트가 돌면서 초기화되니 스크립트로 css를 변경할 수 밖에 없네요.
달빛새벽님 정말 감사합니다.. 가르쳐 주신데로 코드를 넣어봤습니다.. 제가 딱 원하던 스타일로 변경이 되었습니다.. 다시한번 감사드립니다..(^^)(__)
<style>
.. 님이 적으신 스타일들
// 아래사항 추가
.container {
flex: 0.5 0.5 0;
}
#box_4 {
flex: 0.5 0.5 0;
}
</style>
위와같이 수정해보세요.
소중한 답변 감사합니다.. Sagejin님이 가르쳐주신데로 다른건 수정 안하고 추가사항만 넣어 봤는데 아무런 반응이 없네요.. 혹시 Sagejin님께서 테스트 해봤을땐 제대로 표현이 되셨는지 궁금하네요..
달빛새벽님이 가르쳐 주신코드로 적용을 했습니다.. Sagejin님께도 진심으로 감사인사 드립니다..(^^)(__)
답변을 작성하시기 전에 로그인 해주세요.
