can
Version:
MIT-licensed, client-side, JavaScript framework that makes building rich web applications easy.
73 lines (70 loc) • 4.92 kB
HTML
<html>
<head>
<title>dojo.window.scrollIntoView Test with No DTD</title>
<style type="text/css">
@import "../../resources/dojo.css";
</style>
<script type="text/javascript" src="../../dojo.js"
data-dojo-config="isDebug: true"></script>
<script type="text/javascript">
require(["doh", "dojo/dom", "dojo/dom-geometry", "dojo/sniff", "dojo/window", "dojo/domReady!"],
function(doh, dom, domGeom, has, winUtils){
doh.register("window.scrollNoDTD",
function scrollIntoView(){
scrollTo(100,100);
var s2 = dom.byId('s2');
s2.scrollTop = s2.scrollLeft = 10;
winUtils.scrollIntoView('q2');
doh.is((has("mozilla") && !domGeom.isBodyLtr())? -87 : 87, s2.scrollLeft);
doh.is(113, s2.scrollTop);
doh.f(dojo.hasAttr(s2,'_offsetParent'));
doh.f(dojo.hasAttr(s2,'_parent'));
doh.f(dojo.hasAttr(s2,'_child'));
scrollTo(!domGeom.isBodyLtr() ? 4000 : 0, 4000);
}
);
doh.run();
});
</script>
</head>
<body>
<center><h1>Manually scroll and click elements that have a border<br>and they should scroll into view</h1></center>
<input style="float:left;display:block;border:1px solid black;padding:50px;" onclick="dojo.window.scrollIntoView(this);return false;" value="">
<input style="float:right;display:block;border:100px solid black;" onclick="dojo.window.scrollIntoView(this);return false;" size="20" value="">
<br>
<table style="display:block;margin:200px;border:0 solid white;border-width:0 300px 0 200px;"><tr><td><div style="background-color:white;border:2px solid black;width:400px;" onclick="dojo.window.scrollIntoView(this)"> </div></td></tr>
<tr><td><div style="width:1000px;background-color:white;border:1px solid black;" onclick="dojo.window.scrollIntoView(this)"> </div></td></tr></table>
<div style="height:70px;width:200px;overflow-y:scroll;position:absolute;top:50%;left:50%;">
<p> </p>
<p style="padding:5px;border:2px solid black;" onclick="dojo.window.scrollIntoView(this)"> </p>
<p> </p>
<p> </p>
</div>
<div style="height:70px;width:70px;position:absolute;top:600px;left:100px;padding:20px;border:10px solid black;" onclick="dojo.window.scrollIntoView(this)"> </div>
<div style="border:0px solid red;border:50px solid white;">
<img src="../../../dojo/resources/blank.gif" style="height:300px;width:1px;display:block;background-color:white;">
<div id="s1" style="width:600px;height:500px;overflow:scroll;background-color:white;border:0px solid white;margin:0px;padding:30px;"
><img src="../../../dojo/resources/blank.gif" style="border:1px solid black;height:100px;width:498px;display:block;margin:0 300px 0 0;" onclick="dojo.window.scrollIntoView(this)"
><nobr id="p1" style="display:block;border:0px;padding:0px;margin:0px;"
><img id="c1" src="../../../dojo/resources/blank.gif" style="height:400px;width:100px;display:inline;border:1px solid black;" onclick="dojo.window.scrollIntoView(this)"
><img id="q1" src="../../../dojo/resources/blank.gif" width=500 height=400 style="background-color:white;display:inline;border:50px solid black;" onclick="dojo.window.scrollIntoView(this)"
><img id="t1" src="../../../dojo/resources/blank.gif" style="height:400px;width:200px;display:inline;border:5px solid black;" onclick="dojo.window.scrollIntoView(this)"
></nobr
><img src="../../../dojo/resources/blank.gif" style="border:1px solid black;height:200px;width:598px;margin:0 0 0 300px;display:block;" onclick="dojo.window.scrollIntoView(this)"
></div>
<img src="../../../dojo/resources/blank.gif" style="height:200px;width:1px;display:block;">
<div style="width:2000px;"> </div>
</div>
<div id="s2" style="width:550px;height:550px;overflow:hidden;background-color:white;border:0px solid white;margin:0px;padding:0px;border-width:45px 35px 15px 25px;"
><img src="../../../dojo/resources/blank.gif" style="border:1px solid black;height:111px;width:548px;display:block;" onclick="dojo.window.scrollIntoView(this)"
><nobr id="p2" style="display:block;border:0px solid cyan;padding:0px;margin:0px;"
><img id="c2" src="../../../dojo/resources/blank.gif" style="height:548px;width:85px;display:inline;border:1px solid black;" onclick="dojo.window.scrollIntoView(this)"
><img id="q2" src="../../../dojo/resources/blank.gif" style="width:548px;height:548px;display:inline;border:1px solid black;" onclick="dojo.window.scrollIntoView(this)"
><img id="t2" src="../../../dojo/resources/blank.gif" style="height:548px;width:85px;display:inline;border:1px solid black;" onclick="dojo.window.scrollIntoView(this)"
></nobr
><img src="../../../dojo/resources/blank.gif" style="border:1px solid black;height:100px;width:498px;display:block;" onclick="dojo.window.scrollIntoView(this)"
></div>
<img src="../../../dojo/resources/blank.gif" style="height:255px;width:1px;display:block;">
<div style="width:2222px;"> </div>
</body>
</html>