YUI 3.x Home -

Site Search (YDN & YUIBlog):

# YUI Library Examples: Node: Measuring the Window and Document

## Node: Measuring the Window and Document

This example shows how to measure the size of the window and document.

View example in new window.

Window size
  Click me to find out
Document size
  Click me to find out

### Setting up the HTML

First we need some HTML to work with.

    <dl id="demo">    <dt>Window size</dt>    <dd class="yui-data-win">Click me to find out</dd>    <dt>Document size</dt>    <dd class="yui-data-doc">Click me to find out</dd></dl>

    <dl id="demo">
        <dt>Window size</dt>
        <dd class="yui-data-win">Click me to find out</dd>
        <dt>Document size</dt>
        <dd class="yui-data-doc">Click me to find out</dd>
    </dl>

<dl id="demo"> <dt>Window size</dt> <dd class="yui-data-win">Click me to find out</dd> <dt>Document size</dt> <dd class="yui-data-doc">Click me to find out</dd> </dl>

### Getting the Dimensions

In this example, we will listen for clicks on the `DD` elements and update them with screen information.

    var onClick = function(e) {    var target = e.target,        h, w;     if (target.test('dd')) {        if (target.test('.yui-data-win')) {            h = target.get('winHeight');            w = target.get('winWidth');        } else if (target.test('.yui-data-doc')) {            h = target.get('docHeight');            w = target.get('docWidth');         }        target.set('innerHTML', 'width: ' + w + ' height: ' + h);    }};

    var onClick = function(e) {
        var target = e.target,
            h, w;

        if (target.test('dd')) {
            if (target.test('.yui-data-win')) {
                h = target.get('winHeight');
                w = target.get('winWidth');
            } else if (target.test('.yui-data-doc')) {
                h = target.get('docHeight');
                w = target.get('docWidth');

            }
            target.set('innerHTML', 'width: ' + w + ' height: ' + h);
        }
    };

var onClick = function(e) { var target = e.target, h, w; if (target.test('dd')) { if (target.test('.yui-data-win')) { h = target.get('winHeight'); w = target.get('winWidth'); } else if (target.test('.yui-data-doc')) { h = target.get('docHeight'); w = target.get('docWidth'); } target.set('innerHTML', 'width: ' + w + ' height: ' + h); } };

### Adding a Click Listener

Now we just assign the click handler to the `DL` that will allow us to use event bubbling to handle clicks on each `DD`.

    Y.one('#demo').on('click', onClick);

    Y.one('#demo').on('click', onClick);

Y.one('#demo').on('click', onClick);

### Full Script Source

    YUI().use('node', function(Y) {    var onClick = function(e) {        var target = e.target,            h, w;         if (target.test('dd')) {            if (target.test('.yui-data-win')) {                h = target.get('winHeight');                w = target.get('winWidth');            } else if (target.test('.yui-data-doc')) {                h = target.get('docHeight');                w = target.get('docWidth');             }            target.set('innerHTML', 'width: ' + w + ' height: ' + h);        }    };     Y.one('#demo').on('click', onClick);});

    YUI().use('node', function(Y) {
        var onClick = function(e) {
            var target = e.target,
                h, w;

            if (target.test('dd')) {
                if (target.test('.yui-data-win')) {
                    h = target.get('winHeight');
                    w = target.get('winWidth');
                } else if (target.test('.yui-data-doc')) {
                    h = target.get('docHeight');
                    w = target.get('docWidth');

                }
                target.set('innerHTML', 'width: ' + w + ' height: ' + h);
            }
        };

        Y.one('#demo').on('click', onClick);
    });

YUI().use('node', function(Y) { var onClick = function(e) { var target = e.target, h, w; if (target.test('dd')) { if (target.test('.yui-data-win')) { h = target.get('winHeight'); w = target.get('winWidth'); } else if (target.test('.yui-data-doc')) { h = target.get('docHeight'); w = target.get('docWidth'); } target.set('innerHTML', 'width: ' + w + ' height: ' + h); } }; Y.one('#demo').on('click', onClick); });

Copyright © 2009 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings