YUI Library Examples: Node: Measuring the Window and Document

Node: Measuring the Window and Document

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>

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);
    }
};

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);

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);
});