How to Create A JavaScript Web Page Screen Saver | 3

How to Create a JavaScript Web Page Screen Saver

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.

Conclusion

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.

About the Author

Guyon Roche is a freelance web developer in London, Great Britain. He specializes in Windows platforms with an interest in bridging the gaps between different technologies, visit www.silver-daggers.co.uk for more details. He can be reached via e-mail at guyonroche@silver-daggers.co.uk

Created: March 27, 2003
Revised: June 8, 2004

URL: http://webreference.com/programming/javascript/gr/column7/1

How to Create A JavaScript Web Page Screen Saver | 3