Отображать значения ширины и высоты в реальном времени при изменении размера окна

Question

В заголовке html:

<script type="text/javascript">
    var myWidth = 0, myHeight = 0;
    if( typeof( window.innerWidth ) == 'number' ) {
        myWidth = window.innerWidth; myHeight = window.innerHeight;
    } else if( document.documentElement && ( document.documentElement.clientWidth ||document.documentElement.clientHeight ) ) {
        myWidth = document.documentElement.clientWidth; myHeight = document.documentElement.clientHeight;
    } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
        myWidth = document.body.clientWidth; myHeight = document.body.clientHeight;
    }
</script>

В теле html:

<script type="text/javascript">
    document.write('<p>' + myWidth + 'x' + myHeight + '</p>');
</script>

Работает хорошо.Вопрос заключается в следующем: как можно отобразить значения ширины / высоты при изменении размера браузера?Как здесь http://quirktools.com/screenfly/ в левом нижнем углу.

Большое спасибо!

Answer 1

Мне нравится решение gilly3, но было бы полезно иметь полный код (для тех, кто спешит!)

<script>
    window.onresize = displayWindowSize;
    window.onload = displayWindowSize;

    function displayWindowSize() {
        myWidth = window.innerWidth;
        myHeight = window.innerHeight;
        // your size calculation code here
        document.getElementById("dimensions").innerHTML = myWidth + "x" + myHeight;
    };
</script>

Answer 2

Привязать к window.onresize.Не используйте document.write().Вставьте <p> в ваш HTML и дайте ему идентификатор.Затем просто установите innerHTML элемента напрямую:

window.onresize = displayWindowSize;
window.onload = displayWindowSize;
function displayWindowSize() {
    // your size calculation code here
    document.getElementById("dimensions").innerHTML = myWidth + "x" + myHeight;
};

Answer 3

Или, если вы уже используете jquery, вы можете использовать .resize(<i>handler</i>) для захвата события изменения размера и .resize() без каких-либо параметров для запуска начального события, когдаокно загружено.

Пример:

$(window).resize(function() {
    // your size calculation code here
    $("#dimensions").html(myWidth);
}).resize();

Демонстрация в Fiddle