Demo Documentation

Communicator Preview Page

The Communicator Preview area of this demo is designed to give users basic information about Netscape Communicator and its components. Graphic elements are slid into and out of their desired location, and user clicks will display a scrolled "pull down" descriptive text section.

Let's take a look at the source code . . . .

First, we'll setup the Dynamic Style Sheet for this document. Note that in this area, we'll be setting margin widths of "1em" as well as fontsize. Here we'll use the id capability of style:

<STYLE TYPE="text/javascript"> ids.a.marginLeft="1em"; ids.a.marginRight="1em"; ids.a.fontSize="14pt"; </STYLE>

As we did before in the SuiteTools area, we'll setup the document background color is soon as possible, as well as minimizing the possibility for graphics flickering by forcing off-screen buffering:

<SCRIPT LANGUAGE="JavaScript"> document.bgcolor="#000033"; window.offscreenBuffering = true;

Again following the lead from SuiteTools, we'll setup a global variable, which can be used to track the currently selected descriptive text.

var blasted; To insure fast loading of images for the button illumination effect, we will load them into Navigator's cache before the page is rendered completely: dimImages = new Array(5); hotImages = new Array(5); for (i=0;i<5;i++) { dimImages[i]=new Image(); hotImages[i]=new Image(); dimImages[i].src='images/cp_reg'+(i+1)+'.gif'; hotImages[i].src='images/cp_glow'+(i+1)+'.gif'; }

The shoveTitle(startX,endX) function moves a title between two X coordinates, and is used to move the "Communicator Preview" title:

