http://www.howtocreate.co.uk/tutorials/javascript/browserwindow



var isTouchPad = (/hp-tablet/gi).test(navigator.appVersion),

//터지여부

hasTouch = 'ontouchstart' in window && !isTouchPad,

//이벤트 종류

RESIZE_EV = 'onorientationchange' in window ? 'orientationchange' : 'resize',

START_EV = hasTouch ? 'touchstart' : 'mousedown',

MOVE_EV = hasTouch ? 'touchmove' : 'mousemove',

END_EV = hasTouch ? 'touchend' : 'mouseup';



//필수 : 이벤트값

getEvent = function(event){

return event || window.event;

//var target = event.target || event.srcElement; //타겟

},

//필수 : 이벤트 전파 중지관련

/*

 * 캡쳐단계(capture phase) : 이벤트가 발생 대상까지 전달되는 단계(아래로)

 * - 설명1 : 이벤트가 다른 이벤트로 전파되기 전에 폼 전송과 같은 이벤트를 취소

 * - 설명2 : 처리를 완료하기 전에 이벤트(기본 또는 다른이벤트)를 취고하고 싶을 때

 * 대상단계(target phase) : 이벤트가 발생 대상에 도달한 단계

 * 버블링단계(bubbling phase) : 발생 대상에서 document까지 전달되는 단계(위로)

 * - 설명1 : 내부에 다른 요소를 포함한 어떤 요소(<div><div></div></div>)가 있습니다. 두요소 모두 클릭 이벤트를 캡쳐합니다. 안쪽요소에서 발생한 클릭 이벤트가 바깥쪽 요소로 전파되는 것을 막음

 * - 설명2 : 이벤트를 취소하고 싶지는 않지만 저저파하는 것을 막을 때

 */

setStopCapture = function(event){

if(event.preventDefault){

event.preventDefault();

}else {

event.returnValue = false;

}

},

setStopBubbling = function(event){

if(event.stopPropagation){

event.stopPropagation();

}else {

event.cancelBubble = true;

}

},

//UI : 사이즈 함수

size = {

//return data

data : {

winW : null, //윈도우 Width

winH : null, //윈도우 Height

docW : null, //도큐먼트 Width

docH : null, //도큐먼트 Height

scrollL : null, //스크롤 왼쪽(Left)

scrollT : null, //스크롤 상단(Top)

left : null, //div 창 가운데(왼쪽기준) 위치

top : null, //div 창 가운데(상단기준) 위치

divW : null, //div Width 값

divH : null //div Height 값

},

//윈도우 사이즈(브라우저 크기)

getWindow : function(){

var that = this,

M = Math;

that['data']['winW'] = M.round($(window).innerWidth());

that['data']['winH'] = M.round($(window).innerHeight());

return [that['data']['winW'], that['data']['winH']];

},

//도큐먼트 사이즈(document 크기)

getDocument : function(){

var that = this,

M = Math;

that['data']['docW'] = M.round($('body').innerWidth()); //$(document)로 할경우 IE에서 스크롤 발생

that['data']['docH'] = M.round($('body').innerHeight());

return [that['data']['docW'], that['data']['docH']];

},

//스크롤값

getScroll : function(){

var that = this,

M = Math;

that['data']['scrollL'] = M.round($(document).scrollLeft());

that['data']['scrollT'] = M.round($(document).scrollTop());

return [that['data']['scrollL'], that['data']['scrollT']];

},

//특정 DIV 사이즈 및 창 가운데 위치값

getElement : function(obj){

var that = this,

M = Math;

//object 검사

if(!obj || typeof obj != 'object') {

setLog('size object');

return;

}

//도큐먼트

that.getDocument();

//윈도우

that.getWindow();

//스크롤

that.getScroll();

//element

that['data']['divW'] = M.round($(obj).outerWidth(true));

that['data']['divH'] = M.round($(obj).outerHeight(true));

//계산

if(that['data']['winW'] > that['data']['divW']) that['data']['left'] = M.round(that['data']['winW'] / 2) - M.round(that['data']['divW'] / 2);

else that['data']['left'] = 0; //윈도우 사이즈(가로)보다 DIV 사이즈가 더 클경우

if(that['data']['winH'] > that['data']['divH']) that['data']['top'] = M.round(that['data']['winH'] / 2) - M.round(that['data']['divH'] / 2);

else that['data']['top'] = 0; //윈도우 사이즈(세로)보다 DIV 사이즈가 더 클경우

//스크롤값 추가

that['data']['left'] += that['data']['scrollL'];

that['data']['top'] += that['data']['scrollT'];

//top값 + DIV높이 > 윈도우 전체 높이보다 클경우(div가 페이지보다 더 아래로 내려가지 않도록함.)

var tmpTop = M.round(that['data']['top']+that['data']['divH']);

if(tmpTop > that['data']['docH']) {

that['data']['top'] = that['data']['top'] - M.round(tmpTop-that['data']['docH']);

}

//위치값이 0보다 작지않도록 제어

if(that['data']['left'] < 0) that['data']['left'] = 0;

if(that['data']['top'] < 0) that['data']['top'] = 0;

return that['data'];

}

},




