Position: Dynamic
To give you a taste of this trick, which is shaping up to be the next big Web cliché, let's muck around with that useful little Stop button. In keeping with the spirit of past Web innovations, like Java and the animated GIF, we'll use dynamic positioning to make our button harder to use and more annoying - that is, we'll make stopping our slide show into a game.
As with the visibility property, a layer's top and left properties are also exposed to scripting, and they may be changed at any time. This can happen either in response to a system event - for example, a click, drag, or mouseover - or at an arbitrary time defined by setTimeout:
/* On a
mouseover, increment value of "left" by 10
(using
Explorer syntax): */
onMouseOver
= "this.style.left += 10;"
/* Halve
the left offset after one second
(using
Netscape syntax): */
setTimeout('document.layerName.left
/= 2',1000);
If you adjust a layer's position by small increments many times a second, you've produced an animation. And you can use this technique to animate any page content - not just images, but also text, plug-in media, or anything else you can put in a layer.
In this case, the layer contains our stop button:
<DIV ID="stopButton" Style="position: absolute;
top: 70px; left: 100px; visibility: visible;">
<FORM><INPUT Type="button" Value="stop"
onClick="stopShow();"></FORM>
</DIV>
When the page loads, this layer's default position is 70 pixels from the top and 100 pixels from the left of the page. Let's leave the value of top alone and concentrate on messing with left.
The plan is to have the button zip back and forth across the top of the page, starting at its initial point (left: 100px), running out to a left value of 400 pixels, and then retracing its path. We do this by progressively adding 5 pixels to its left value until that reaches 400, then subtracting 5 pixels until its value returns to 100, and then starting all over.
First we define a few global variables: one to store the layer's current position, one to keep track of which direction it's moving, and a third to reference a timeout loop:
var
currentPosition = 100;
// left
position, in pixels
var
movingLeft = true;
// true
while left value increases
var
rerunButton;
//
stores repeating task
The animation will be handled by a self-repeating function whose behavior depends on the current values of these three variables. The basic logic is this:
Check the state of movingLeft; if it's true, we're going to add pixels; if it's false, we subtract them.
Check the value of currentPosition; if we're moving left and it's less than 400, keep adding pixels; if we've reached 400, turn around.
If we're moving right (if movingLeft is false) and currentPosition is still greater than 100, keep subtracting pixels; if we've reached 100, turn around.
Repeat the process every 10 milliseconds until the user hits the Stop button or bails out entirely.
Here's how it looks in actual code:
function
moveButton() {
/* Check
the value of movingLeft; if it's
true,
see how currentPosition compares
with
400. If less than 400, add 5 pixels
to it;
if it's reached 400, turn around (set
movingLeft
to "false") and subtract 5 pixels
*/
if
(movingLeft) {
if
(currentPosition < 400) currentPosition += 5;
else {
movingLeft = false; currentPosition -= 5; }
} else {
/* If
we've gotten here, we're moving right.
Compare
the value of currentPosition with 100.
If
greater than 100, subtract 5 pixels; if it's
reached
100, turn around (set movingLeft to
"true")
and add 5 pixels
*/
if
(currentPosition > 100) currentPosition -= 5;
else {
movingLeft = true; currentPosition += 5; }
}
/* now
move the layer to the new position: */
if (ie)
stopButton.style.left = currentPosition;
else
document.stopButton.left = currentPosition;
// and
start all over
rerunButton
= setTimeout('moveButton()',10);
}
Since we want this function to run when, and only when, the animation is active, we can start and stop them at the same time. This means three simple modifications to our existing code. First we have to get the button rolling when the page loads:
<BODY
BgColor="#000000" Text="#f6e48e"
onLoad="nextImage();
moveButton();">
Next we add a line to the stopShow() function to clear our new timeout if the user manages to nail the Stop button, plus a few more lines to reset its position:
function
stopShow() {
if
(rerun) clearTimeout(rerun);
if
(rerunButton) clearTimeout(rerunButton);
...
stopLayer.left
= 100;
currentPosition
= 100;
...
}
And finally we modify startShow() to
resume the button animation along with the slide show:
function
startShow() {
rerun =
setTimeout('nextImage()',50);
rerunButton
= setTimeout('moveButton()',100);
...
}
Figures 6a-c show the results at various points in the timeline,
while Figure 7 shows the state after hitting the Stop
button. The real thing is also available online, at www.atlasmagazine.com/dhtml/slide2.html.
This version adds one more very interesting feature to
the code included here, whose full effect, however,
requires Netscape:
<DIV
ID=source Style="position:absolute;
top:
350; left: 50px; z-index: 0;
include-source:
url(slide2.txt)"></DIV>
Dynamic Tools
If you stuck out the entire slide-show saga, you're
liable to feel that we just went through a lot of trouble
for not much effect. And while it's true that this
particular example will win no awards, the exact same
techniques - and whole pieces of the code - could be
applied toward much more artful ends.
If you're planning to develop DHTML, you owe it to yourself to come to some terms with the language. Especially at this stage of the game, you'll be doing plenty of troubleshooting, which means reading through raw ASCII. And on the creative side, knowing the language means knowing what's possible, and it's the key to innovation. While the techniques and tools are still fresh - or rather, still raw - there's a lot of room for creative ambition.
That said, visual DHTML development tools are practically a must for building rich, complex pages. With HTML, it's harder to do good work with visual tools than with text editors, since all interesting HTML requires customized, often unorthodox, solutions. Visual HTML tools free you from hand-coding tags, but they're structurally rigid as a class, and they won't write any JavaScript for you.
DHTML, however, is another beast. Simple dynamic positioning is doable by hand, but elegant effects can take days to achieve. The number of variables quickly grows mind-boggling, and precise adjustments become nearly impossible. Luckily, the visual tools for DHTML, though still in their infancy, look very promising. On the whole, they're smarter and more powerful than even the best HTML editors, though not all of them shine at plain HTML.
The most exciting of these tools, Macromedia Dreamweaver, promises the best of both worlds: a strong WYSIWYG page builder combined with automated scripting of dynamic behaviors. Dreamweaver uses CSS-P layers, rather than the traditional tables, for precision layout, which means the results won't look great in older browsers, if they work at all. However, tables are supported, as are frames, so with some work you can still achieve backward compatibility.
Dreamweaver borrows many concepts and interface elements from other products in Macromedia's line, principally Flash and Director. You can drag layers into a Flash-like timeline, set keyframes and assign behaviors, and build libraries of shared resources. Multimedia authors should feel relatively at home in Dreamweaver, as will those familiar with visual page-building products such as Adobe PageMill and GoLive CyberStudio. Even professional coders will find Dreamweaver a tool they can work with, as it can tightly (and unobtrusively) interface with tools such as Bare Bones BBEdit and Allaire HomeSite. The first application for some time that Macromedia has built rather than acquired, Dreamweaver 1.0 was released in December.
Also intriguing is Interactor from mBED Software, another new product that builds on established authoring paradigms. Interactor allows you to assemble a cast of images, media, and sprites, and to control their interaction on a stage. You can build a dynamic animation that almost looks and feels (and downloads) like real multimedia, and you can render it either as a Java applet or as a pair of HTML pages - one for each 4.0 browser.
The downside to Interactor is that its DHTML capabilities were retrofitted onto what began as a Java development tool. It's very good at building dynamic components for insertion into existing documents, but it can't build the documents themselves - its stage is not a page. And you'll never, ever want to edit the code it produces, which is unreadable by human beings. Nevertheless, it's a powerful, fun tool for building backward-compatible and bandwidth-hogging components.
Both Dreamweaver and Interactor produce code for the two major browsers, and both are available for Windows and Macintosh. A third cross-browser tool, Astound Dynamite, is available only for Windows, but it does offer the HTML features Interactor lacks. Aimed more at business users than at Web professionals, Dynamite's mission is to make dynamic pages accessible to less knowledgeable, or less interested, end users. Whether that spells a commensurate loss in creative power remains to be seen. I just hope Astound didn't use the product to build their own Web site.
Like Interactor, Astound writes code that few will have the mettle to disturb. (And, like Interactor, it offers no access to HTML from within the program.) If you need to customize or troubleshoot your work, this is likely not the tool for you. Furthermore, its dynamic components require a Java media player, which visitors must download and which is subject to the familiar Java pitfalls. On the other hand, as with Interactor's Java applets, Dynamite's media will play on older browsers.
A few other tools on the market boast DHTML capabilities, in most cases as part of a broader support for Microsoft's new Component Object Model (COM). The other COM buzzwords of choice are "scriptlets," "ActiveX," and "data binding," which are actually all good things, but which right now work on no other platform but Explorer 4.0 for Windows 95/NT.
For this reason I won't get into details, except to mention Pictorius iNet Developer 3.0, which looks to be the best (albeit priciest) of the Wintel/Explorer tools. Its DHTML features are new to this version, and they are icing rather than cake. The program's core capability is team Intranet site development, and at $1,495 it's priced for that market. Aimed squarely at serious IT types, iNet Developer is overkill for lesser mortals, but still worth a look if you need industrial strength and don't have to bother with the Web.