barcode generator in c# web application AN ANIMATED SLIDESHOW in Font

Create QR-Code in Font AN ANIMATED SLIDESHOW

Depending on which link in the list you hover over, a different portion of the topics.gif image will slide into view. But something is not quite right. If you move quickly from link to the link, the animation becomes confused. There s something wrong with the moveElement function.

The animation problem is being caused by a global variable. When we abstracted the moveMessage function and turned it into the moveElement function, we left the variable movement as it was: function moveElement(elementID,final_x,final_y,interval) { if (!document.getElementById) return false; if (!document.getElementById(elementID)) return false; var elem = document.getElementById(elementID); var xpos = parseInt(elem.style.left); var ypos = parseInt(elem.style.top); if (xpos == final_x && ypos == final_y) { return true; } if (xpos < final_x) { xpos++; } if (xpos > final_x) { xpos--; } if (ypos < final_y) { ypos++; } if (ypos > final_y) { ypos--; } elem.style.left = xpos + "px"; elem.style.top = ypos + "px";

var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")"; movement = setTimeout(repeat,interval); } This is causing a problem now that the moveElement function is being called whenever the user hovers over a link. Regardless of whether or not the previous call to the function has finished moving the image, the function is being asked to move the same element somewhere else. In other words, the moveElement function is attempting to move the same element to two different places at once, and the movement variable has become the rope in a tug of war. As the user quickly moves from link to link, there is a backlog of events building up in the setTimeout queue. We can flush out this backlog by using clearTimeout: clearTimeout(movement); But if this statement is executed before movement has been set, we ll get an error. We can t use a local variable: var movement = setTimeout(repeat,interval); If we do that, the clearTimeout statement won t work; the movement variable will no longer exist. We can t use a global variable. We can t use a local variable. We need something in between. We need a variable that applies just to the element being moved. Element-specific variables do exist. In fact, we ve been using them all the time. What I ve just described is a property. Until now, we ve used properties provided by the DOM: element.firstChild, element.style, and so on. You can also assign your own properties: element.property = value If you wanted, you could create a property called foo with a value of "bar": element.foo = "bar"; It s just like creating a variable. The difference is that the variable belongs just to that element. Let s change movement from being a global variable to a property of the element being moved, elem. That way, we can test for its existence and, if it exists, use clearTimeout. function moveElement(elementID,final_x,final_y,interval) { if (!document.getElementById) return false; if (!document.getElementById(elementID)) return false; var elem = document.getElementById(elementID); if (elem.movement) { clearTimeout(elem.movement); } var xpos = parseInt(elem.style.left); var ypos = parseInt(elem.style.top); if (xpos == final_x return true; } if (xpos < final_x) xpos++; } if (xpos > final_x) xpos--; } if (ypos < final_y) && ypos == final_y) { { { {

ypos++; } if (ypos > final_y) { ypos--; } elem.style.left = xpos + "px"; elem.style.top = ypos + "px"; var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")"; elem.movement = setTimeout(repeat,interval); } Whichever element is currently being moved by the moveElement function is assigned a property called movement. If the element already has this property at the start of the function, it is reset using clearTimeout. This means that even if the same element is being told to move in different directions, there is only ever one setTimeout statement. Reload list.html. Moving quickly from link to link no longer creates a problem. There is no backlog of events being queued up. The animation changes direction as you move up and down the list of links. Still, the animation is a bit lackluster.