spacer

Webref WebRef   Sitemap · Experts · Tools · Services · Newsletters · About i.com

home / programming / javascript / gr / column7 / 1 To page 1To page 2current page
[previous]

Web Project Manager
Aquent
US-PA-Collegeville

Justtechjobs.com Post A Job | Post A Resume
Developer News
Mandrake Linux Founder Back, Virtually
Amazon: We're a Technology Company
Sun Expands MySQL With Closed Source

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


home / programming / javascript / gr / column7 / 1 To page 1To page 2current page
[previous]

internet.comearthweb.comDevx.commediabistro.comGraphics.com

Search:

Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia

Jupitermedia Corporate Info

Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers

Whitepapers and eBooks

Symantec Whitepaper: Converging System and Data Protection for Complete Disaster Recovery
Intel Whitepaper: Comparing Two- and Four-Socket Platforms for Server Virtualization
IBM Solutions Brief: Go Green With IBM System xTM And Intel
HP eBook: Simplifying SQL Server Management
IBM Contest: Are You the Next Superstar? Join the "Search for the XML Superstar" Contest to Find Out
Intel PDF: Quad-Core Impacts More Than the Data Center
Intel PDF: Virtualization Delivers Data Center Efficiency
Go Parallel Article: PDC 2008 in Review
Avaya Article: Communication-Enabled Mashups: Empowering Both Business Owners and IT
Intel Whitepaper: Building a Real-World Model to Assess Virtualization Platforms
PDF: Intel Centrino Duo Processor Technology with Intel Core2 Duo Processor
Microsoft Article: Build and Run Virtual Machines with Hyper-V Server 2008
  Go Parallel Article: Q&A with a TBB Junkie
IBM Whitepaper: Innovative Collaboration to Advance Your Business
Internet.com eBook: Real Life Rails
IBM eBook: The Pros and Cons of Outsourcing
Internet.com eBook: Best Practices for Developing a Web Site
IBM CXO Whitepaper: The 2008 Global CEO Study "The Enterprise of the Future"
Avaya Article: Call Control XML in Action - A CCXML Auto Attendant
IBM CXO Whitepaper: Unlocking the DNA of the Adaptable Workforce--The Global Human Capital Study 2008
Adobe Acrobat Connect Pro: Web Conferencing and eLearning Whitepapers
Symantec Whitepaper: Comprehensive Backup and Recovery of VMware Virtual Infrastructure
MORE WHITEPAPERS, EBOOKS, AND ARTICLES
webref The latest from WebReference.com Browse >
Popular JavaScript Framework Libraries: An Overview - Part 3 · Accessing Your MySQL Database from the Web with PHP · Working with the DOM Stylesheets Collection
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Fixing MySQL Replication · Firewall Guide: First Steps to Securing the Enterprise · VoxOx Tames the Tumultuous Communications Tangle

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

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