Actually, it's not much different from the non-scrolling header. The difference is, this JavaScript function pays attention to the bottom of the browser window. Because the footer is at the bottom, we need to rewrite it in at the correct height. It's a Good Place for a Variable.
Use this for HTML Help in a compiled .chm file, as well as an ordinary web page, for IE 4.x. The same function can be used to create a floating menu or navigation aid, like the one below here.
1) Copy the nonscr_foot() function into the <HEAD> section. It calls the footer NSF_Demo. You make it up. Call it "carpe_diem" if you want. Just be sure to use "carpe_diem" when you create and name the footer.
|
<SCRIPT LANGUAGE="JavaScript"> <!-- var NSFooter=40; function nonscr_foot() { eval("NSF_Demo" + ".style" + ".pixelTop" + "=" + "document.body.scrollTop"+"+document.body.clientHeight-NSFooter"); setTimeout("nonscr_foot()",10);} // --> </SCRIPT>
|
|
|
|
|
This is a little different from the Non-scrolling Headers, isn't it? We're paying attention to the clientHeight, adding it to the top of the window, and subtracting the height of the footer.
Now, when you adjust for your footer height, it's easy to identify what to change.
2) If you are building HtmlHelp (a compiled .chm file) you modify the ONLOAD event, from this;
|
<BODY ONLOAD="BSSCOnLoad();" ONCLICK="BSSCOnClick();" ONUNLOAD="BSSCOnUnload();">
|
|
|
|
|
to this:
|
<BODY ONLOAD="BSSCOnLoad();nonscr_foot();" ONCLICK="BSSCOnClick();" ONUNLOAD="BSSCOnUnload();">
|
|
|
|
|
If you're building WebHelp, or a web page, it will probably just be:
|
<BODY ONLOAD="nonscr_foot();">
|
|
|
|
|
3) Build your footer from text, a table, an image or all of these. Surround it with the
<DIV ...> </DIV> tags. Then you name the footer (this one is named NSF_Demo) with the same name you called in the function. Was it "carpe_diem"? Do it Like This:
|
<div id="NSF_Demo" style="position:absolute; visibility:show; left:0px; top:0px; z-index:100"> ...your footer stuff here.. </DIV>
|
|
|
|
|
4) Several things can influence width: no-break spaces, or a lot of text, combined with the NOWRAP command, both force a line of text to remain unbroken. You can also make a table and specify a width with either a percentage ( <TABLE WIDTH="90%", or "103%">, etc.) or as pixel width ( <TABLE WIDTH="960px"> ).
The percentage value will automatically adjust the footer when you adjust the window size, and the pixel setting keeps it an absolute size.
5) Height: The height is determined by how much content you put in the footer paragraph or table, or the height of the graphic. Once you place the footer, you'll quickly learn how to adjust the NSFooter value to make it fit.
But even within the same browser version, people can have different font settings: this will cause your footer text to be larger or smaller than designed, and will no longer fit neatly on those screens. Solution: we can use the <H> tags and control the styles with a pixel size. It goes in the <HEAD> section; you can use your own variation of this. Here, we're defining the <H4> and <H5> tags.
|
<style> <!-- H4{text-decoration:none; color:#AA0000;font-family:Garamond, Times; font-size:20px;} H5{text-decoration:none; color:#0000AA;font-family:Garamond, Times; font-size:14px;} --> </style>
|
|
|
|
|
6) Text Color is also determined by the color: property in the style definition: The background color is defined by the TABLE attribute bgcolor=#66ffff or some other tag that has background color attributes .... these colors are in hex. You may want to just use a .gif or .jpg for the whole footer region. But a table is easy and fast. Anyway, here is where you'll see the DIV tag;
|
<div id="NSF_Demo" style="position:absolute; visibility:show; left:0px; z-index:100"> |
|
|
|
|
The id= is the name of the footer. Adjust the left: value to move the footer to the right. z-index;100 keeps this floating region (sometimes called a "layer") on top of everything else. You can make it slide behind other layers on your screen by setting its number lower.
Don't forget to end the non-scrolling footer region with a </DIV> end tag.
Let us know how it works, how you use it with RoboHelp, or if you have trouble or questions. Have a great day.
The folks at Copperfield Publishing.
Bottom of file
