Non-Scrolling Regionen in HTML Hilfedateien

Es gibt mehrere Möglichkeiten in HTML Hilfen eine Non-Scrolling Region einzubauen.

1. Framesets

Eine Methode ist das Erstellen eines Framesets mit 2 Frames. Im oberen Frame wird definiert, dass keine Bildlaufleisten angezeigt werden sollen und das gegebenenfalls die Größe im Browser nicht verändert werden kann. 

z.B.:

<frame name="NavFrame" scrolling="no" target="Hauptframe" src="name.htm" noresize>

Im unteren Frame wird dagegen definiert, dass Bildlaufleisten, falls notwendig hinzugefügt werden:

<frame name="Hauptframe" src="name2.htm" scrolling="auto">

Von dieser Methode kann ich nur abraten, da die Integration in HTML Help schwierig und umständlich ist.

2. CSS Version

Zuerst wird per CSS der eigentliche Scrollbalken im <body> Tag entfernt. Um dies zu erreichen, wird die Eigenschaft overflow verwendet. Außerdem werden die Abstände auf null gesetzt.

html, body{
margin:0;
padding:0;
height:100%;
overflow:hidden;
}

Nun wird ein <DIV> Container erstellt, dem das ermöglicht wird, was eigentlich vom <body> erwartet wird, nämlich das Scrollen. In diesen <DIV> Container wird dann der Text der jeweiligen Seite geschrieben. Die height Angabe muss um die Prozentzahl der height Angabe des nachfolgenden <DIV> Containers (Nicht-scrollende Region) reduziert werden, um den Inhalt vollständig darzustellen und nicht unten abzuschneiden.

div.inhalt
{
margin-left:0px;
padding-left:3px;
height:93%;
overflow:auto;
background:#F0F8FF;
color:#000000;
}

Dadurch, dass der erste <DIV> Container absolut positioniert wurde, kann kann nun ein weiterer <DIV> Container über den ersten gelegt werden, der dann beim Scrollen stehen bleibt. Die so genannte Nicht-scrollende Region.

div.nscr
{
height:7%;
width:100%;
padding-left:3px;
background:#FFFFCC;
color:#000000;
}

Die Farben, Abstände usw. der jeweiligen <DIV> Container müssen ggf. angepasst werden.

Die HTML Datei sieht dann in etwa so aus:

<html>
<head>
<title>Non-Scrolling Region per CSS</title>
<link rel="stylesheet" type="text/css" href="name.css">
</head>
<body>
<div class="nscr">
Non-Scrolling Region
</div>
<div class="inhalt">
Text
</div>
</body>
</html>

Beispiel: Non-scrolling per CSS

Dieses Beispiel, welches auch als Mustervorlage verwendet werden kann, steht im Downloadbereich zur Verfügung.

3. DHTML Scripting

Eine  weitere Methoden zur Realisierung von Non Scrolling Regionen ergibt sich aus dem Zusammenspiel von Javascript und Cascading Stylesheet. Diese Methode sollte nur in HTML Help Dateien Anwendung finden, da Anweisungen verwendet werden, die nur der IE interpretiert.

Beispiel: Link zu DHTML Beispiel

Zuerst wird eine externe Stylesheetdatei erstellt, die Anweisungen für die Position und das Erscheinungsbild der Non Scrolling #nsr, als auch der scrollenden Region #mainbody enthält. Sie kann z.B. folgenden Inhalt haben:

#nsr
{
border-bottom: none;
background: #FFFFCC;
vertical-align: top;
z-index: 2;
visibility: visible;
left: 0;
top: 0;
text-align: left;
margin: 0 1em 0 0;
position: absolute;
width: 100%;
font-weight: bold;
font-family: Verdana, Arial, Sans-Serif;
font-size: 14.0pt;
color: #000080;
text-align: left;
padding-top: 10px;
padding-left: 10px;
padding-right: 15px;
padding-bottom: 0.5em;
}

#mainbody
{
left: 0;
top: 0px;
margin: 0;
position: absolute;
padding: 10px;
overflow: auto;
height: 100%;
z-index: 1;
background-repeat: no-repeat;
background-position: bottom right;
background-attachment: fixed;
}

Zur Anpassung der Hintergrundfarbe der Non Scrolling Region unter background: die jeweilige Farbe eintragen. Eine Farbskala ist hier zu finden: Farbtabelle

Des Weiteren wird noch eine zweite externe Stylesheetdatei benötigt, die eine Anweisung für den Fall des Druckens des Dokumentes enthält:

#mainbody { overflow: visible; }

Die beiden Stylesheetdateien müssen nun wie folgt im <head> Bereich der .htm Datei eingebunden werden:

<link rel="stylesheet" type="text/css" media="screen" href="name_erste.css">
<link rel="stylesheet" type="text/css" media="print" href="name_zweite.css">

 

Dann muss dem <body> Tag der .htm Seite ein scroll="no" hinzugefügt werden (diese Angabe wird nur vom IE interpretiert und ist nicht HTML Standard). Der <body> Tag sieht wie folgt aussehen:

<body scroll="no">

Für den Bereich der Non Scrolling Region muss nun der Quelltext um einen <div> Container im <body> Bereich der .htm Datei erweitert werden:

<div id="nsr">
Text der Non Scrolling Region
</div>

Für den Bereich der scrollenden Region wird anschließend ebenfalls ein <div> Container im Quelltext im <body> Bereich platziert.

<div id="mainbody">
Text der scrollen soll
</div>

Innerhalb dieses Containers muss sich nun jeglicher Text befinden, der der eigentliche Inhalt der Seite ist (inkl. Bitmaps usw.).

In einem weiteren Schritt muss nun eine externe Javascript Datei erzeugt werden, die die Anweisungen für das Verhalten der beiden Regionen enthält:

window.onload= resizeSplitWndw;
window.onresize= resizeSplitWndw;
window.onbeforeprint= set_to_print;
window.onafterprint= reset_form;

function resizeSplitWndw(){

var onsr= document.all.item("nsr");
var omainbody= document.all.item("mainbody");

if (omainbody ==null) return;
if (onsr != null){
document.all.mainbody.style.overflow= "auto";
document.all.nsr.style.width= document.body.offsetWidth;
document.all.mainbody.style.width= document.body.offsetWidth-4;
document.all.mainbody.style.top= document.all.nsr.offsetHeight;
if (document.body.offsetHeight > document.all.nsr.offsetHeight)
document.all.mainbody.style.height= document.body.offsetHeight - document.all.nsr.offsetHeight;
else document.all.mainbody.style.height=0;
}
}

function set_to_print(){

var i;
if (window.mainbody)document.all.mainbody.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>";
}
}
}

function reset_form(){

document.location.reload();
}

Als letzter Schritt muss nun die Javascript Datei ebenfalls im <head> Bereich der .htm Datei eingebunden werden:

<script language="JavaScript" src="name.js" type="text/javascript"></script>

Die oben angeführten Scripts können auch im Downloadbereich als Muster herunter geladen werden. Die Stylesheets für die beiden Regionen müssen gegebenenfalls an die Bedürfnisse der jeweiligen Hilfe angepasst werden. Ansonsten können diese Musterdateien problemlos als Mustervorlagen verwendet werden.