You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
190 lines
9.2 KiB
190 lines
9.2 KiB
2 years ago
|
<?xml version="1.0" encoding="UTF-8"?>
|
||
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
|
||
|
|
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:dojo="http://www.dojotoolkit.org/2004/dojoml" xmlns:xlink="http://www.w3.org/1999/xlink" xml:lang="en" lang="en">
|
||
|
|
<head>
|
||
|
|
<title>placeOnScreen & placeOnScreenPoint</title>
|
||
|
|
<script type="text/javascript">
|
||
|
|
// Dojo configuration
|
||
|
|
djConfig = {
|
||
|
|
isDebug: true
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
<script type="text/javascript" src="../dojo.js"></script>
|
||
|
|
<script type="text/javascript">
|
||
|
|
dojo.require("dojo.html.util");
|
||
|
|
dojo.require("dojo.event.*");
|
||
|
|
function init() {
|
||
|
|
dojo.event.connect(document, "onclick", function(e) {
|
||
|
|
dojo.html.placeOnScreen("test", e.clientX, e.clientY, 5, false, ['TL', 'TR', 'BL', 'BR']);
|
||
|
|
dojo.html.placeOnScreen("test2", e.clientX, e.clientY, 0, false);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
dojo.addOnLoad(init);
|
||
|
|
</script>
|
||
|
|
<style type="text/css">
|
||
|
|
html, body {
|
||
|
|
font-family : sans-serif;
|
||
|
|
cursor : crosshair;
|
||
|
|
}
|
||
|
|
|
||
|
|
#lipsum {
|
||
|
|
color : #ddd;
|
||
|
|
}
|
||
|
|
|
||
|
|
#test, #test2 {
|
||
|
|
position : absolute;
|
||
|
|
width : 200px;
|
||
|
|
height : 135px;
|
||
|
|
border : 1px solid;
|
||
|
|
color : blue;
|
||
|
|
font-weight : bold;
|
||
|
|
}
|
||
|
|
|
||
|
|
#test2 {
|
||
|
|
color : red;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="test">
|
||
|
|
placeOnScreenPoint
|
||
|
|
</div>
|
||
|
|
<div id="test2">
|
||
|
|
placeOnScreen
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="lipsum">
|
||
|
|
<h1>Demo of <code>keepOnScreen</code> and <code>keepOnScreenPoint</code></h1>
|
||
|
|
<p>
|
||
|
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc
|
||
|
|
lobortis nulla vel ante molestie facilisis. Fusce nec mauris. Integer
|
||
|
|
in velit. Suspendisse tellus. Nulla fermentum. Aliquam sapien erat,
|
||
|
|
vulputate vel, imperdiet eu, fringilla id, dui. Fusce in elit. Duis
|
||
|
|
condimentum tellus nec sem. Mauris hendrerit. Ut tortor lacus, volutpat
|
||
|
|
eu, auctor sed, porta eu, ipsum. Fusce ornare, diam blandit fermentum
|
||
|
|
imperdiet, nunc est posuere lacus, eget dignissim lacus velit porta mi.
|
||
|
|
Nullam sed tellus a est volutpat mattis. Nulla cursus erat ut enim.
|
||
|
|
Fusce nisi est, tempus id, facilisis eu, auctor a, quam. In feugiat
|
||
|
|
venenatis orci. Praesent sed est. Mauris sapien metus, consequat eu,
|
||
|
|
tincidunt eu, dapibus ut, massa. Nam nunc. Sed suscipit, diam non
|
||
|
|
commodo pretium, felis augue sollicitudin quam, ut gravida urna urna
|
||
|
|
nec sapien.
|
||
|
|
</p>
|
||
|
|
<p>Nunc eget purus. Vivamus pellentesque erat id massa. Ut nisi. Fusce
|
||
|
|
tincidunt nulla vel neque. Nulla facilisi. Maecenas molestie. Morbi
|
||
|
|
erat massa, pellentesque sit amet, mollis nec, sagittis nec, turpis.
|
||
|
|
Etiam non felis. Donec diam dui, posuere eget, pulvinar in, vestibulum
|
||
|
|
cursus, nulla. Aenean fringilla diam. In accumsan fringilla metus.
|
||
|
|
Pellentesque porta, mauris sed dictum blandit, orci augue fringilla
|
||
|
|
ante, sed sodales dui erat nec lacus. Vivamus felis elit, hendrerit
|
||
|
|
vel, dapibus vitae, euismod eget, velit.
|
||
|
|
</p>
|
||
|
|
<p>Nullam vitae justo placerat nunc elementum tempus. Suspendisse
|
||
|
|
molestie ligula nec pede. Mauris in nisi sit amet lectus ultrices
|
||
|
|
adipiscing. Mauris ante eros, lacinia sed, aliquam a, laoreet vel,
|
||
|
|
pede. Etiam sed nisl. Proin risus turpis, consectetuer sit amet, porta
|
||
|
|
et, laoreet at, nulla. Lorem ipsum dolor sit amet, consectetuer
|
||
|
|
adipiscing elit. Quisque placerat, lectus vitae consequat tempus,
|
||
|
|
ligula nunc tincidunt est, nec aliquam metus quam et sem. Vivamus
|
||
|
|
eleifend, tortor vel ultricies porta, urna sem interdum lectus, et
|
||
|
|
fermentum pede erat quis lacus. Phasellus volutpat, diam sit amet
|
||
|
|
volutpat sodales, felis diam volutpat mi, ac viverra nibh nibh ac
|
||
|
|
metus. Suspendisse potenti. Phasellus nisl magna, lacinia non, pretium
|
||
|
|
quis, dictum eget, risus. Sed rutrum. Phasellus at ipsum. Pellentesque
|
||
|
|
lacus lorem, porttitor eu, hendrerit eu, sodales id, lacus. Nunc nibh.
|
||
|
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc
|
||
|
|
porttitor.
|
||
|
|
</p>
|
||
|
|
<p>Etiam viverra pede in elit. Nunc accumsan fermentum arcu. In aliquet
|
||
|
|
nisl ac mauris. Nunc dolor. Etiam dapibus vestibulum lectus. Nulla quis
|
||
|
|
est nec lorem imperdiet porttitor. Morbi a ligula vitae leo feugiat
|
||
|
|
elementum. Vivamus augue sem, egestas nec, ultricies vitae,
|
||
|
|
consectetuer non, metus. Vestibulum ante ipsum primis in faucibus orci
|
||
|
|
luctus et ultrices posuere cubilia Curae; Quisque risus diam, ultricies
|
||
|
|
at, tempus ac, rutrum ac, nisl. Quisque non augue. Nullam a diam sit
|
||
|
|
amet magna volutpat porttitor. Donec convallis elit at tortor. Etiam
|
||
|
|
vulputate, libero sed placerat tincidunt, arcu erat auctor lacus, ac
|
||
|
|
adipiscing quam nibh eu quam. Fusce commodo pede eu velit. Aenean sit
|
||
|
|
amet nunc. Phasellus justo dui, congue in, pretium a, hendrerit in,
|
||
|
|
ante. Mauris ut dolor quis massa luctus interdum. Mauris quis libero.
|
||
|
|
Aenean accumsan tellus sed nunc.
|
||
|
|
</p>
|
||
|
|
<p>Nullam dictum pulvinar diam. In nisi leo, interdum eget, vestibulum
|
||
|
|
sit amet, blandit lacinia, justo. Donec nisi. Suspendisse at lacus. In
|
||
|
|
sit amet lorem. Sed pretium, leo sed pulvinar rhoncus, sapien urna
|
||
|
|
pulvinar urna, nec porta odio arcu eget quam. Cras varius condimentum
|
||
|
|
elit. Phasellus massa dolor, dictum adipiscing, ultricies et, rhoncus
|
||
|
|
eu, ligula. Nunc placerat ultrices ante. Praesent ac tortor. Quisque
|
||
|
|
suscipit, mauris sed scelerisque placerat, felis justo venenatis dui,
|
||
|
|
sit amet sodales lacus lorem ac diam. Lorem ipsum dolor sit amet,
|
||
|
|
consectetuer adipiscing elit.
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc
|
||
|
|
lobortis nulla vel ante molestie facilisis. Fusce nec mauris. Integer
|
||
|
|
in velit. Suspendisse tellus. Nulla fermentum. Aliquam sapien erat,
|
||
|
|
vulputate vel, imperdiet eu, fringilla id, dui. Fusce in elit. Duis
|
||
|
|
condimentum tellus nec sem. Mauris hendrerit. Ut tortor lacus, volutpat
|
||
|
|
eu, auctor sed, porta eu, ipsum. Fusce ornare, diam blandit fermentum
|
||
|
|
imperdiet, nunc est posuere lacus, eget dignissim lacus velit porta mi.
|
||
|
|
Nullam sed tellus a est volutpat mattis. Nulla cursus erat ut enim.
|
||
|
|
Fusce nisi est, tempus id, facilisis eu, auctor a, quam. In feugiat
|
||
|
|
venenatis orci. Praesent sed est. Mauris sapien metus, consequat eu,
|
||
|
|
tincidunt eu, dapibus ut, massa. Nam nunc. Sed suscipit, diam non
|
||
|
|
commodo pretium, felis augue sollicitudin quam, ut gravida urna urna
|
||
|
|
nec sapien.
|
||
|
|
</p>
|
||
|
|
<p>Nunc eget purus. Vivamus pellentesque erat id massa. Ut nisi. Fusce
|
||
|
|
tincidunt nulla vel neque. Nulla facilisi. Maecenas molestie. Morbi
|
||
|
|
erat massa, pellentesque sit amet, mollis nec, sagittis nec, turpis.
|
||
|
|
Etiam non felis. Donec diam dui, posuere eget, pulvinar in, vestibulum
|
||
|
|
cursus, nulla. Aenean fringilla diam. In accumsan fringilla metus.
|
||
|
|
Pellentesque porta, mauris sed dictum blandit, orci augue fringilla
|
||
|
|
ante, sed sodales dui erat nec lacus. Vivamus felis elit, hendrerit
|
||
|
|
vel, dapibus vitae, euismod eget, velit.
|
||
|
|
</p>
|
||
|
|
<p>Nullam vitae justo placerat nunc elementum tempus. Suspendisse
|
||
|
|
molestie ligula nec pede. Mauris in nisi sit amet lectus ultrices
|
||
|
|
adipiscing. Mauris ante eros, lacinia sed, aliquam a, laoreet vel,
|
||
|
|
pede. Etiam sed nisl. Proin risus turpis, consectetuer sit amet, porta
|
||
|
|
et, laoreet at, nulla. Lorem ipsum dolor sit amet, consectetuer
|
||
|
|
adipiscing elit. Quisque placerat, lectus vitae consequat tempus,
|
||
|
|
ligula nunc tincidunt est, nec aliquam metus quam et sem. Vivamus
|
||
|
|
eleifend, tortor vel ultricies porta, urna sem interdum lectus, et
|
||
|
|
fermentum pede erat quis lacus. Phasellus volutpat, diam sit amet
|
||
|
|
volutpat sodales, felis diam volutpat mi, ac viverra nibh nibh ac
|
||
|
|
metus. Suspendisse potenti. Phasellus nisl magna, lacinia non, pretium
|
||
|
|
quis, dictum eget, risus. Sed rutrum. Phasellus at ipsum. Pellentesque
|
||
|
|
lacus lorem, porttitor eu, hendrerit eu, sodales id, lacus. Nunc nibh.
|
||
|
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc
|
||
|
|
porttitor.
|
||
|
|
</p>
|
||
|
|
<p>Etiam viverra pede in elit. Nunc accumsan fermentum arcu. In aliquet
|
||
|
|
nisl ac mauris. Nunc dolor. Etiam dapibus vestibulum lectus. Nulla quis
|
||
|
|
est nec lorem imperdiet porttitor. Morbi a ligula vitae leo feugiat
|
||
|
|
elementum. Vivamus augue sem, egestas nec, ultricies vitae,
|
||
|
|
consectetuer non, metus. Vestibulum ante ipsum primis in faucibus orci
|
||
|
|
luctus et ultrices posuere cubilia Curae; Quisque risus diam, ultricies
|
||
|
|
at, tempus ac, rutrum ac, nisl. Quisque non augue. Nullam a diam sit
|
||
|
|
amet magna volutpat porttitor. Donec convallis elit at tortor. Etiam
|
||
|
|
vulputate, libero sed placerat tincidunt, arcu erat auctor lacus, ac
|
||
|
|
adipiscing quam nibh eu quam. Fusce commodo pede eu velit. Aenean sit
|
||
|
|
amet nunc. Phasellus justo dui, congue in, pretium a, hendrerit in,
|
||
|
|
ante. Mauris ut dolor quis massa luctus interdum. Mauris quis libero.
|
||
|
|
Aenean accumsan tellus sed nunc.
|
||
|
|
</p>
|
||
|
|
<p>Nullam dictum pulvinar diam. In nisi leo, interdum eget, vestibulum
|
||
|
|
sit amet, blandit lacinia, justo. Donec nisi. Suspendisse at lacus. In
|
||
|
|
sit amet lorem. Sed pretium, leo sed pulvinar rhoncus, sapien urna
|
||
|
|
pulvinar urna, nec porta odio arcu eget quam. Cras varius condimentum
|
||
|
|
elit. Phasellus massa dolor, dictum adipiscing, ultricies et, rhoncus
|
||
|
|
eu, ligula. Nunc placerat ultrices ante. Praesent ac tortor. Quisque
|
||
|
|
suscipit, mauris sed scelerisque placerat, felis justo venenatis dui,
|
||
|
|
sit amet sodales lacus lorem ac diam. Lorem ipsum dolor sit amet,
|
||
|
|
consectetuer adipiscing elit.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|