Creating a Cross-Browser
Non-Scrolling Region

Steps: 1, 2 , 3, 4, 5





These instructions provide two versions of the non-scrolling region function. The first function works in HtmlHelp in a compiled .chm file; it will also work on web pages viewed with Internet Explorer versions 4.0 and later.

The second function will work in both IE. and Netscape, versions 4.0 and up.


These same functions can be used to create floating menus, toolbars or navigation devices.

1) Copy one of the nonscroll() function below into the <HEAD> section. It calls the header by name; in this case, it's NSR_Demo. Hey, you make it up. Call it "snicklefritz" if you want. Just be sure to use "snicklefritz" when you create and name the header.

For Microsoft's HtmlHelp (.chm) and WebHelp projects that will use Internet Explorer exclusively, you can use this function:







function nonscroll() {

document.all['NSR_Demo'].style.posLeft = document.body.scrollLeft; 

document.all['NSR_Demo'].style.posTop = document.body.scrollTop; 


// -->







To create the same effect in both NetScape 4.x and IE. 4.x, use this one:





function nonscroll() {

if (document.layers) { // Netscape 4

document.layers['NSR_Demo'].pageX = window.pageXOffset; 

document.layers['NSR_Demo'].pageY = window.pageYOffset - 26;  

else if (document.all) { //IE 4

document.all['NSR_Demo'].style.posLeft = document.body.scrollLeft; 

document.all['NSR_Demo'].style.posTop = document.body.scrollTop; 









2) If you are building HtmlHelp (a compiled .chm file) you modify the ONLOAD event, from this;










to this:




<BODY ONLOAD="BSSCOnLoad();nonscroll();"








If you're building an ordinary web Help page without RoboHelp's extras, it will probably just be:



<BODY ONLOAD="nonscroll();">







3) Create your Header (the non-scroll area) as anything you want; a large text headline, an image, a table, buttons, links or all of the above. Surround it with the <DIV ...> </DIV> tags. Then you name the Header (this one is named NSR_Demo) with the same name you called in the function. Was it Snicklefritz? Do it Like This:




<DIV ID="NSR_Demo" ......> or <DIV ID="Snicklefritz" ......>







it ends up like this:



<div id="NSR_Demo" style="position:absolute; visibility:show; left:0px; z-index:100"> ...your stuff here.. </DIV>







4) To set the size of the non-scrolling region: 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 "105%"> , etc.) or as pixel width ( <TABLE WIDTH="960px"> ).

The percentage value will automatically adjust the header when you adjust the window size, and the pixel setting keeps it an absolute size. The height is determined by how much content you put in the header paragraph or table, or the height of the graphic.

5) Color is determined by the TABLE attribute bgcolor="#66ffff" or some other tag of your choice that has color attributes; these colors are in hex. You may want to just use a gif or .jpg for the whole header region. But a table is easy and fast.

Here is where you'll see the DIV tag;




<div id="NSR_Demo" style="position:absolute; visibility:show; left:0px; z-index:100">






The id= is the name of the header. Adjust the left: value to move the header to the right. z-index;100 keeps the header (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 region with a </DIV> end tag.


Drawbacks, problems, etc.?

Well, it jumps around on the screen some... The faster the computer, the smoother the non-scroll.

Let us know how it works, where you've used it, or if you have trouble or questions. Have a great day.


The folks at Copperfield Publishing.





images\copyright2001.jpg           images/seealso.jpg           images\quickclick.jpg