Moving an Object in the Document

It’s possible to use JavaScript to move an object (an image, or text, or whatever) around your screen. In fact, you can make an object appear to move in three dimensions, so that it looks as through it passes behind other objects in the document. In this example, you’ll see how that annoying advertisement in the previous task can be made even more annoying.

This again requires three documents; however, the HTML and CSS are identical to that in the previous version. Here, we’ll just show the JavaScript file (Script 12.13). Now, as soon as the user wants to close the advertisement layer, it starts to move away from them. Thankfully, it will stop before it goes off the screen (Figure 12.8), allowing them to finally close it!

Figure 12.8. In this version, it ends up on the right, where you can finally close it.


To move an object:

1. 
document.getElementById("annoyingAdvert").onmouseover = slide;



In order to start the movement, we add an onmouseover event handler to our advertisement, which tells it to trigger the slide() function.

2. 
if (currPos("annoyingAdvert") < (document.body.clientWidth-150)) {



Before we move the layer, we need to figure out if it’s within the restrictions that we’ve placed on it—that’s done by checking its current position (using the currPos() function, which we’ll describe below) and comparing it to the width of the document window. If it’s less than that (minus another 150 pixels, to take the width of the layer itself into account), then we want to move it some more.

Script 12.13. The JavaScript gets the advertisement moving.
window.onload = initAdvert;

function initAdvert() {
     document.getElementById("annoyingAdvert").style.display = "block";
     document.getElementById("annoyingAdvert"). onmouseover = slide;
     document.getElementById("closeBox").onclick = function() {
        document.getElementById("annoyingAdvert").style.display = "none";
     }
}

function slide() {
     if (currPos("annoyingAdvert") < (document.body.clientWidth-150)) {
							document.getElementById("annoyingAdvert").style.left = currPos("annoyingAdvert") + 1 + "px";
							setTimeout(slide,100);
     }

     function currPos(elem) {
							return document.getElementById(elem).offsetLeft;
     }
}

3. 
document.getElementById("annoyingAdvert").style.left = currPos("annoyingAdvert") + 1 + "px";



To move the layer (in a way that works cross-browser), we have to change its style.left property. Here, we change it by getting the object’s current position, incrementing it by 1, and finally adding px to the end to put it in the correct format. Changing style.left is all that’s needed to move it to its new location.

4. 
setTimeout(slide,100);



Here’s where we tell JavaScript to keep on moving, by calling setTimeout() to call slide() again in one hundred milliseconds (one-tenth of a second).

5. 
function currPos(elem) {



Two places above needed to get the current position of an element, and here’s where we’ll do it. All we need is the id of that element.

6. 
return document.getElementById (elem).offsetLeft;



Given the id of the object, we can get the object. And given that, all we need is its offsetLeft property, which is the object’s left position. The offsetLeft property contains a numeric value, so we can just return it as-is.

✓ Tip

  • You might be wondering: if offsetLeft is numeric, why jump through all those hoops to instead change the style.left property? We have to do that because offsetLeft is read-only; that is, you can read its value, but you can’t change it. There aren’t any cross-browser, writeable, numeric positioning elements.


..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.140.245.196