Non-scrolling Regions using OverFlow - How To:

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:

 

 

<link rel="stylesheet" type="text/css" media="screen" href="style_screen.css">

<link rel="stylesheet" type="text/css" media="print" href="style_print.css">

</HEAD>

 

 

 

 

 

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

 

 

<BODY scroll="no"> <!---- Start Non-Scroll Region ---->

<div id="nsr">

 

 

 

 

 

Paste this into the end of the NSR:

 

 

</DIV> <!----- end NSR, start Scrollable Body ------>

<div id="text" >

 

 

 

 

 

Lastly, define the end of the visible body:

 

 

</div> <!------ End Scrollable Body ----->

 

 

 

 

 

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:

 

 

<SCRIPT language="JavaScript">

<!--

//********* 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

 

 

 

 

 

 

 

  

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