브라우저, 스타일XP를 무시하고 resizeTo() 하기

by 라제폰 2009. 2. 6. 16:58

resizeTo() 같은 경우에는 브라우저의 외부크기까지 포함해서 변화를 시켜버리기 때문에 XP의 루나스타일이나 스타일xp들 같은 경우엔 안쪽의 내용들이 어그러져 버리는 경우가 있지만, 다음의 소스는 안쪽의 내용을 중심으로 리사이즈 시켜버리기 때문에 브라우저나 스타일XP의 규격차이 때문에 디자인이 찌그러져 버리는 경우가 없다.

< head >
< !-- 자바스크립트 부분입니다. -- >
< script >
topW = 0;
topH = 0;

function setWH(){
   if (document.all){
   cW=document.body.offsetWidth
   cH=document.body.offsetHeight
   window.resizeTo(500,500)
   barsW=500-document.body.offsetWidth
   barsH=500-document.body.offsetHeight
   wW=barsW+cW
   wH=barsH+cH
   window.resizeTo(wW,wH)
   }
   else
   {
   wW=window.outerWidth
   wH=window.outerHeight
   }
   topW = wW;
   topH = wH;
   }

function buildWH() {
    setWH();
    topW = topW - document.body.clientWidth;
    topH = topH - document.body.clientHeight;
}

function resizeWH(width,height) {
   reW = width + topW;
   reH = height + topH;
   window.resizeTo(reW,reH);
}

< /script >
< /head >

< !-- 브라우저의 내용을 제외한 부분의 크기 topW와 topH를 구하기 위해 바디에서 한번 불러줍니다. -- >
< body onLoad="buildWH()" >

< !-- 링크를 거는 부분입니다. 브라우저의 외부크기를 무시하고, 안쪽의 사이즈만 적으면 됩니다.
   내용이 나오는 부분의 크기를 유지한채로 리사이즈가 됩니다. -- >
< a href="#" onClick="resizeWH(400,300)" >가로 400, 세로 300으로 리사이즈< /a >< br >
< a href="#" onClick="resizeWH(200,230)" >가로 200, 세로 230으로 리사이즈< /a >< br >
< a href="#" onClick="resizeWH(500,100)" >가로 500, 세로 100으로 리사이즈< /a >

출처 | http://miniwini.com/miniwinis/bbs/index.php?bid=share&m=clip&mode=read&id=3319&p=2