Catching the Users Attention with Animation
Catching the User’s Attention with Animation
One sure way of catching the user’s attention in Ajax applications is through animation, and using dynamic HTML, you can animate Web elements, moving them around at will. It does take a little effort to make sure you’re cross-browser compliant, however.
Take a look at the example, animation.html, in Figure 11.28. There are three colored <div> elements in that page, and they move from side to side at different speeds.
Figure 11.28: Creating animation in the animation.html application
This example starts by creating three colored <div> elements, div1, div2, and div3, that can be moved around the Web page:
<body> <center> <h1> Animation with dynamic HTML </h1> </center> <div style="position: absolute; top: 80; left: 0; width: 100; background: cyan; font-size: 16"> Hello from dynamic HTML. </div> <div STYLE="position: absolute; top: 140; left: expression(div1.style.posLeft * 0.75); width: 100; background: pink; font-size: 16"> Hello again from dynamic HTML! </div> <div STYLE="position: absolute; top: 200; left: expression(div1.style.posLeft * 0.5); width: 100; background: yellow; font-size: 16"> Hello once again from dynamic HTML! </div> </body>
You can start the animation when the page loads by calling a JavaScript function named setPosition:
<body onload="setPosition()"> <center> <h1> Animation with dynamic HTML </h1> </center> <div style="position: absolute; top: 80; left: 0; width: 100; background: cyan; font-size: 16"> Hello from dynamic HTML. </div> . . . <div STYLE="position: absolute; top: 200; left: expression(div1.style.posLeft * 0.5); width: 100; background: yellow; font-size: 16"> Hello once again from dynamic HTML! </div> </body>
The setPosition function starts by creating an object corresponding to each <div> element:
<script language="JavaScript"> function setPosition() { var div1 = document.getElementById("div1"); var div2 = document.getElementById("div2"); var div3 = document.getElementById("div3"); . . . } </script> You’re going to need to set an increment that will be added to the <div> elements’ horizontal positions each time the setPosition function is called, and in this example, that increment is 1 pixel:
<script language="JavaScript"> var increment = 1; function setPosition() { var div1 = document.getElementById("div1"); var div2 = document.getElementById("div2"); var div3 = document.getElementById("div3"); . . . } </script> Here’s the tricky part: Internet Explorer supports a style property named posLeft, which holds the left position of a Web page element as a number (and it also supports posTop for the top location). Unfortunately, the Mozilla brand of browsers, including Firefox, don’t support posLeft, so you have to use the left style property in order to move an item from JavaScript.
That’s a little awkward, because the left style property is stored as text, complete with the ending text px for pixels. Converting that text to a number is a little involved; if you were just dealing with Internet Explorer, you could use the parseInt function (actually, there’d be no need to do even that, because you could use the posLeft property, which holds the left position as a number) to convert the left property’s value to a number; but the Mozilla, Netscape, and Firefox browsers don’t support parseInt. So when you want to increment the left style property, you’re stuck extracting the left position of a <div> element, minus the px at the end like this:
div1.style.left = div1.style.left.substring(0, div1.style.left.indexOf('px')).... You multiply by a number to convert the text string to a number. Here, you can just multiply by 1:
div1.style.left = div1.style.left.substring(0, div1.style.left.indexOf('px')) * 1... You add the increment to move the <div> element over one pixel:
div1.style.left = div1.style.left.substring(0, div1.style.left.indexOf('px')) * 1 + increment... and then you append px to the end, converting the new left property to a string that ends with px like this:
div1.style.left = div1.style.left.substring(0, div1.style.left.indexOf('px')) * 1 + increment + 'px'; That’s how you move the first <div> element each time the setPosition function is called. The second <div> element moves at 3/4 the speed of the first, so you only need to multiply by 0.75 instead of 1:
div2.style.left = div1.style.left.substring(0, div1.style.left.indexOf('px')) * .75 + increment + 'px'; The third <div> element moves at half the speed of the first <div> element, so you multiply by 0.5 there. Here’s how moving all three <div> elements looks in the setPosition function:
<script language="JavaScript"> var increment = 1; function setPosition() { var div1 = document.getElementById("div1"); var div2 = document.getElementById("div2"); var div3 = document.getElementById("div3"); div1.style.left = div1.style.left.substring(0, div1.style.left.indexOf('px')) * 1 + increment + 'px'; div2.style.left = div1.style.left.substring(0, div1.style.left.indexOf('px')) * .75 + increment + 'px'; div3.style.left = div1.style.left.substring(0, div1.style.left.indexOf('px')) * .5 + increment + 'px'; . . . } </script> You don’t want the animated <div> elements to scroll off the screen entirely, so you might make them oscillate between 0 and 600 pixels. To do that, check to see whether the top <div> has moved past 600 pixels in the browser’s client area:
<script language="JavaScript"> var increment = 1; function setPosition() { var div1 = document.getElementById("div1"); var div2 = document.getElementById("div2"); var div3 = document.getElementById("div3"); div1.style.left = div1.style.left.substring(0, div1.style.left.indexOf('px')) * 1 + increment + 'px'; div2.style.left = div1.style.left.substring(0, div1.style.left.indexOf('px')) * .75 + increment + 'px'; div3.style.left = div1.style.left.substring(0, div1.style.left.indexOf('px')) * .5 + increment + 'px'; if (div1.style.left.substring(0, div1.style.left.indexOf('px')) * 1 >= 600 . . . } </script> or whether it’s moved to a negative position-and if the top <div> has moved out of bounds, reverse the sign of the increment to make the <div> element start moving the other way:
<script language="JavaScript"> var increment = 1; function setPosition() { var div1 = document.getElementById("div1"); var div2 = document.getElementById("div2"); var div3 = document.getElementById("div3"); div1.style.left = div1.style.left.substring(0, div1.style.left.indexOf('px')) * 1 + increment + 'px'; div2.style.left = div1.style.left.substring(0, div1.style.left.indexOf('px')) * .75 + increment + 'px'; div3.style.left = div1.style.left.substring(0, div1.style.left.indexOf('px')) * .5 + increment + 'px'; if (div1.style.left.substring(0, div1.style.left.indexOf('px')) * 1 >= 600 || div1.style.left.substring(0, div1.style.left.indexOf('px')) * 1 < 0) { increment = -1 * increment; } . . . } </script> All that’s left to do is to call the JavaScript setTimeout function to make sure the setPosition function is called after a short interval, for example, 50 milliseconds, like this:
<script language="JavaScript"> var increment = 1; function setPosition() { var div1 = document.getElementById("div1"); var div2 = document.getElementById("div2"); var div3 = document.getElementById("div3"); div1.style.left = div1.style.left.substring(0, div1.style.left.indexOf('px')) * 1 + increment + 'px'; . . . if (div1.style.left.substring(0, div1.style.left.indexOf('px')) * 1 >= 600 || div1.style.left.substring(0, div1.style.left.indexOf('px')) * 1 < 0) { increment = -1 * increment; } setTimeout("setPosition()", 50) } </script> That completes this example. Animation is a powerful tool in the hands of the Ajax programmer. It’s a great way of getting changes to a Web page noticed.
