Demo Documentation

Communicator Preview Page

The View Source Magazine area of this demo is designed to give users a brief overview of the purpose of View Source Magazine. In the demo, both text and graphical elements are "slid" into the viewing area to create an impressive transition effect.

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

As in the previous demo pages, we'll begin by defining a Dynamic Style Sheet for this page, where we will set the text color and margins of some of the content in our document:

<STYLE type="text/javascript"> ids.gr.color="gray"; tags.P.marginLeft="1em"; tags.H3.marginLeft="1em"; </STYLE>

The next step is to again setup offscreen buffering to reduce flicker when manipulating layers:

<SCRIPT LANGUAGE="JavaScript"> window.offscreenBuffering = true;

Next, we'll define a mergeInfo() function to manipulate three layers which are almost identical in content. In order to create the illusion of gray text from two sides merging into one set of black text, three layers are used. From the left and right, two gray text layers slide together. Once they converge, the underlying black text layer is suddenly made visible, completing the illusion:

function mergeInfo() { // Slides right and left grays together, then displays black text lf = document.layers['txleft']; rt = document.layers['txright']; while (rt.left > 0) { rt.left -=20; lf.left +=20; } document.layers['blk'].visibility="SHOW"; }

As the page loads, the word "Netscape" slides across the top of the graphic title, "View Source Magazine." Simultaneously, a yellow background layer for our descriptive text appears. This is accomplished thanks to the following function:

function slideScape() { // Slides "Netscape" title along top of "View Source Magazine" title document.layers['bg'].clip.width=640; document.layers['bg'].clip.top=93; document.layers['bg'].clip.bottom=93; document.layers['bg'].visibility="SHOW"; while (document.layers['ns'].left < 431) { document.layers['ns'].left+=8; document.layers['bg'].clip.top-=2; document.layers['bg'].clip.bottom+=2; } while (document.layers['bg'].clip.height < 185) { document.layers['bg'].clip.top--; document.layers['bg'].clip.bottom++; } mergeInfo(); } </SCRIPT> </HEAD>

The remainder of the code in this page is straightforward content holders for the various text and image elements on the page:

<BODY BGCOLOR="#000033" BACKGROUND="images/v_back1.gif" ONLOAD="slideScape()" LINK="#ff0000" VLINK="#ff0000"> <!-- Background watermap image --> <LAYER NAME="back2" LEFT=0 TOP=0 WIDTH=203 HEIGHT=480> <IMG SRC="images/v_back2.gif" WIDTH=203 HEIGHT=480 BORDER=0></LAYER> <!-- Travelling "Netscape" title --> <LAYER NAME="ns" LEFT=150 TOP=320 HEIGHT=11> <IMG SRC="images/vsnscp.gif" WIDTH=78 HEIGHT=11 ALT="Netscape View Source Magazine"></LAYER> <!-- "View Source Magazine" title --> <LAYER NAME="vsmag" LEFT=150 TOP=335> <IMG SRC="images/vsmag.gif" WIDTH=320 HEIGHT=29 ALT="Netscape View Source Magazine"></LAYER> <!-- Yellow background goes behind descriptive text --> <LAYER NAME="bg" VISIBILITY=HIDE LEFT=0 TOP=75 BGCOLOR="#ffffcc"> </LAYER> <!-- Gray text that comes in from left --> <LAYER NAME="txleft" LEFT=-640 TOP=75 WIDTH=630> <H3 id=gr>What is View Source Magazine?</H3> <P id=gr>The purpose of <i>View Source Magazine</i> -- Netscape's online technical magazine for developers -- is to make your life as an Internet developer easier, and to make your efforts more robust, by giving you technical information about developing for the Netscape ONE platform. </P> <P id=gr>We publish new articles at least every other week. Our mission is to inspire great development based on the Netscape ONE platform technologies.</P></LAYER> <!-- Gray text that comes in from right --> <LAYER NAME="txright" LEFT=640 TOP=75 WIDTH=630> <br> <H3 id=gr>What is View Source Magazine?</H3> <P id=gr>The purpose of <i>View Source Magazine</i> -- Netscape's online technical magazine for developers -- is to make your life as an Internet developer easier, and to make your efforts more robust, by giving you technical information about developing for the Netscape ONE platform. </P> <P id=gr>We publish new articles at least every other week. Our mission is to inspire great development based on the Netscape ONE platform technologies.</P></LAYER> <!-- Black text which appears when two grays merge in center --> <LAYER NAME="blk" LEFT=0 TOP=75 WIDTH=630 VISIBILITY="HIDE"> <br> <H3>What is View Source Magazine?</H3> <P>The purpose of <i>View Source Magazine</i> -- Netscape's online technical magazine for developers -- is to make your life as an Internet developer easier, and to make your efforts more robust, by giving you technical information about developing for the Netscape ONE platform. </P> <P>We publish new articles at least every other week. Our mission is to inspire great development based on the Netscape ONE platform technologies.</P> </LAYER> <!-- "Demo Documentation" button --> <LAYER NAME="demodoc" LEFT=331 TOP=408> <IMG SRC="images/demodoc.gif" BORDER=0 WIDTH=129 HEIGHT=17></LAYER> <!-- "CD Content" button --> <LAYER NAME="cdcontent" LEFT=382 TOP=430> <IMG SRC="images/cd.gif" BORDER=0 WIDTH=78 HEIGHT=17></LAYER> <!-- "View Source" button --> <LAYER NAME="vser" LEFT=465 TOP=408> <A HREF="#" onclick="window.location='view-source:'+window.location;return(false)"> <IMG SRC="images/viewsrc.gif" BORDER=0 WIDTH=78 HEIGHT=17></A></LAYER> <!-- "End Demo" button --> <LAYER NAME="closer" LEFT=465 TOP=430> <A HREF="#" onclick="window.opener.location='howto.html';window.close();return(false)"> <IMG SRC="images/end.gif" BORDER=0 WIDTH=78 HEIGHT=17 ALT="End Communicator Demo"></A></LAYER> </BODY> </HTML>