function shoveTitle(startX,endX) { // Slides "Communicator Preview" and other stuff in or out if (startX>0) { document.layers['yelline'].visibility="HIDE"; document.layers['yelvline'].visibility="HIDE"; document.layers['yelvline2'].visibility="HIDE"; } while (startX<endX) { document.layers['commprev'].left=startX; startX+=7; } }

The byeButtons() function removes almost all graphic elements from the current page when a user chooses to continue on to the next section:

function byeButtons() { // Makes little buttons fly up off the screen var y = 342; while (y>-55) { document.layers['con'].top=y; y-=8; } y=342; while (y>-55) { document.layers['com'].top=y; y-=8; } y=322; while (y>-55) { document.layers['col'].top=y; y-=8; } y=302; while (y>-55) { document.layers['nav'].top=y; y-=8; } y=281; while (y>-55) { document.layers['ovr'].top=y; y-=8; } }

Below, we see the xpandButtons() function, when is used to apply a speed-optimized sliding curtain effect to all of the Communcator button images:

function xpandButtons() { // Makes the button column expand out to appear while (document.layers['logo'].top<22) { document.layers['logo'].top +=3 } shoveTitle(-340,80); document.layers["con"].clip.left=44; document.layers["con"].clip.right=44; document.layers["com"].clip.left=44; document.layers["com"].clip.right=44; document.layers["col"].clip.left=44; document.layers["col"].clip.right=44; document.layers["nav"].clip.left=44; document.layers["nav"].clip.right=44; document.layers["ovr"].clip.left=44; document.layers["ovr"].clip.right=44; document.layers["con"].visibility="SHOW"; document.layers["com"].visibility="SHOW"; document.layers["col"].visibility="SHOW"; document.layers["nav"].visibility="SHOW"; document.layers["ovr"].visibility="SHOW"; while(document.layers['yelline'].left>415) { document.layers['yelline'].left -=9; } var x=44; while(x>-5) { document.layers["con"].clip.left=x; document.layers["con"].clip.right=44+(44-x); document.layers["com"].clip.left=x; document.layers["com"].clip.right=44+(44-x); document.layers["col"].clip.left=x; document.layers["col"].clip.right=44+(44-x); document.layers["nav"].clip.left=x; document.layers["nav"].clip.right=44+(44-x); document.layers["ovr"].clip.left=x; document.layers["ovr"].clip.right=44+(44-x); x-=8; } document.layers['yelvline2'].visibility="SHOW"; document.layers['yelvline'].visibility="SHOW"; document.layers['overview'].clip.width=305 document.layers['navigator'].clip.width=305 document.layers['collabra'].clip.width=305 document.layers['composer'].clip.width=305 document.layers['conference'].clip.width=305 } </emp> <p> The <tt> infoBlaster(lyr,trigger) </tt> function is used to initially display descriptive text about a particular product by sliding a layer into view: <xmp> function infoBlaster(lyr,trigger) { // Shows selected descriptive text var max=lyr.clip.height; if (trigger == true) { if (blasted) { infoBlaster(blasted,false); } blasted=lyr; lyr.clip.bottom=0; lyr.clip.WIDTH=300; lyr.visibility="show"; while (lyr.clip.bottom < max) { lyr.clip.bottom +=3; } } else { while (lyr.clip.height > 0) { lyr.clip.bottom-=6; } lyr.visibility="HIDE"; lyr.clip.bottom=max; } }

The nexter() function is called to clean up the current screen by sliding all graphic elements out of view before proceeding directly to the next section in the demo.

function nexter() { // Goes to the next page in demo, with transition effects document.layers['closer'].visibility="HIDE"; document.layers['vser'].visibility="HIDE"; document.layers['nexter'].visibility="HIDE"; if (blasted) { infoBlaster(blasted,false); } while (document.layers['logo'].top>-58) { document.layers['logo'].top -=3 } shoveTitle(80,650); byeButtons(); setTimeout('window.location="viewsource.html"',500); }

As you can see, the transitions and effects begin when the page loads:

<BODY BGCOLOR="#000033" BACKGROUND="images/cp_back1.gif" LINK="#ffff00" VLINK="#ffff00" onload="xpandButtons()">

The remainder of the source code is standard HTML. By defining our content in layers, we can dynamically apply transition effects to our demo:

<!-- Netscape Logo --> LAYER NAME="logo" LEFT=423 TOP=-57> <IMG SRC="images/netscape.gif" WIDTH=72 HEIGHT=57></layer> <!-- Communcator Preview Title Graphic --> <LAYER NAME="commprev" LEFT=-340 TOP=219> <IMG SRC="images/commpreview.gif" WIDTH=328 HEIGHT=42 BORDER=0 ALT="Netscape Communicator Preview"></layer> <!-- Overview descriptive text --> <LAYER NAME="overview" LEFT=290 TOP=0 VISIBILITY="HIDE" WIDTH=300 BGCOLOR="#ffffcc"> <p id=a> <b>Overview</b> -- Netscape Communicator is an open email, groupware, and browser suite that provides the complete set of tools you need every day to easily communicate, share, and access information on your intranet or the Internet. Communicator comes in Standard and Professional editions.</p></layer> <!-- Navigator descriptive text --> <LAYER NAME="navigator" LEFT=290 TOP=0 VISIBILITY="HIDE" WIDTH=300 BGCOLOR="#ffffcc"> <p id=a><br> <b>Netscape Navigator</b> -- Access the wealth of information and network applications on corporate intranets and the Internet using the intuitive Netscape Navigator interface. Users can easily access information from a variety of sources, from the latest Web sites to legacy corporate databases. Netscape Navigator's support for Netscape ONE technologies enables content creators and developers to deliver advanced cross-platform solutions.</p></layer> <!-- Collabra descriptive text --> <LAYER NAME="collabra" LEFT=290 TOP=0 VISIBILITY="HIDE" WIDTH=300 BGCOLOR="#ffffcc"> <p id=a><br> <b>Netscape Collabra</b> -- software makes it easy to share information and create a "knowledge base" that people can access at any time. Eliminate unnecessary meetings and save valuable time by discussing important issues in public or private online discussion forums. Netscape Collabra extends open Internet standards to create a powerful collaboration tool for corporations that seamlessly integrates with Netscape Collabra Server software.</p></layer> <!-- Composer descriptive text --> <LAYER NAME="composer" LEFT=290 TOP=0 VISIBILITY="HIDE" WIDTH=300 BGCOLOR="#ffffcc"> <p id=a><br> <b>Netscape Composer</b> -- software lets anyone create intranet documents, web pages, and rich email messages. Using Netscape Composer, authors can use the power of the web to communicate quickly and effectively.</p></layer> <!-- Conference descriptive text --> <LAYER NAME="conference" LEFT=290 TOP=0 VISIBILITY="HIDE" WIDTH=300 BGCOLOR="#ffffcc"> <p id=a><br> <b>Netscape Conference</b> -- software offers organizations solutions to leverage their investments in network connectivity for real-time conferencing interactions over the Internet and intranets. Netscape Conference sessions allow organizations to increase the effectiveness of workgroup, departmental, and cross-functional communication by letting users browse through documents, sketch on a collaborative whiteboard, exchange information, and talk in real time with colleagues anywhere in the world.</p></layer> <!-- Yellow horizontal line to right of "Communicator Preview" --> <LAYER NAME="yelline" LEFT=640 TOP=253 WIDTH=350 HEIGHT=1> <IMG SRC="images/yelspot.gif" WIDTH=350 HEIGHT=1></layer> <!-- Yellow vertical line above column of buttons --> <LAYER NAME="yelvline" LEFT=459 TOP=253 WIDTH=1 HEIGHT=15 VISIBILITY="HIDE"> <IMG SRC="images/yelspot.gif" WIDTH=1 HEIGHT=15></layer> <!-- "Overview" button --> <LAYER NAME="ovr" LEFT=415 TOP=268 WIDTH=87 HEIGHT=33 VISIBILITY="HIDE"> <a HREF="#" onMouseOver="document.i1.src=hotImages[0].src" onMouseOut="document.i1.src=dimImages[0].src" onclick="infoBlaster(document.layers['overview'],true);return(false)"> <IMG NAME="i1" SRC="images/cp_reg1.gif" WIDTH=87 HEIGHT=33 ALT="Overview" BORDER=0></A></layer> <!-- "Navigator" button --> <LAYER NAME="nav" LEFT=415 TOP=301 WIDTH=87 HEIGHT=33 visibility="HIDE"> <A HREF="#" onMouseOver="document.i2.src=hotImages[1].src" onMouseOut="document.i2.src=dimImages[1].src" onclick="infoBlaster(document.layers['navigator'],true);return(false)"> <IMG SRC="images/cp_reg2.gif" NAME="i2" WIDTH=87 ALT="Navigator" HEIGHT=33 BORDER=0></a></layer> <!-- "Collabra" button --> <LAYER NAME="col" LEFT=415 TOP=334 WIDTH=87 HEIGHT=34 VISIBILITY="HIDE"> <a HREF="#" onMouseOver="document.i3.src=hotImages[2].src" onMouseOut="document.i3.src=dimImages[2].src" onclick="infoBlaster(document.layers['collabra'],true);return(false)"> <IMG SRC="images/cp_reg3.gif" NAME="i3" WIDTH=87 ALT="Collabra" HEIGHT=34 BORDER=0></a></layer> <!-- "Composer" button --> <LAYER NAME="com" LEFT=415 top=368 WIDTH=87 HEIGHT=35 VISIBILITY="HIDE"> <a HREF="#" onMouseOver="document.i4.src=hotImages[3].src" onMouseOut="document.i4.src=dimImages[3].src" onclick="infoBlaster(document.layers['composer'],true);return(false)"> <IMG SRC="images/cp_reg4.gif" NAME="i4" WIDTH=87 ALT="Composer" HEIGHT=35 BORDER=0></a></layer> <!-- "Conference" button --> <LAYER NAME="con" LEFT=415 TOP=403 WIDTH=87 HEIGHT=48 VISIBILITY="HIDE"> <a HREF="#" onMouseOver="document.i5.src=hotImages[4].src" onMouseOut="document.i5.src=dimImages[4].src" onclick="infoBlaster(document.layers['conference'],true);return(false)"> <IMG SRC="images/cp_reg5.gif" NAME="i5" WIDTH=87 ALT="Conference" HEIGHT=48 BORDER=0></A></layer> <!-- Yellow vertical line below column of buttons --> <LAYER NAME="yelvline2" LEFT=459 TOP=451 WIDTH=1 HEIGHT=29 VISIBILITY="HIDE"> <IMG SRC="images/yelspot.gif" WIDTH=1 HEIGHT=29></layer> <!-- "Continue" Button --> <LAYER NAME="nexter" LEFT=545 TOP=395 VISIBILITY=INHERIT> <a HREF="#" onclick="nexter();return(false)"> <IMG SRC="images/continue.gif" border=0 ALT="Continue Communicator Demo" WIDTH=78 HEIGHT=17></a></layer> <!-- "View Source" button --> <LAYER NAME="vser" LEFT=545 TOP=417 VISIBILITY=INHERIT> <a HREF="#" onclick="window.location='view-source:'+window.location;return(false)"> <IMG SRC="images/viewsrc.gif" BORDER=0 ALT="Continue Communicator Demo" WIDTH=78 HEIGHT=17></a></layer> <!-- "Skip Demo" button --> <LAYER NAME="closer" LEFT=545 TOP=439 VISIBILITY=INHERIT> <a HREF="#" onclick="window.close();return(false)"> <IMG SRC="images/skip.gif" ALT="Skip Communicator Demo" BORDER=0 WIDTH=78 HEIGHT=17></a></layer> </BODY> </HTML>