DHTML Lab: Dynamic Page Segments; The Complete Code 1/2 | WebReference

DHTML Lab: Dynamic Page Segments; The Complete Code 1/2


Logo

  Dynamic Page Segments
  SPECIAL EDITION; the director's cut 1/2

The Page HTML

As with most DHTML techniques, this one will be made unavailable to Explorer 4 for the Macintosh, which will be considered a non-version 4 browser. All browsers load the same page, but only Explorer 4, Windows, and Navigator 4, all platforms, will have Dynamic Page Segments.

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
isMac = (navigator.appVersion.indexOf("Mac")!=-1) ? 1 : 0;
NS4 = (document.layers) ? 1 : 0;
IE4 = (document.all && !isMac) ? 1 : 0;
ver4 = (NS4 || IE4) ? 1 : 0;
function showSegment(where) {
  location.href = "#" + where;
}

/* assign your own parameter values to the variables below: */

if (ver4) {
  prefix = "seg"
  firstSeg = "Intro";
  footerEl = "end";   // if no footer, assign null
  footerElSpace = 30; // overlooked if above is null
  leftPos = 170;  // if option 1 or 3, above, assign null
  topPos = null;  // if option 1 or 3, above, assign null
  margRight = 20; // for NO right margin, assign 0
  padding = 5;       // for NO padding, assign 0
  backCol = "white"; // for transparent, assign null
  borWid = 2;         // for no border, assign null
  borCol = "#993366"; // overlooked if borWid is null
  borSty = "solid";   // overlooked if borWid is null
}
//-->
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.2">
<!--
  if (ver4) {
    document.write("<SCRIPT LANGUAGE='JavaScript1.2' SRC='segments.js'><\/SCRIPT>");
  }
//-->
</SCRIPT>
</HEAD>
<BODY>
.
. include links to your page segments in this format:
.
<A HREF="#Intro"
   onClick="showSegment('Intro');return false">
   Introduction</A>
<A HREF="#Col"
   onClick="showSegment('Col');return false">
   In This Column...</A>
<A HREF="#New"
   onClick="showSegment('New');return false">
   For the First Time...</A>
.
. divide page into segments. Remember, once you define a segment,
. the remainder of the page must also be defined as segments:
.
<DIV ID="segIntro" CLASS="segment">
  <A NAME="Intro"></A>
  HTML Content
</DIV>
<DIV ID="segCol" CLASS="segment">
  <A NAME="Col"></A>
  HTML Content
</DIV>
<DIV ID="segNew" CLASS="segment">
  <A NAME="New"></A>
  HTML Content
</DIV>
       // if you have a footer, define it in this way:
<DIV ID="end" CLASS="last">
  HTML Content
</DIV>
      // include this script at the very end of page:
<SCRIPT LANGUAGE="JavaScript1.2">
<!--
/* the next three statements are specific to the front page
example. We find the top position of the logo,
add to it the logo height (which gives us the
logo bottom edge), and give topPos a
value 15 pixels below that.
Give your own scripted value to leftPos or topPos here,
if you do not specify them in the HEAD above! */
if (ver4) {
  im = document.images["imLogo"];
  yPos = (NS4) ? im.y : im.offsetTop;
  topPos = yPos + im.height + 15;
  initIt(); // MANDATORY!
}
//-->
</SCRIPT>
</BODY>
</HTML>

Next, let's review the external JavaScript file.


Produced by Peter Belesis and

All Rights Reserved. Legal Notices.
Created: Mar. 11, 1998
Revised: Mar. 17, 1998

URL: http://www.webreference.com/dhtml/column16/allCode1.html