Fixed Layer
Frame을 사용하지 않고 navigation이 고정된 채로 내용만 scroll되도록 만들어보자. FireFox라면 position:fixed를 사용할 수 있겠지만, IE가 지원하지 않기 때문에 cross-browing을 생각하여 javascript와 css를 이용하여 구현해 보겠다. 간단하게 left navigation과 content두 column으로 구성된 page를 생각해보자. css code snippet은 대략 다음과 같은 모습이다.
#leftnavigation { position : absolute; left : 0; width : 170px; margin-left : 10px; color : #000000; top : 0px; } #content { top : 0px; left : 180px; color : #000000; position:absolute; overflow: auto; } body{ overflow: hidden; } * html body{ background: #fff url(foo) fixed; }
여기서 눈여겨 볼 부분은 * html body부분이다. 이부분은 IE만 해석할 수 있는 데, 화면 떨림방지를 위한 hack이다. 자세한 것은 forum의 javascript관련 post를 참고하기 바란다.
다음은 javascript부분으로 이부분은 설명없어도 이해할 것으로 생각한다. setTimeout대신에 window.onresize = function(){ }을 사용하여도 무방하다. 아래가 관련 javascript code snippet이다.
function adjust(){ var screenWidth=0; var screenHeight=0; if(window.innerWidth) { //FireFox, NN screenWidth = window.innerWidth; screenHeight = window.innerHeight; } else { //IE if(document.compatMode && document.compatMode=='CSS1Compat') { //Strict Mode screenWidth = documentElement.clientWidth; screenHeight = documentElement.clientHeight; } else { //Quirks Mode screenWidth = document.body.clientWidth; screenHieght = document.body.clientHeight; }//end if~else }//end if~else var contentWidth = screenWidth - 180; if(contentWidth<0) contentWidth =0; if(screenHeight<0) screenHeight = 0; //set the content's width and height document.getElementById("content").style.width=contentWidth; document.getElementById("content").style.height=screenHeight; setTimeout("adjust()", 50); }//adjust
See the sample
<html> <head> <script type=“text/javascript”> function open_win() { window.open(“./test/js/fixed_layer.html”,“_blank”,“toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes”); } </script> </head>
<body> <a href=“#” onclick=“open_win()” style=“text-decoration:underline;color:#900B09”>fixed layer whitout frame</a>
</body>
</html>
コメント