| home / experts / dhtml / column16 |   
|
|
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
Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers
All Rights Reserved. Legal Notices.
Created: Mar. 11, 1998
Revised: Mar. 17, 1998
URL: http://www.webreference.com/dhtml/column16/allCode1.html
