Positionierung & Visibility

[Patrick Andrieu]

Hallo Robert!

Was sind denn inline-styles ??
Was hab ich denn da benutzt was ich nicht kenne???

Es sind style-Definitionen innerhalb eines HTML-Tags mittels des style-Attributs:

<p style="font-weight:bold">Fetter Text</p>

Die sollten vermieden werden (Trennung von Markup und Layout). Auch die JavaScript-Funktionen solltest Du in eine externe .js-Datei packen (siehe auch hierzu SELFHTML, JavaScript in separaten Dateien).

Die noch nicht definierten Klassen sind schon mal vorbereitet eingebaut.

Hm, OK. Würde ich jedoch vermeiden, und die class-Attribute erst dann einbauen, wenn auch die entsprechenden Klassen definiert sind. Es wird sonst schnell unübersichtlich.

• die Funktion onoff ist jetzt eine Schleife
  Das war der größte Brocken - für mich, aber so richtig hab ich es nicht verstanden wie das funktioniert. Liegt aber definitiv an meinem schmalen JavaScript-Wissen!

  
function onoff(name) {     // logo, dass auch nur ein Textbereich auf einmal angezeigt wird  
  texte = new Array("text1","text2","text3","text4","text5","text6","text7","text8","text9");  
  document.getElementById(name).style.display="block";  
  for (i=0;i<texte.length;i++) {  
    if (texte[i] != name) {  
      document.getElementById(texte[i]).style.display="none";  
    }  
  }  
}  

Hab' oft Schwierigkteiten damit, etwas verständlich zu erläutern, was ich zwar verstanden habe und kann, aber versuchen's wir mal.
In den Klammern erwartet onoff() einen Parameter. Hier: name. In diesem Fall kannst Du genausogut wubbeldibubbel nehmen, _wenn in der if-Abfrage auch wubbeldibubbel steht_.

Die Funktion wird in Deinem Quelltext so aufgerufen:
javascript:onoff('text1') (Früher hattest Du: onoff1())
javascript:onoff('text2') (Früher hattest Du: onoff2())
etc...

Dadurch wird "text1", "text2", etc... beim jeweiligen Aufruf an die Funktion übergeben.

In der Funktion wird eine Variable deklariert (wenn man's richtig machen will, sollte an dieser Stelle sogar var texte = new Array(...); stehen, genauso wie in der Schleife for (var i=0;i<texte.length;i++)  stehen sollte). Es wird ein Array definiert, dessen Inhalt alle Deine Textdiv-IDs sind.

Darunter wird der jeweilige Textbereich auf sichtbar geschaltet, und zwar durch die Änderung der display-Eigenschaft. Beispiel: Hast Du auf den Link geklickt, der für das Sichtbar-Schalten vom DIV mit der ID text1 gedacht ist (javascript:onoff('text1')), wird eben "text1" übergeben, und es passiert nichts anders als in Deinen vielen früheren Funktionen:

document.getElementById('text1').style.display="block";

Das Array und die Schleife werden gebraucht, um alle andere Textbereiche auf unsichtbar zu schalten (hier durch die Änderung der display-Eigenschaft auf none). Die Schleife durchläuft das Array mit den IDs, und schaltet alle DIVs bis auf dem, dessen ID an die Funktion übergeben wurde, auf display:none:

for (i=0;i<texte.length;i++) {
    if (texte[i] != name) {
      document.getElementById(texte[i]).style.display="none";
    }
  }

Um beim Beispiel mit dem ersten Bereich "text1" zu bleiben, bedeutet das:
Durchlaufe das Array, und mach alle DIVs, dessen IDs du findest und die nicht die übergebene ist, unsichtbar. Wenn also text1 übergeben wurde, werde text2, text3 etc... - so eine von denen zuvor sichtbar war, wieder versteckt.

und ein paar Kleinigkeiten, die ich nicht mehr weiß, weil ich mir nicht alles gemerkt habe (jaja, das Alter)
kann nichts tragisches gewesen sein.

Doch: Ich habe Optimiert für Firefox 'rausgenommen ;)

Was Dir zu tun bleibt:

• wenn Du auf position:fixed bestehst, einen Workaround (CSS-Hack) einzubauen (siehe SELFHTML)
  Tja... genau hier bin ich jetzt am Grübeln.
  Das Layout sollte so aussehen, dass das Schild und die Titelanzeige fixiert bleibt, so dass zu jeder Zeit in einen anderen Menüpunkt gesprungen werden kann.
  Durch "absolute" scrollt die Navigation jetzt mit.
  Gibt es noch eine Lösung -außer Frames- das hin zu bekommen?

Klar, ich hatte Dir den Tipp mit SELFHTML gegeben, dort ist ein Beispiel mit fixe Bereiche für den IE (hier mit Conditional Comments gelöst - es gibt auch reine CSS-Hacks dafür).

Aber dafür kann IE5.2 das jetzt nicht mehr anzeigen...
sehr seltsam!

Der wird vermutlich einen Doctype brauchen, der ihn nicht in den Quirks-Mode schickt.

Viele Grüße aus Frankfurt/Main,
Patrick