Non-scrolling Regions using OverFlow

How to Do It:

Here’s how to create the non-scrolling regions in an HtmlHelp .chm file, in web pages that test for IE browsers, and on intranet pages for IE. Download or copy the style sheets into your working directory, and paste in these few lines of script . . .

First, We use two style sheets so that our print version looks good, too.

Copy the two style sheets to your work directory:

style_screen.css

style_print.css

Add this in front of the </HEAD> section of the .html file:

</HEAD>

Add to the body tag, in front of your non-scroll region:

Paste this into the end of the NSR:

</DIV>

Lastly, define the end of the visible body:

</div>

And that’s it. Simple, isn’t it? Too simple? Ok…

It’s ideal for HtmlHelp and Html pages for IE. The headers and/or footer is rock-solid. But the scroll bar tends to get confused about where the true end of the page is, and how to display in print. That can be adjusted by including a few more lines, either directly, or in an include file:

<!--

//********* start of include file ************

window.onload= resizeNSRwindow;

window.onresize= resizeNSRwindow;

window.onbeforeprint= set_to_print;

window.onafterprint= reset_form;

function resizeNSRwindow(){

var oNSR= document.all.item("nsr");

var oText= document.all.item("text");

if (oText ==null) return;

if (oNSR != null){

document.all.text.style.overflow= "auto";

document.all.nsr.style.width= document.body.offsetWidth;

document.all.text.style.width= document.body.offsetWidth-4;

document.all.text.style.top= document.all.nsr.offsetHeight;

if (document.body.offsetHeight > document.all.nsr.offsetHeight)

document.all.text.style.height= document.body.offsetHeight - (document.all.nsr.offsetHeight +5);

else document.all.text.style.height=0;

}

//*********** set to print ***************

function set_to_print(){

var i;

if (window.text)document.all.text.style.height = "auto";

for (i=0; i < document.all.length; i++){

if (document.all[i].tagName == "BODY") {

document.all[i].scroll = "auto";

}

if (document.all[i].tagName == "A") {

document.all[i].outerHTML = "<A HREF=''>" + document.all[i].innerHTML + "</a>";

}

document.all.text.style.overflow= "visible";

}

//********** set for display ************

function reset_form(){

document.location.reload();

}

//******** end of include file *********

//-->

</SCRIPT>

We’ve found it to be very Helpful, and we use it on company intranets and HtmlHelp files. Use it in good health.

The folks at Copperfield Publishing

Thanks to the folks at MicroSoft Developers Network®.

http://msdn.microsoft.com/library/default.asp?url=/library/en-us/htmlhelp/html/vsconHH1Start.asp

Non-scrolling Regions using OverFlow - How To:

How to Do It: