Web Page Animation

17. Handling Page Resize

One thing that we haven't considered so far is what to do if the person viewing our page resizes their browser window. All of our carefully calculated positions on the screen that were worked out based on the size of their browser window are now all incorrect.

Recalculating the current position of our object part way through a move is rather complicated so let's take the easier way our of letting the object finish its current move and just recalculate the positions on the screen that it will move to after that. This will have the effect of having the object adjust the path of its movement on the next move that it makes to bring it into line with the new screen size.

To do this the first thing we need to do is to pull the end position calculations out of the start function into a new function of their own.

Next we amend our start function to call this function to set up its destinations. Our start position which was being set at the same time as the various end positions before was not extracted since it will be constantly updated to record the current position of the object. Instead we still set it in the start function itself making it equal to the last position in the array.

The final change is to add an event handler to reset the array of end positions if the browser is resized.

Now when the browser window is resized your object still might disappear out of the window but it will move back into the window on the next leg of its journey and then continue to follow the equivalent path to before taking into account the new window size.