Sliding Around

Example 24-1 shows what the HTML of our page looks like.

Example 24-1. HTML of sliding function
<html>
<head>
    <title>keypress slider</title>
</head>
<body onLoad="moveImage()">

<div id="blockDiv" style="position:absolute; left:317px; top130px;">
<br><br><br><br>Hi there
</div>

Use <b>A</b> to move left, <b>D</b> to move right.

</body>
</html>

Not much going on here. We have a single layer, some HTML that's not in the layer, and a call to the moveImage() function when the page is finished loading. Example 24-2 shows what the scripting portion looks like:

Example 24-2. Scripting portion
<script language="JavaScript">
// credit Massimo Giari
n = (document.layers) ? 1 : 0 n6 = (document.getElementById) ? 1 : 0 ie = (document.all) ...

Get Advanced JavaScript™: Insights and Innovative Techniques now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial