Skip to content


Subversion checkout URL

You can clone with
Download ZIP
Tree: 821db19e08
Fetching contributors…

Cannot retrieve contributors at this time

85 lines (68 sloc) 3.243 kB
<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>
<div id="container">
<div id="content"></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>
<!-- 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"); = contentWidth + "px"; = 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"); = row%2 + col%2 > 0 ? "#ddd" : ""; = cellWidth + "px"; = cellHeight + "px"; = "inline-block"; = "6px";
elem.innerHTML = row + "," + col;
var render = function(left, top, zoom) {
domRender(content, left, top, zoom)
<!-- Create Scroller, bind UI layer and mouse/touch events -->
<script src="ui.js"></script>
Jump to Line
Something went wrong with that request. Please try again.