Search WebTools   Article Level   BEGINNER    INTERMEDIATE    ADVANCED   WebTools members, log in.   Toolboxes   Browsers   HTML, XML, & CSS   Graphics & Design   Multimedia   DHTML & JavaScript   Java   Servers & E-Commerce   Scripting   Demo   All Articles   Tips & Tricks   About WebTools  Byte.com  CMPmetrics  Data Communications  File Mine  InformationWeek  InternetWeek  Network Computing  Planet IT  TechShopper  TechWeb News  Tele.com  WebTools  Winmag.com   Free E-mail  Login - Sign Up Now   Privacy Statement

Article Level   INTERMEDIATE
Events In Action Once you've defined an event, you can use it through JavaScript anywhere in the HTML page. Here's where your imagination can run wild. An event's text can be plain text, HTML, or whatever you want to put into it. To actually show the text for a defined event, write the following line of JavaScript exactly where you want the text to appear on your page (myvar is the variable name you chose): document.writeln(myvar.content); You can also include the line in the same JavaScript statement you wrote for the object and event definitions -- which is what I prefer, for simplicity's sake. In addition, you can specify some descriptive text in the document.writeln line that will always precede or follow the event text (see the sidebar "Calendar Of Events" below). A couple of examples here will demonstrate the rotator's potential, and there are even more on the Windows Magazine website. The sidebar "Calendar Of Events" shows an example of a simple calendar. If someone visits the page on a day defined by one of the events, that event will automatically be displayed. On a day with no matching event, no text will be displayed because the default text for the rotator is an empty string. You can also use the rotator text to modify the look of elements on the page. That is, the text defined by the rotator variable isn't directly shown to the user, but makes some change to the way the page is displayed. The sidebar "Web Pages In The Moonlight" demonstrates this approach by changing a page's background color depending on the time of day. The rotator's default value specifies a white background color, which is what the page uses during daylight hours. For an hour starting at 5 a.m. (05:00) and 6 p.m. (18:00), the page is light gray; in the late evening and early morning, the page is dark gray. I had actually planned to show an example that combined the content rotator with some Dynamic HTML (DHTML), but after a few hours of experimentation, I found it was simpler to use some well-chosen JavaScript and style sheets. The Microsoft and Netscape models for share a similar goal, but are extremely different in implementation. Even the simplest examples of DHTML turn into a case of writing a Microsoft version, writing a Netscape version, then using JavaScript to decide which one you need when the page loads. Yuck. But stay tuned: Next month I'll show you how to serve up new content every time a visitor refreshes your page. Calendar Of Events: This JavaScript content rotator can easily handle events of varying duration. <script language="JavaScript"> <!-- cal = new Rotator(""); cal.event("10 May 1998", "1d", "Mother's Day (<I>CALL!</I>)"); cal.event("23 May 1998", "3d", "Memorial Day Weekend"); cal.event("21 Jun 1998", "1d", "Father's Day"); cal.event("04 Jul 1998", "1d", "Fourth of July"); cal.event("05 Sep 1998", "3d", "Labor Day Weekend"); cal.event("26 Nov 1998", "1d","Thanksgiving Day"); if ( cal.content != "" ) document.writeln("Hey, it's" +cal.content+"!"); // --> </script> Web Pages In The Moonlight: Set your page's background according to the time of day with this content rotator. <script language="JavaScript"> <!-- shade = new Rotator("white"); shade.event("00:00", "5h", "darkgray"); shade.event("05:00", "1h", "lightgray"); shade.event("18:00", "1h", "lightgray"); shade.event("19:00", "5h", "darkgray"); document.bgColor = shade.content; // --> </script>		In This Article: • Auto Rotate Content With JavaScript • Rotation Automation • Events In Action Print this story Send as e-mail BYTE's Martin Heller attended the June 1999 JavaOne conference and bagged several interesting audio interviews with important Java players. Keep track of Java news with Planet IT's Java Tools Index.
Related Stories WebTools Home | Browsers | HTML, XML, & CSS | Graphics & Design | Multimedia | DHTML & JavaScript | Java | Servers & E-Commerce | Scripting | Demo | All Articles | Threads | WebTools News | Tips and Tricks

C M P n e t   S H O P P I N G MacTuner V2.1 for Mac $22.95 Tune in to over 1800 live TV and radio broadcasts and get the most out of your RealAudio and RealVideo players. BBEdit V5.1 for Mac $98.99 !! save 17% !! A fast, easy, Mac-based HTML authoring tool used by most professional Web Designers. McAfee VirusScan V4.0 for Win95 $7.99 !! after rebate !! Protect your PC from all virus types, and receive updates directly on your desktop the moment they're released.