Ruru's PlayGround :)

"status:no;dialogWidth:765px;dialogHeight:"+height+"px;help:no;scroll:no;edge:sunken;resizable=yes"

상태바가 보일지 여부, 도움말 버튼이 보일지 여부 사이즈나 테두리 사이즈 조절이 가능할지 여부등의 옵션이 존재한다.

페이지와 종속적인 모달 다이얼로그를 실행하고 싶을땐 한번쯤 위 옵션을 이용해서 테스트 해보도록 하자~

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

Window size and scrolling

Finding the size of the browser window

• Clue browser can only work out window width.
• Tkhtml Hv3 has the values reversed, but in an undetectable way, so it cannot work with this script.

There are some constants available that give the document area of the window that is available for writing to. These will not be available until after the document has loaded and the method used for referencing them is browser specific. The available constants are:

window.innerHeight/Width

Provided by most browsers, but importantly, not Internet Explorer.

document.body.clientHeight/Width

Provided by many browsers, including Internet Explorer.

document.documentElement.­clientHeight/Width

Provided by most DOM browsers, including Internet Explorer.

This is a little messy because the clientHeight/Width properties can mean different things in different browsers, and even different things in the same browser, depending on whether the document type declaration triggers the browser's strict mode or quirks mode. In some cases, they refer to the dimensions of the window, and sometimes they refer to the dimensions of the contents of the document. The table below shows what the properties mean in different browsers, and different modes:

As you can see, the browsers seem to have settled on at least one reliable property; innerHeight. Internet Explorer is the only one that cannot make up its mind. Its influence may mean that other browsers change their clientHeight behaviour later. For now, almost all browsers provide window.innerHeight/Width so that can be used. Internet Explorer has chosen to swap the values around when it is in strict mode. Fortunately, it gives 0 in quirks mode. This means that if we see a value on the documentElement's properties, and the browser does not provide the properties on the window object, we can assume it is Internet Explorer in strict mode.

The most accurate method I could come up with uses the following algorithm, although it may have problems with future browsers, a situation which I am definitely not happy with:

1. If window.innerHeight/Width is provided, that is fully trustworthy, use that (Hooray!).
2. Else if document.documentElement.clientHeight/Width is provided and either one is greater than 0, use that.
3. Else use document.body.clientHeight/Width.

This algorithm will fail with IE 6+ in 'standards compliant mode' if the window is shrunk to 0px by 0px. This is only possible when the user actively shrinks the window to hide the page within it. Even then, it will just give the height of the document instead, so it should not be a problem. The following code performs the algorithm as described.

function alertSize() {
  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;
  }
  window.alert( 'Width = ' + myWidth );
  window.alert( 'Height = ' + myHeight );
}

Test it here: get the inner dimensions of this window.

Note that browsers may take the width either inside or outside the scrollbar (if there is one). I do not cover any way to work with these differences.

Finding how far the window has been scrolled

• OmniWeb 4.2-, NetFront 3.3- and Clue browser do not provide any way to do this.
• Safari and OmniWeb 4.5+ have bugs that do not affect this script - see below.

When trying to produce document effects like falling snow, or more serious things like menus that remain in the same place relative to the browser window when the user scrolls, it is essential to be able to obtain the scrolling offsets in both the horizontal and vertical direction.

There are also three ways to find this out, but it is easier than finding the size of the window. Most browsers provide window.pageXOffset/pageYOffset. These are completely reliable. Once again, Internet Explorer is the odd one out, as it does not provide these properties. Internet Explorer and some other browsers will provide document.body.scrollLeft/Top. In strict mode, IE 6 and a few other browsers, provide document.documentElement.scrollLeft/Top.

If the scrollLeft/Top properties are provided on either the document.body or document.documentElement, they are reliable in everything except Safari and OmniWeb 4.5+, which return -8 if the scrolling is 0, but get all other scrolling offsets correct. However, as they correctly provide window.pageXOffset/pageYOffset, this script will not have any problems.

The following script will obtain the scrolling offsets.

function getScrollXY() {
  var scrOfX = 0, scrOfY = 0;
  if( typeof( window.pageYOffset ) == 'number' ) {
    //Netscape compliant
    scrOfY = window.pageYOffset;
    scrOfX = window.pageXOffset;
  } else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
    //DOM compliant
    scrOfY = document.body.scrollTop;
    scrOfX = document.body.scrollLeft;
  } else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
    //IE6 standards compliant mode
    scrOfY = document.documentElement.scrollTop;
    scrOfX = document.documentElement.scrollLeft;
  }
  return [ scrOfX, scrOfY ];
}

Test it here: get the scrolling offsets.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

1초마다 현재 날자 시간을 구하는 함수를 호출하도록 하는 setTimeout() 함수가 중요하게 사용된다.

이 예제를 해보면 많이 주기적으로 실행되는 스크립트에 도움이 되지 않을까 생각한다 ^ ^


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>상태바의 날자표시</title>
   
    <script type="text/javascript">
    <!--//
    var id;
   
    function getNowDate()
    {
        var d = new Date();
        return "오늘은 "
            + d.getFullYear() + "년 "
            + d.getMonth() + "월 "
            + d.getDate() + "일 "
            + d.getDay() + "요일 "
            + d.getHours() + "시 "
            + d.getMinutes() + "분 "
            + d.getSeconds() + "초";
    }
   
    function printToStatus()
    {
        window.status = getNowDate();
        id = setTimeout('printToStatus()', 1000);
    }
   
    function printStop()
    {
        clearTimeout(id);
    }
    //-->
    </script>
</head>
<body onload="printToStatus()">

    <h1>상태 표시줄에 시간 가는 예제</h1>
   
    <input id="Button1" type="button" value="시계작동" onclick="printToStatus()" />
    <input id="Button2" type="button" value="시계멈춤" onclick="printStop()" />
   
</body>
</html>

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.