Programming/Java Script

항상따라다니는 Div창 & 자동 창 크기 설정 스크립트

홍상길 2010. 3. 23. 09:56


<!-- 항상따라다니는 Div창 & 자동 창 크기 설정 스크립트 시작 -->
        <script type="text/javascript">

            window.onload = scrollHandler; // 페이지 로드시마다 발생

            window.onresize = windowResize; // 창 크기 변경시마다 발생

            function scrollHandler() {
                var offsetX = 950;
                var offsetY = 50;

                var offsetWidth = 0;

                var objVisible = document.getElementById("alwaysVisible");
                var targetY = document.documentElement.scrollTop + offsetY;
                var currentY = parseInt(objVisible.style.top);

                var objFrom = document.getElementById("wrapper");
                var myWidth = 0, myHeight = 0;

                // 버전별 창크기 알아오기
                if (typeof (window.innerWidth) == 'number') {
                    //Non-IE
                    myWidth = window.innerWidth;
                    myHeight = window.innerHeight;
                }
                else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
                    //IE 6+ in 'standards compliant mode'
                    myWidth = document.documentElement.clientWidth;
                    myHeight = document.documentElement.clientHeight;
                }
                else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
                    //IE 4 compatible
                    myWidth = document.body.clientWidth;
                    myHeight = document.body.clientHeight;
                }

                offsetWidth = (myWidth - 1000) / 2;
               
                // 따라다니는 Div 좌표 설정
                if (currentY != targetY) {
                    objVisible.style.left = offsetX + offsetWidth;

                    var scrollAmount = Math.ceil(Math.abs(targetY - currentY) / 20);

                    if (currentY > targetY) objVisible.style.top = currentY - scrollAmount;
                    else objVisible.style.top = currentY + scrollAmount;
                }               

                setTimeout(scrollHandler, 10);
            }

            function windowResize() {

                var offsetWidth = 0;
                var myWidth = 0, myHeight = 0;

                var objFrom = document.getElementById("wrapper");               
               
                // 버전별 창크기 알아오기
                if (typeof (window.innerWidth) == 'number') {
                    //Non-IE
                    myWidth = window.innerWidth;
                    myHeight = window.innerHeight;
                }
                else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
                    //IE 6+ in 'standards compliant mode'
                    myWidth = document.documentElement.clientWidth;
                    myHeight = document.documentElement.clientHeight;
                }
                else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
                    //IE 4 compatible
                    myWidth = document.body.clientWidth;
                    myHeight = document.body.clientHeight;
                }

                offsetWidth = (myWidth - 1000) / 2;

                // 왼쪽 마진 설정
                if (myWidth >= 1000) {

                    objFrom.style.paddingLeft = offsetWidth;
                }
                else {
                    objFrom.style.paddingLeft = 0;
                }
            }
        </script>

        <!-- 항상따라다니는 Div창 & 자동 창 크기 설정 스크립트 종료 -->