Two Way Non-Scrolling Regions: How To

This method uses JavaScript "layers" to float just about anything you want on a page. It's a good alternative to using an extra frame for non-scrolling headers, because you don't need an extra frame or an extra file, you don't need frame synching, and it scrolls sideways when you need it.

Further, you can use it on a vertical or lateral scroll.


Let's use the Map Demo as an example.


We're using three images; the larger map of Ireland, and two thin rulers for latitude and longitude. The map is a jpeg, to keep the file size to a minimum. The rulers are gifs; notice that the edge of each ruler is transparent, allowing the red latitude and longitude marks to extend onto the map.

Our images are: irelandmap.jpg, latitudeb.gif, and longitudeb.gif. We'll place them in the last step. The three steps are:


1.   Paste in the NonscrollTable function into the <HEAD> section.

2.   Paste in the <BODY onLoad="NonscrollTable()"> into the <BODY> command.

3.   Wrap each of the three parts of the visible page with the <DIV> tags.


This is all it takes - first, the Html housekeeping:






<TITLE>2-Way Non-Scrolling Regions: 1000x1256 Map of Ireland w/ floating and synching rulers.</TITLE>






...Here is where you paste in the NonscrollTable function: anywhere in the <HEAD> section.




<SCRIPT LANGUAGE="JavaScript"><!--

function NonscrollTable() {

if (document.layers) { // Netscape 4 and above

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

document.layers['longitude'].pageY = window.pageYOffset;


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

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

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











Notice we are referencing the two rulers "latitude" and "longitude," twice, one set for Netscape and one set for Internet Explorer. The map's name is, well, "map," but it isn't used yet... We'll assign the names later in the <DIV>s. You, of course, can use whatever names you choose. We close the <HEAD> section, and we paste in the command that starts it all into the <BODY> tag:





<BODY onLoad="NonscrollTable()">






We assign the names we used earlier to the various parts. In this case, it's three images, but it could be three tables as well. Insert the <DIV> lines before and after each image's <IMG SRC= tag. Your version will have your own names, and you might adjust your positioning with the "LEFT" and "TOP" commands.

Place the actual file names, irelandmap.jpg, latitudeb.gif, and longitudeb.gif., in the corresponding <IMG SRC= ….> tag. Adjust the WIDTH and HEIGHT numbers to match your own image sizes:


Here’s the map:




<DIV ID="map" STYLE="position: absolute" LEFT="40" TOP="40">

<IMG SRC="./irelandmap.jpg" ALT="Free map from"

WIDTH="1000" HEIGHT="1256" BORDER=0 z-index:100>








…the latitude ruler:




<DIV ID="latitude" STYLE="position: absolute" LEFT="0" TOP="40">

<IMG SRC="./latitudeb.gif" ALT="latitude" WIDTH="40" HEIGHT="1256" LEFT="" TOP="" BORDER=0 z-index:100>







…and the longitude ruler:




<DIV ID="longitude" STYLE="position: absolute" LEFT="40" TOP="0">

<IMG SRC="./longitudeb.gif" ALT="longitude" WIDTH="1000" HEIGHT="40" BORDER=0 visibility:visible; z-index:50>








…and close off the page with the <BODY> and <HTML> end tags.











And that's it.

We think it's a great way to get a lot of information on a page without the tunnel vision. Let us know if you do this on a public page; we'd like to see it! If you have any suggestions or improvements, please let us know.


The folks at Copperfield Publishing.









Copyright Copperfield Publishing, 2001, 2002Some relevant topics, perhaps...about the automated lookup system we use on every page...