| home / programming / javascript / gr / column7 / 1 |   [previous] |
|
|
|
So, how do you fit the screen saver code into a web page? By instantiating a ScreenSaver object and passing it a suitable settings object:
| <html> | ||||
| <head> | ||||
| <script src="JSGraphics.js"></script> <script src="ScreenSaver.js"></script> <script src="StarFieldSaver.js"></script> <script type="text/javascript"> var saver; function initScreenSaver() { |
||||
| saver = new ScreenSaver( | ||||
| { | ||||
| timeout:5000, speed:50, nStars:100, zIndex:100, create:function(){return new StarFieldSaver(this);} |
||||
| } | ||||
| ); | ||||
| } </script> |
||||
| </head> <body onload="initScreenSaver();"> |
||||
| <h1>A Typical Web Page</h1> <p>...</p> <div id=debug></div> |
||||
| </body> | ||||
| </html> | ||||
For readers unfamiliar with object literals, the call to instantiate a new ScreenSaver might seem a little strange, but it’s valid JavaScript. The new ScreenSaver function is passed one object, defined by the curly braces. Inside this object are four properties; timeout, speed, nStars and zIndex. There is also a function (and as far as the object is concerned, this is also a property), which will be used by the ScreenSaver to create the flavor of screen saver desired.
In this article, I’ve created a JavaScript framework that integrates a screen saver into a web page. The screen saver code was divided into two sections: one to control the starting and stopping, and one for the screen saving part that hides the page contents and shows an animation.
To see a working demonstration of this code, click here.
A Little Disclaimer
While I’ve done my best to make this code browser compatible (meaning that it’s been tested with Internet Explorer 6.0 and Netscape 7.1, which accounts for over 80% of users), it won’t work for everyone. To appease the small but appreciable set of users who have disabled JavaScript, this code will fail gracefully and leave the web page alone.
| home / programming / javascript / gr / column7 / 1 | [previous] |
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs 
Created: March 27, 2003
Revised: June 8, 2004
URL: http://webreference.com/programming/javascript/gr/column7/1
