Popup window animation (fly across screen)

  

/*
Examples From
JavaScript: The Definitive Guide, Fourth Edition

Legal matters: these files were created by David Flanagan, and are
Copyright (c) 2001 by David Flanagan.  You may use, study, modify, and
distribute them for any purpose.  Please note that these examples are
provided "as-is" and come with no warranty of any kind.

David Flanagan
*/

<html>

<script>
// Here are the initial values for our animation. 
var x = 0, y = 0, w=200, h=200;  // Window position and size
var dx = 5, dy = 5;              // Window velocity   
var interval = 100;              // Milliseconds between updates

// Create the window that we're going to move around.
// The javascript: URL is simply a way to display a short document.
// The final argument specifies the window size.
var win = window.open('javascript:"<h1>BOUNCE!</h1>"', "", 
          "width=" + w + ",height=" + h);

// Set the initial position of the window.
win.moveTo(x,y);

// Use setInterval() to call the bounce() method every interval 
// milliseconds. Store the return value so that we can stop the
// animation by passing it to clearInterval().
var intervalID  = window.setInterval("bounce()", interval);

// This function moves the window by (dx, dy) every interval ms.
// It bounces whenever the window reaches the edge of the screen.
function bounce() {
    // If the user closed the window, stop the animation.
    if (win.closed) {
        clearInterval(intervalID);
        return;
    }

    // Bounce if we have reached the right or left edge.
    if ((x+dx > (screen.availWidth - w)) || (x+dx < 0)) dx = -dx;

    // Bounce if we have reached the bottom or top edge.
    if ((y+dy > (screen.availHeight - h)) || (y+dy < 0)) dy = -dy;

    // Update the current position of the window.
    x += dx;
    y += dy;

    // Finally, move the window to the new position.
    win.moveTo(x,y);
}
</script>

<!-- Clicking this button stops the animation! -->
<form>
<input type="button" value="Stop" 
       onclick="clearInterval(intervalID); win.close();">
</form>
</html>

Related examples in the same category

1.	Make a new window
2.	Communicating with a New Window
3.	Using the window.close() Method to Close a Browser Window
4.	Hyper link to close window
5.	Close window and open document in new window
6.	Open a new link from a button
7.	Open a new window and control its appearance
8.	Open multiple windows at one click
9.	Resize a window
10.	Resize a window to a specified size
11.	Scroll the window
12.	New Window Laboratory
13.	Creating an always Raised Window
14.	Window Property Picker
15.	Window Resize, motion, maximize
16.	Creating a New Window
17.	Window Resize Methods
18.	Window focus and blur()
19.	Opening and Closing Windows
20.	Opening a New Window
21.	A Main Window Document
22.	References to Window Objects
23.	Simple Notification: Display Window Info
24.	Properties and Methods of the Window Object
25.	Capturing Click Events in the Window
26.	Contents of a Main Window Document That Generates a Second Window
27.	Setting Window Height and Width(Firefox)
28.	Checking Before Closing a Window
29.	Open a window and center it
30.	Maximize Window for different browser
31.	Scroll Window
32.	Preventing a Page from Scrolling
33.	Open a new window setting height, width and position
34.	Move a window
35.	To hide JavaScript errors from the user
36.	Using document.write() on the Current Window
37.	Using document.write() on Another Window

Popup window animation (fly across screen) : Window « Window Browser « JavaScript DHTML

Related examples in the same category