Web-Design Beispiel zum Tutorial CSS für alle Browser,
Kapitel Position Fixed DHTML
position: fixed; wird weder von den Internet Explorern unter Windows bis Version 6, noch von Netscape 4 unterstützt. Im Gegensatz zu den Explorern ab 4 verfügt Netscape nicht über die Möglichkeit der Nachhilfe durch andere Stylefähigkeiten wie scrollbare Divs.
The browser Internet Explorer up to version 6 or Netscape 4 are not able to do position: fixed;. Netscape 4 has less possibilities than the Explorer which can scroll divs since version 4.
So bleibt mit DHTML eine Möglichkeit das Browserverhalten anzupassen, ähnlich wie es bei den
IEs 5 bis 6 per expression stärker in das Browserkonzept eingebunden auch möglich ist.
Zu allen Methoden per DHTML müssen dabei mögliche Nachteile wie Verzögerungen oder
Blinkeffekte, auch Instabilitäten oder zu hohe CPU-Last, erwähnt werden; auch bei den
expression ist das feststellbar.
Die Variante ohne DHTML,
Beispiel position fixed CSS, vermeidet diese Effekte.
One way to change the behaviour of such browsers is DHTML or JavaScript like the expression of the IE 5 to 6. All these methods may show disadvantages like delays or flickering. CPU load may increase or at some expressions the browser could become less stable. This method without DHTML position fixed by CSS, avoids such effects.
Zunächst ein typischer frameähnlicher Aufbau im HTML-Quelltext, ein Div mit Navigation und eins mit dem "Inhalt" der Seite:
<body>
<div id=divscroll>
...
</div>
<div id=divfixed>
...
</div>
</body>
Die Anpassung für die Internet Explorer 5 bis 6 per expression ist als Styleanweisung wie auch über die JScript-Funktion setExpression möglich. Als Styleblock kann der Code noch vorsorglich in ein HTML-Weiche als Conditional Comment eingebunden werden:
Tuning styles by use of expression for the Internet Explorer 5 to 6 can be done by JScript and the function setExpression too. The following code shows a solution as a stylesheet which is included in a conditional comment as HTML crossover:
<!--[if lt IE 7]>
<style>
#divfixed{ position: absolute;
top: expression(parseInt(document.body.scrollTop + 10));}
</style>
<![endif]-->
Da im Weiteren sowieso ein, auch externes, Script benötig wird ist eine Lösung per setExpression naheliegend, wenn es auch schwierig sein kann einen zukünftigen IE 7 per JavaScript vorsorglich vom Code auzuschliessen.
For a JavaScript to help Netscape and IE 4 already will exist a solution by setExpression may be prefered.
document.getElementById("df").style.setExpression(
"top",
"parseInt(document.body.scrollTop + 5)"
);
Beide Lösungen mit expression können besonders beim IE 5 Probleme verursachen wenn die abgefragten Eigenschaften nicht verfügbar sind. Möglich ist eine zusätzliche Abfrage oder ein Aufruf nach onload
Both ways of expression may need the questioned Objects first. So an additional request of the existance or a start at onload may be necessary.
Meine Lösung für Netscape 4 abeitet mit einem Array der vorhandenen Layer, welches hier nur für den ersten Layer direkt erzeugt wird. Im Ausbau ermöglicht der Ansatz mehrere Layer einzubinden und gezielt anzusprechen, oder auch automatisch ein Array aller Layer zu erzeugen und die gesetzten Styleeigenschaften abzufragen. Hier noch weiterführende Informationen über ein Array aller vorhandenen Layer und eine Methode getElementById für Netscape 4.
My solution for Netscape 4 uses an array of the existing layer. It is possible to include a method to scan all layers additionally. Further information how to build an array of existing layers and give Netscape 4 a method getElementById is given here.
The sample shows a method getLayerById an an interval to control the scrollheight from time to time.
Hier im Beispiel wird wie erwähnt einfach getLayerById zugewiesen, die Überprüfung der Seitenposition bzw. des Scrollzustandes wird per setInterval regelmäßig durchgeführt.
/* Autor, Entwicklung 2002 Kristof Lipfert Duesseldorf */
if(document.ids){
function initPfixed(pId){
lastY=parseInt(document.ids[pId].top);
doit = window.setInterval("doPfixed('"+pId+"',"+lastY+")",99);}
function doPfixed(pId,oldTop){
winY = window.pageYOffset;
if (winY != lastY && winY > -oldTop)
step = winY-lastY+oldTop;
else if (lastY>0)step=lastY; else step=0;
getLayerById[pId].top=parseInt(getLayerById[pId].top)+step;
lastY+= step;}
window.onload=function(){
getLayerById=new Array;
getLayerById['divfixed']=document.layers[0];
initPfixed('divfixed');}
}
Nachdem nun für Netscape 4 eine Lösung vorliegt, wird auch der Internet Explorer 4, der ja keine Expressions anwenden kann, hier ähnlich per DHTML versorgt:
After that solution for Netscape 4 now the way for the Internet Explorer 4, which can not use expressions an needs some similar DHTML:
/* Autor, Entwicklung 2002 Kristof Lipfert Duesseldorf */
if(document.all && !document.getElementById){
document.write('<style>#divfixedf{position:absolute;'+
'top:10px;left:10px;}<\/style>');
document.writeln('<script>function initPfixed(pId,pTp){');
document.writeln('document.all[pId].style.top=pTp;');
document.writeln('lastY=parseInt(document.all[pId].style.top);');
document.writeln('doit = '+
'window.setInterval("doPfixed(\'"+pId+"\',"+lastY+")",99);}');
document.writeln('function doPfixed(pId,oldTop){');
document.writeln('winY = document.body.scrollTop;');
document.writeln('if (winY!=lastY&&winY>-oldTop)step ='+
' winY-lastY+oldTop;');
document.writeln('else if (lastY>0)step=lastY; else step=0;');
document.writeln('document.all[pId].style.top='+
'parseInt(document.all[pId].style.top)+step+"px";');
document.writeln('lastY+= step;}');
document.writeln('window.onload=loadInits;');
document.writeln('function loadInits(){');
document.writeln('initPfixed("divfixed",10);');
document.writeln('}<\/script>');
}
Solche Anwendung von DHTML per JavaScript kommt der eigentlichen Idee der Zuweisung einer Eigenschaft an ein bestimmtes Seitenelement sehr nahe, allerdings kann solch eine Darstellung wegen der Verzögerungen auch als lästig empfunden werden.
That use of DHTML and JavaScript allows like CSS to link a behaviour to an element of the page only, a basic idea. But the resulting display with its delays may be disturbing.
Nachtrag
* html body {
background: url(dummy) fixed;
}
Diese interessante Ergänzung im CSS-Code, u.a. von U. Kaiser angeregt, vermeidet das Nachpositionieren und Rutschen beim IE. Allerdings werden einige Nachteile wie die CPU-Last und verzögerstes Scrollen damit verstärkt, zudem sollten Expressions nicht grundlegend am Seitenaufbau beteiligt sein da diese Technik womöglich aus Sicherheitsgründen deaktiviert wird. Unschön auch die anzunehmenden vergeblichen Serveranfragen nach der url.
This additional Code reduces some Sideeffects at the IE, but seems not to be a real solution as most problems remain like slow scrolling. In addition to that Expressions should not describe important parts as JavaScript may be supressed for security reasons, and the not existing url oft the background image isn't nice too.
Copyright © Kristof Lipfert Düsseldorf 2002-2005