sku-pg
Version:
Skulpt is a Javascript implementation of Python 2.x. Python that runs in your browser!
130 lines (115 loc) • 3.03 kB
HTML
<!--
Author: eae@google.com (Emil A Eklund)
-->
<html>
<!--
Copyright 2008 The Closure Library Authors. All Rights Reserved.
Use of this source code is governed by an Apache 2.0 License.
See the COPYING file for details.
-->
<head>
<title>Closure Manual Test - goog.style.getViewportForElement</title>
<script src="../base.js"></script>
<script>
goog.require('goog.style');
</script>
<style>
#test1, #test2, #test3 {
overflow: auto;
}
#test1 {
width: 400px;
height: 400px;
border: 1px solid black;
padding: 40px;
position: relative;
z-index: 1;
}
#test2 {
width: 100px;
height: 100px;
border: 1px solid green;
margin: 7px;
padding: 30px;
}
#test3 {
width: 200px;
height: 200px;
border: 5px solid blue;
padding: 45px;
margin: 10px;
}
#overlay, #overlay2 {
position: absolute;
opacity: 0.5;
}
#overlay {
background: lime;
}
#overlay2 {
border: 4px solid red;
}
</style>
</head>
<body>
<div id="test1">
Scrolling container
<div id="test2">
Scrolling container
<div id="test3">
The visible part of this container should be covered by the green field.
<br>
<span id="test-span">Test Element</span>
<div style="height: 400px;"> </div>
<span id="test-span">Test Element</span>
</div>
<div style="height: 400px;"> </div>
</div>
<div style="height: 400px;"> </div>
</div>
<div style="height: 400px; width: 4000px;"> </div>
<span id="test-span2">Test</span>
<div id="overlay"></div>
<div id="overlay2"></div>
<p>
The green field should cover the visible part of the container with a blue
border. The thick red border should always be around the main document
viewport.
</p>
<p>
The elements are repositioned every two seconds.
</p>
<script>
document.documentElement.scrollLeft = 100;
document.body.scrollLeft = 100;
document.getElementById('test1').scrollTop = 100;
document.getElementById('test2').scrollLeft = 50;
document.getElementById('test2').scrollTop = 70;
document.getElementById('test3').scrollTop = 300;
function updateOverlay(element, overlay, borderWidth) {
var elementBox = goog.style.getVisibleRectForElement(element);
if (elementBox) {
overlay.style.top = elementBox.top + 'px';
overlay.style.left = elementBox.left + 'px';
overlay.style.width = (elementBox.right - elementBox.left -
borderWidth * 2) + 'px';
overlay.style.height = (elementBox.bottom - elementBox.top -
borderWidth * 2) + 'px';
overlay.style.display = 'block';
}
else {
overlay.style.display = 'none';
}
}
function update() {
updateOverlay(document.getElementById('test-span'),
document.getElementById('overlay'), 0);
updateOverlay(document.getElementById('test-span2'),
document.getElementById('overlay2'), 4);
}
update();
window.setInterval('update();', 2000);
</script>
</body>
</html>