dojo
Version:
Dojo core is a powerful, lightweight library that makes common tasks quicker and easier. Animate elements, manipulate the DOM, and query with easy CSS syntax, all without sacrificing performance.
72 lines (68 loc) • 2.76 kB
HTML
<html>
<head>
<title>dojo.window.getBox() test</title>
<link rel="stylesheet" href="../../../resources/dojo.css">
<style type="text/css">
html, body { margin: 0px; padding: 0px; }
</style>
<script type="text/javascript" src="../../../dojo.js"
data-dojo-config="async: true, isDebug: true"></script>
<script type="text/javascript">
var ready = false;
require([
'dojo/dom',
'dojo/dom-geometry',
'dojo/window',
'dojo/domReady!'
], function (dom, domGeom, winUtils) {
window.compute = function () {
var v = winUtils.getBox();
var d = domGeom.getMarginBox(dom.byId('documentBorder'));
dom.byId('viewportHeight').value = v.h;
dom.byId('viewportWidth').value = v.w;
dom.byId('documentHeight').value = d.h;
dom.byId('documentWidth').value = d.w;
}
window.addText = function () {
dom.byId('results').innerHTML += 'Adding text...<br><br>';
var text = [];
for(var i = 0; i < 100; i++) {
text.push('<span style="white-space: nowrap">');
for (var j = 0; j < 3; j++) {
text.push('Now is the time for all good men to come to the aid of their country.');
}
text.push('<' + '/span><br>');
}
dom.byId('documentBorder').innerHTML += text.join('\n');
}
ready = true;
});
</script>
</head>
<body>
<div id="documentBorder" style="border: solid red 2px;">
<h1>dojo/window.getBox() test</h1>
<div style="padding: 10px; border: solid blue 1px;">padding div</div>
<button onclick="addText(); compute();">add text and compute size</button>
<button onclick="compute();">recompute size</button>
<ol>
<li>check results div below to see that before adding text, document is smaller than viewport
<li>after adding text, document should be bigger than viewport,and check that viewport size hasn't changed,
except maybe being a little bit smaller (about 15px) because of the size of the scrollbars
<li>resize browser window and click the "recompute size" button; reported viewport size should change
<li>scroll the window and click "recompute size" to see that the scroll position is taken into effect
</ol>
<div id=results style="border: 5px solid blue;"></div>
<label for="viewportHeight" >ViewPort Height:</label>
<input id="viewportHeight" type=text/>
<label for="viewportWidth" >ViewPort Width:</label>
<input id="viewportWidth" type=text/>
<br>
<label for="documentHeight" >Document Border Height:</label>
<input id="documentHeight" type=text/>
<label for="documentWidth" >Document Border Width:</label>
<input id="documentWidth" type=text/>
</div>
</body>
</html>