//필수 : 윈도우 사이즈

getWindowSize = function(){

var width = 0, height = 0;

if( typeof( window.innerWidth ) == 'number' ) {

//Non-IE

width = window.innerWidth;

height = window.innerHeight;

}else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {

//IE 6+ in 'standards compliant mode'

width = document.documentElement.clientWidth;

height = document.documentElement.clientHeight;

} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {

//IE 4 compatible

width = document.body.clientWidth;

height = document.body.clientHeight;

}

return {w: width, h: height};

},

//필수 : 스크롤값

getScrollSize = function() {

var scrollX = 0, scrollY = 0;

if( typeof( window.pageYOffset ) == 'number' ) {

//Netscape compliant

scrollY = window.pageYOffset;

scrollX = window.pageXOffset;

}else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {

//DOM compliant

scrollY = document.body.scrollTop;

scrollX = document.body.scrollLeft;

} else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {

//IE6 standards compliant mode

scrollY = document.documentElement.scrollTop;

scrollX = document.documentElement.scrollLeft;

}

 

return {x: scrollX, y: scrollY};

},

//필수 : 마우스 X, Y 좌표값

getMouseXY = function(event) {

var mouseX = 0, mouseY = 0;

//모바일 확인

if(hasTouch){

event = event.originalEvent.touches[0] || event.originalEvent.changedTouches[0];

}

mouseX = event.clientX,

mouseY = event.clientY;

mouseX += $(document).scrollLeft(); //추후 크로스브라우저 문제발생시 getScrollSize() 함수호출하여 사용하자.

mouseY += $(document).scrollTop();

return {x: mouseX, y: mouseY};

},


//필수 : 요소(element) 위치 출력

getXY = function(el) {

//el은 문서에 포함되어 있어야 하고, 화면에 보여야 한다.

if(el.parentNode === null || el.style.display == 'none') {

return false;

}

var parent = null,

pos = [], //pos[0]에 x 좌표, pos[1]에 y 좌표 값 저장

box;

if(document.getBoxObjectFor) { //gecko 엔진 기반

box = document.getBoxObjectFor(el); //파이어폭스 등 gecko 엔진 기반에서 x, y좌표 구하기

pos = [box.x, box.y];

}else { //기타 브라우저

//offsetLeft와 offsetTop을 최상위 offsetParent 까지 반복적으로 더한다.

pos = [el.offsetLeft, el.offsetTop];

parent = el.offsetParent;

if(parent != el){

while(parent){

pos[0] += parent.offsetLeft;

pos[1] += parent.offsetTop;

parent = parent.offsetParent;

}

}

//오페라와 사파리의 'absolute' position의 경우

//body의 offsetTop을 잘못 계산하므로 보정해야 한다.

var ua = navigator.userAgent.toLowerCase();

/*

//Javascript

if(ua.indexOf('opera') != -1 || (ua.indexOf('safari') != -1 && getStyle(el, 'position') == 'absolute')) {

pos[1] -= document.body.offsetTop;

}

*/

//jQuery

if(ua.indexOf('opera') != -1 || (ua.indexOf('safari') != -1 && $(el).css('position') == 'absolute')) {

pos[1] -= document.body.offsetTop;

}

}

if(el.parentNode) { parent = el.parentNode; }

else { parent = null; }

//body 또는 html 이외의 부모 노드 중에 스크롤되어 있는

//영역이 있다면 알맞게 처리한다.

while(parent && parent.tagName != 'BODY' && parent.tagName != 'HTML') {

pos[0] -= parent.scrollLeft;

pos[1] -= parent.scrollTop;

if(parent.parentNode) { parent = parent.parentNode; }

else { parent = null; }

}

return {x: pos[0], y: pos[1]}

},

//필수 : 요소(element) 위치 설정

setXY = function(el, x, y){

var pageXY = getXY(el);

if(pageXY === false) {return false;}

//var position = getStyle(el, 'position'); //Javascript 사용자함수

var position = $(el).css('position'); //jQuery

//position이 static인 경우, left와 top이 적용되지 않으므로,

//position을 relative로 변경

if(!position || position == 'static') {

el.style.position = 'relative';

}

var delta = {

/*

//Javascript 사용자함수

x: parseInt(getStyle(el, 'left'), 10), //position이 relative인 경우 보정을 위한 값 저장

y: parseInt(getStyle(el, 'top'), 10)

*/

//jQuery

x: parseInt($(el).css('left'), 10), //position이 relative인 경우 보정을 위한 값 저장

y: parseInt($(el).css('top'), 10)

};

if(isNaN(delta.x)) { delta.x = 0; } //position이 static이었던 경우, left와 top값이 없으므로 x와 y의 값에 0을 할당

if(isNaN(delta.y)) { delta.y = 0; }

if(x != null) {

el.style.left = (x - pageXY.x + delta.x) + 'px';

}

if(y != null) {

el.style.top = (y - pageXY.y + delta.y) + 'px';

}

},

//필수 : 마우스 왼쪽 클릭여부

isLeftButton= function(event) {

return (event.which) ? event.which == 1 && event.button == 0 : (event.type == 'click') ? event.button == 0 : event.button == 1;

};