/
fit3.html
53 lines (51 loc) · 1.48 KB
/
fit3.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>fittable</title>
<style type='text/css'>
body { font-family: verdana;}
.container {
/*position:relative;*/
height:800px;
border:2px solid #CCCCCC;
overflow:auto;
}
.topPadding {height:10px}
.bottomPadding {height: 400px;}
#fittable {width:140px;background-color:#AAAAAA;border:1px solid blue;}
</style>
<link type="text/css" href="../../mxui/combobox/combobox.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div class="topPadding"></div>
<p>The window as the scrollable container</p>
<input id="target" type="text" name="myname" value="click here to move"/>
<div id='fittable'>Demo Fittable</div>
<div class="bottomPadding"></div>
</div>
<script type='text/javascript'
src='../../steal/steal.js'>
</script>
<script type='text/javascript'>
steal("mxui/fittable").then(function($){
var items = function(n) {
var items = ["<ul>"];
for(var i=0;i<n;i++){
items.push("<li>item" + i + "</li>");
}
items.push("</ul>");
return items.join("");
}
$("#fittable").css("opacity",0).html( items(50));
$("#target").click(function(ev){
$("#fittable").fit({
within:300,
of:$("#target")
}).css("opacity",1);
});
});
</script>
</body>
</html>