Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
tree: 821db19e08
Fetching contributors…

Cannot retrieve contributors at this time

85 lines (68 sloc) 3.243 kb
<!DOCTYPE HTML>
<html>
<head>
<title>Scroll Demo - Normal</title>
<link rel="stylesheet" href="ui.css" />
<script type="text/javascript" src="../src/Animate.js"></script>
<script type="text/javascript" src="../src/Scroller.js"></script>
<!-- Common Library -->
<script type="text/javascript" src="../src/common/Engine.js"></script>
<script type="text/javascript" src="../src/common/Style.js"></script>
</head>
<body>
<div id="container">
<div id="content"></div>
</div>
<div id="settings">
<div><label for="scrollingX">ScrollingX: </label><input type="checkbox" id="scrollingX" checked/></div>
<div><label for="scrollingY">ScrollingY: </label><input type="checkbox" id="scrollingY" checked/></div>
<div><label for="animating">Animating: </label><input type="checkbox" id="animating" checked/></div>
<div><label for="bouncing">Bouncing: </label><input type="checkbox" id="bouncing" checked/></div>
<div><label for="locking">Locking: </label><input type="checkbox" id="locking" checked/></div>
<div><label for="zooming">Zooming: </label><input type="checkbox" id="zooming" checked/></div>
<div><label for="minZoom">Min Zoom: </label><input type="text" id="minZoom" size="5" value="0.5"/></div>
<div><label for="maxZoom">Max Zoom: </label><input type="text" id="maxZoom" size="5" value="3"/></div>
<div><label for="zoomLevel">Zoom Level: </label><input type="text" id="zoomLevel" size="5"/></div>
<div><button id="zoom">Zoom to Level</button><button id="zoomIn">+</button><button id="zoomOut">-</button></div>
<div><label for="scrollLeft">Scroll Left: </label><input type="text" id="scrollLeft" size="9"/></div>
<div><label for="scrollTop">Scroll Top: </label><input type="text" id="scrollTop" size="9"/></div>
<div><button id="scrollTo">Scroll to Coords</button></div>
<div><button id="scrollByUp">&uarr;</button><button id="scrollByDown">&darr;</button><button id="scrollByLeft">&larr;</button><button id="scrollByRight">&rarr;</button></div>
</div>
<!-- Custom rendering code -->
<script src="dom-render.js"></script>
<script type="text/javascript">
// Settings
var contentWidth = 2000;
var contentHeight = 2000;
var cellWidth = 100;
var cellHeight = 100;
// Initialize layout
var container = document.getElementById("container");
var content = document.getElementById("content");
content.style.width = contentWidth + "px";
content.style.height = contentHeight + "px";
// Generate content
var size = 100;
var frag = document.createDocumentFragment();
for (var row=0, rl=contentHeight/size; row<rl; row++) {
for (var col=0, cl=contentWidth/size; col<cl; col++) {
elem = document.createElement("div");
elem.style.backgroundColor = row%2 + col%2 > 0 ? "#ddd" : "";
elem.style.width = cellWidth + "px";
elem.style.height = cellHeight + "px";
elem.style.display = "inline-block";
elem.style.textIndent = "6px";
elem.innerHTML = row + "," + col;
frag.appendChild(elem);
}
}
content.appendChild(frag);
var render = function(left, top, zoom) {
domRender(content, left, top, zoom)
};
</script>
<!-- Create Scroller, bind UI layer and mouse/touch events -->
<script src="ui.js"></script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.