Node: Measuring the Window and Document
+ +
+
+
+
+
+
+ This example shows how to measure the size of the window and document.
+ +
+
+
+
+
+
+
+
+
+
+ -
+
- 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>
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); + } +}; +
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);
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); +});
