모니터,브라우쳐 등 높이 및 넓이 설명
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" lang="ko-KR">
<head>
<title>jQuery-브라우저 창 사이즈 조절에 따른 이벤트 만들기</title>
<script type="text/javascript" src="jquery-last.min.js"></script>
<script type="text/javascript" src="event.js"></script>
<style type="text/css">
* {font-family: "Consolas","굴림체"; font-size: 12px;}
</style>
</head>
<body>
<table style="border:1px solid #DDDDDD; width: 1200px;" border="0" cellspacing="0" cellpadding="3">
<tr>
<td width="650">
<table style="border:1px solid #999;" border="0" width="100%" cellpadding="2" cellspacing="0">
<tr>
<th width="160">method</th><th width="70">value</th><th>설명</th>
</tr>
<tr>
<td>screen.width</td>
<td><span id="screenWidth"></span>px</td>
<td>모니터 해상도 넓이</td>
</tr>
<tr>
<td>screen.height</td>
<td><span id="screenHeight"></span>px</td>
<td>모니터 해상도 높이</td>
</tr>
<tr>
<td>screen.availWidth</td>
<td><span id="screenAvailWidth"></span>px</td>
<td>사용가능한 모니터 해상도 넓이</td>
</tr>
<tr>
<td>screen.availHeight</td>
<td><span id="screenAvailHeight"></span>px</td>
<td>사용가능한 모니터 해상도 높이</td>
</tr>
</table>
<hr/>
<table border="1" width="100%" cellpadding="2" cellspacing="0">
<tr><th>method</th><th>설명</th></tr>
<tr><td>window.screenX/screenY</td><td>해상도 시작점에서 브라우져 까지 X/Y값</td></tr>
<tr><td>window.outerWidth/outerHeight</td><td>브라우져 전체 넓이/높이</td></tr>
<tr><td>window.innerWidth/innerHeigh</td><td>브라우져 안쪽 넓이/높이</td></tr>
<tr><td>document.clientWidth/clientHeigh</td><td>브라우져 안쪽 넓이/높이 (스크롤바 크기 제외)</td></tr>
<tr><td>document.scrollWidth/scrollHeigh</td><td>본문 콘텐츠의 전체 넓이/높이(스크롤없이 전체 펼쳐진)</td></tr>
<tr><td>document.scrollLeft/scrollTop</td><td>스크롤이 위치한 X/Y 좌표</td></tr>
</table>
<div><img src="html_elements_coordinates.png"/></div>
<br/><hr/>
<div>
<div id="selector1" style="border:3px solid gray; width:200px; height:70px;margin:3px; padding:5px;">
[selector1]<br/>
width: 200px<br/>
height: 70px<br/>
margin: 3px<br/>
padding: 5px
</div>
<div id="selectorStatus"></div>
</div>
<br/><hr/>
<div id="selector2" style="border: solid 1px red; width: 100%; height: 750px;">
[selector2]
<div id="selector2_1" style="position: relative; border: solid 1px blueviolet; width: 300px; height: 150px; top:150px; left: 30px; overflow: auto;">
[selector2_1]
<div id="selector2_1_1" style="border: 1px solid yellowgreen; width:600px; height:700px;"></div>
</div>
</div>
</td>
<td valign="top">
<div id="fixedLayer" style="position: fixed; border: 1px solid gray;">
<table border="1" cellpadding="1" cellspacing="0">
<tr><th colspan="4">[Resize Event]</th></tr>
<tr>
<th>method</th><th>value</th>
<th>method</th><th>value</th>
</tr>
<tr>
<td>window.screenX</td><td><span id="windowScreenX"></span>px</td>
<td>window.screenY</td><td><span id="windowScreenY"></span>px</td>
</tr>
<tr>
<td>window.screenLeft</td><td><span id="windowScreenLeft"></span>px</td>
<td>window.screenTop</td><td><span id="windowScreenTop"></span>px</td>
</tr>
<tr>
<td>window.outerWidth</td><td><span id="windowOuterWidth"></span>px</td>
<td>window.outerHeight</td><td><span id="windowOuterHeight"></span>px</td>
</tr>
<tr>
<td>window.innerWidth</td><td><span id="windowInnerWidth"></span>px</td>
<td>window.innerHeight</td><td><span id="windowInnerHeight"></span>px</td>
</tr>
<tr>
<td>body.clientWidth</td><td><span id="bodyClientWidth"></span>px</td>
<td>body.clientHeight</td><td><span id="bodyClientHeight"></span>px</td>
</tr>
<tr>
<td>docElement.clientWidth</td><td><span id="docElementClientWidth"></span>px</td>
<td>docElement.clientHeight</td><td><span id="docElementClientHeight"></span>px</td>
</tr>
<tr>
<td>body.scrollWidth</td><td><span id="bodyScrollWidth"></span>px</td>
<td>body.scrollHeight</td><td><span id="bodyScrollHeight"></span>px</td>
</tr>
<tr>
<td>docElement.scrollWidth</td><td><span id="docElementScrollWidth"></span>px</td>
<td>docElement.scrollHeight</td><td><span id="docElementScrollHeight"></span>px</td>
</tr>
<tr><th colspan="4">[Scroll Event]</th></tr>
<tr>
<td>body.scrollLeft</td><td><span id="bodyScrollLeft"></span>px</td>
<td>body.scrollTop</td><td><span id="bodyScrollTop"></span>px</td>
</tr>
<tr>
<td>docElement.scrollLeft</td><td><span id="docElementScrollLeft"></span>px</td>
<td>docElement.scrollTop</td><td><span id="docElementScrollTop"></span>px</td>
</tr>
<tr>
<td>window.pageXOffset</td><td><span id="windowPageXOffset"></span>px</td>
<td>window.pageYOffset</td><td><span id="windowPageYOffset"></span>px</td>
</tr>
<tr>
<td colspan="2">= jQuery(document).scrollLeft()</td>
<td colspan="2">= jQuery(document).scrollTop()</td>
</tr>
<tr><th colspan="4">[selector2_1]</th></tr>
<tr>
<td>selector2_1.offset().left</td><td><span id="selector2_1_OffsetLeft"></span>px</td>
<td>selector2_1.offset().top</td><td><span id="selector2_1_OffsetTop"></span>px</td>
</tr>
<tr>
<td>selector2_1.scrollLeft</td><td><span id="selector2_1_ScrollLeft"></span>px</td>
<td>selector2_1.scrollTop</td><td><span id="selector2_1_ScrollTop"></span>px</td>
</tr>
<tr>
<td>selector2_1.scrollWidth</td><td><span id="selector2_1_ScrollWidth"></span>px</td>
<td>selector2_1.scrollHeight</td><td><span id="selector2_1_ScrollHeight"></span>px</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>
$(function(){
$(window).resize( function(){
$("#screenWidth").html( screen.width);
$("#screenHeight").html( screen.height);
$("#screenAvailWidth").html( screen.availWidth);
$("#screenAvailHeight").html( screen.availHeight);
$("#windowScreenX").html( window.screenX);
$("#windowScreenY").html( window.screenY);
$("#windowScreenLeft").html( window.screenLeft);
$("#windowScreenTop").html( window.screenTop );
$("#windowOuterWidth").html( window.outerWidth);
$("#windowOuterHeight").html( window.outerHeight);
$("#windowInnerWidth").html( window.innerWidth);
$("#windowInnerHeight").html( window.innerHeight);
$("#bodyClientWidth").html( document.body.clientWidth);
$("#bodyClientHeight").html( document.body.clientHeight);
$("#docElementClientWidth").html( document.documentElement.clientWidth);
$("#docElementClientHeight").html( document.documentElement.clientHeight);
$("#bodyScrollWidth").html( document.body.scrollWidth );
$("#bodyScrollHeight").html( document.body.scrollHeight );
$("#docElementScrollWidth").html( document.documentElement.scrollWidth );
$("#docElementScrollHeight").html( document.documentElement.scrollHeight );
var status1 = "";
status1 += "selector1.outerHeight() : " + $("#selector1").outerHeight();
status1 += "<br/>";
status1 += "selector1.outerHeight(trur) - margin (top 과 bottom) 포함 : " + $("#selector1").outerHeight(true);
status1 += "<br/>";
status1 += "selector1.innerHeight() : " + $("#selector1").innerHeight();
$("#selectorStatus").html(status1);
}).resize();
$(window).scroll( function(){
$("#bodyScrollTop").html( document.body.scrollTop );
$("#bodyScrollLeft").html( document.body.scrollLeft );
$("#docElementScrollTop").html( document.documentElement.scrollTop );
$("#docElementScrollLeft").html( document.documentElement.scrollLeft );
$("#windowPageXOffset").html( window.pageXOffset );
$("#windowPageYOffset").html( window.pageYOffset );
$("#selector2_1_OffsetTop").html( $("#selector2_1").offset().top);
$("#selector2_1_OffsetLeft").html( $("#selector2_1").offset().left);
var selector2_1_ScrollTop = $("#selector2_1").offset().top - $(window).scrollTop();
$("#selector2_1_ScrollTop").html( selector2_1_ScrollTop );
var selector2_1_ScrollLeft = $("#selector2_1").offset().left - $(window).scrollLeft();
$("#selector2_1_ScrollLeft").html( selector2_1_ScrollLeft );
$("#selector2_1_ScrollWidth").html( document.getElementById("selector2_1").scrollWidth );
$("#selector2_1_ScrollHeight").html( document.getElementById("selector2_1").scrollHeight );
} ).scroll();
});
[브라우져 위치/크기 이번트]
move(), moveTo(x,y) - 브라우져 위치 이동
resize(), resizeTo(x,y) - 브라우져 크기 변경
// window.outerHeight --> 브라우져 전체 높이(메뉴,상태창등 포함)
// window.innerHeight --> 브라우져 안쪽 높이(document 높이)
// window.outerWidth --> 브라우져 전체 넓이(스크롤바 등 포함)
// window.innerWidth --> 브라우져 안쪽 넓이(스크롤바 등 제외)
// screen.width --> 스크린 넓이 (모니터의 해상도 넓이)
// screen.height --> 스크린 높이 (모니터의 해상도 높이)
//screen.availWidth --> 사용가능한 스크린 넓이(모니터 해상도 넓이)
//screen.availHeight --> 사용가능한 스크린 높이(모니터 해상도 높이)
//document.body.clientHeight --> 브라우져 안쪽 높이(비표준)
//document.body.clientWidth --> 브라우져 안쪽 넓이(비표준)
element.offsetTop : 객체의 y 좌표값
element.offsetLeft : 객체의 x 좌표값
element.offsetWidth : 객체의 넓이(가로값)
element.offsetHeight : 객체의 높이(세로값)
scrollHeight : 객체의 스크롤 높이
scrollWidth : 객체의 스크롤 넓이
scrollTop : 객체의 스크롤 y좌표값 (상단으로부터 위치값)
scrollLeft : 객체의 스크롤 x 좌표값 (좌측으로부터 위치값)
IE
[iframe_obj.contentWindow.]document.body.clientHeight
[iframe_obj.contentWindow.]document.body.clientWidth
[iframe_obj.contentWindow.]document.body.scrollHeight
[iframe_obj.contentWindow.]document.body.scrollWidth
[iframe_obj.contentWindow.]document.body.offsetHeight
[iframe_obj.contentWindow.]document.body.offsetWidth
FF
window.innerHeight
window.innerWidth
document.getElementById("ifrm").contentDocument.body.offsetHeight
document.getElementById("ifrm").contentDocument.body.offsetWidth
document.getElementById("ifrm").contentDocument.body.scrollTop = ~~.PageYOffset
document.getElementById("ifrm").contentDocument.body.scrollLeft = ~~.PageXOffset
document.getElementById("ifrm").contentDocument.body.scrollHeight
document.getElementById("ifrm").contentDocument.body.scrollWidth
IE & FF
document.documentElement.clientHeight
document.documentElement.clientWidth
-------------------------------------------------
<script language="JavaScript">
var width = screen.availWidth; // 현재 데스크탑 해상도의 넒이
var height = screen.availHeight; // 현재 데스크탑 해상도의 높이
self.moveTo(0,0); // 왼쪽 탑으로 옮긴다.
self.resizeTo(width,screen.height); //리사이즈
</script>
// 스크롤 위치 파악 페이지가 얼마나 스크롤 됐는지 알아내는 방법이다.
var x,y;
if (self.pageYOffset) { // IE 외 모든 브라우저
x = self.pageXOffset;
y = self.pageYOffset;
}
else if (document.documentElement &&
document.documentElement.scrollTop) {
// Explorer 6 Strict
x = document.documentElement.scrollLeft;
y = document.documentElement.scrollTop;
}
else if (document.body) { // IE 브라우저
x = document.body.scrollLeft;
y = document.body.scrollTop;
}