Hallo miteinander!

Da mir eure profunden Kenntnisse nun schon einige Male das Leben (oder wenigstens die Arbeit an meinem Webseiten-Projekt) entscheidend erleichtert haben, habe ich mich entschlossen, meinen eigenen Thread zu kapern, um noch einmal ein paar Fragen loszuwerden! ;)

Also. Wie schon öfters erwähnt, gibt es auf meiner Seite eine Unmenge an content, und - schlimm genug, dass das alles irgendwie verlinkt und zugänglich gemacht werden muss - ist es natürlich auch so, dass sich die Frage stellt, wie der content selbst dargestellt werden soll.

Vielleicht verdeutlicht sich das Problem, wenn ich euch ein kleines Beispiel gebe:

Ich sitze vor meiner Webseite und lese mir ein juristisches Fall-Beispiel durch. Dann will ich unter Umständen auch damit im Zusammenhang stehende Gesetzes-Paragraphen nachschlagen, mir gesetzliche Definitionen ansehen, mir alternative Betrachtungsweisen, sprich andere Texte anlesen, mir zum besseren Verständnis Schemata und Organigramme anschauen oder mir im Seiten-eigenen Texteditor Notizen machen - und das freilich ohne Instanzen zu wechseln oder sonst einen größeren Aufwand betreiben zu müssen!

Nun ist es mir nach einigen Fehlschlägen zwar tatsächlich gelungen, diese Anforderungen layout-technisch so auf die Reihe zu bekommen, dass all das sehr komfortabel möglich ist, aber ein sehr grundlegendes Problem verhagelt mir leider noch die Freude darüber:

Ich habe zwar erfolgreich die Seiten-Texte, also den eigentlichen Inhalt von den darstellenden Seiten-Elementen abgekoppelt, aber die Seiten-Elemente selbst sind natürlich nach wie vor in die Statik der HTML-Datei eingebunden, was vor dem Hintergrund der oben beschriebenen Anforderungen an die Funktionalität natürlich wenig vorteilhaft ist!

Zum besseren Verständnis meiner weiteren Ausführungen hier mal ein Screenshot einer (beliebigen) Unter-Seite mit den entsprechenden Seiten-Elementen:

http://www.directupload.net/file/d/3829/g9gcs4co_jpg.htm

Die Kopfzeile erklärt sich von selbst; Die Links in der Zweiten Zeile 'beladen' das Menü rechts mit neuen Listen: zur Navigation, zu Gesetzen, Texten usw.; Der 'Behalten'-Button in der Weißen Box sorgt dafür, dass die Box minimiert und auf einem Stapel unterhalb des Menüs 'abgelegt' wird, von wo aus sie bei bedarf wieder aufgerufen werden kann, ohne dass man den entsprechenden content mühsam wieder aus den Menü-Listen ausgraben müsste, - also quasi eine Ablagefunktion.

Entscheidend ist nun diese Weiße Box mit dem Textinhalt!

Hier hatte ich zunächst per .class eine Standardbox mit min-height definiert und in HTML eine lange Liste an "leeren Hüllen" angelegt, was sich aber bei der Bearbeitung in javascript schnell als ziemlicher Alptraum dargestellt hat, da bei jedem Menü-Listenpunkt-Aufruf ja ersteinmal gecheckt werden muss, welche "Hülle" gerade frei ist, um mit content beladen zu werden, von der Reihenfolge der Darstellung dieser Boxen mal ganz abgesehen...

Das hat mich dann auf den Trichter gebracht, dass ich die weißen, Inhalt-tragenden Boxen ja auch bei Bedarf gleich ganz über javascript erstellen und hernach wieder verwerfen könnte! (Und bevor jetzt Einsprüche kommen: Ja, ich weiß, die Seite 'sollte' auch ohne script funktionieren. Tut sie aber nicht. Die Wahl habe ich getroffen und es ist ja auch nur mein ganz persönliches - und kein kommerzielles Projekt für einen Dritten.)

Also habe ich einmal folgenden Code zusammengebastelt:

function selectAGGp1OnClick(){// function nach click auf einen Menülistenpunkt  
createContentBox("AGG §1 Ziel des Gesetzes",textAGGp1(),"AGGp1");}  
  
// headline ist klar, textAGGp1 ist der Paragraphentext, AGGp1 ist eine Markierung  
  
function createContentBox(headline,text,name){  
var boxContainer=document.getElementById("boxContainer"); // da solls rein  
var contentBox=document.createElement("DIV"); // neue Box  
var contentBoxHeader=document.createElement("DIV"); // Rahmen für:  
var contentBoxHeadLine=document.createElement("DIV"); // headline und  
var contentBoxKeepButton=document.createElement("DIV"); // 'Behalten'-button  
var contentBoxKeepButtonText=document.createElement("P"); // und  
var contentBoxCloseButton=document.createElement("DIV"); // 'Schließen'-button  
var contentBoxCloseButtonText=document.createElement("P");  
var contentBoxBody=document.createElement("DIV"); // Rahmen für das  
var contentTextField=document.createElement("P"); // Textfeld  
var encodedTxt=encodeURI(headline);  
var decodedTxt=decodeURI(encodedTxt); // Paragraphen-Zeichen müssen sein  
boxContainer.appendChild(contentBox);  
contentBox.appendChild(contentBoxHeader);  
contentBox.appendChild(contentBoxBody);  
contentBox.insertBefore(contentBoxHeader,contentBoxBody);  
contentBoxHeader.appendChild(contentBoxHeadLine);  
contentBoxHeader.appendChild(contentBoxKeepButton);  
contentBoxHeader.appendChild(contentBoxCloseButton);  
contentBoxHeader.insertBefore(contentBoxHeadLine,contentBoxKeepButton,contentBoxCloseButton);  
contentBoxKeepButton.appendChild(contentBoxKeepButtonText);  
contentBoxCloseButton.appendChild(contentBoxCloseButtonText);  
contentBoxBody.appendChild(contentTextField);  
contentBox.id="contentBoxPlus"; // nur ein manueller Notbehelf  
contentBox.className="contentBox fadeIn"; // Boxen werden immer weich ein- und ausgeblendet  
contentBoxHeader.className="contentBoxHeader";  
contentBoxHeadLine.className="contentBoxHeadLine";  
contentBoxKeepButton.className="contentBoxKeepButton";  
contentBoxCloseButton.className="contentBoxCloseButton";  
contentBoxBody.className="contentBoxBody";  
contentBoxAddEventListener();  
contentBoxHeadLine.innerHTML=decodedTxt;  
contentBoxKeepButtonText.innerHTML="Behalten";  
contentBoxCloseButtonText.innerHTML="Schliessen"; // Auch 'ß' ist ein Sonderzeichen  
contentTextField.className=name; // daran kann ich die Box identifizieren  
contentTextField.innerHTML=text;  
contentBox.style.display="block";  
contentBox.style.animationPlayState="running";}

Die weiße Box, die ihr auf dem Screenshot gesehen habt, wurde so erstellt, also prinzipiell funktioniert es.

Aber: Was nicht funktioniert, dass sind die Sonderzeichen! Wie ihr auf dem Screenshot sehen könnt, fehlt das Paragraphen-Zeichen aus der Überschrift: Obwohl ich in der Funktion den gleichen Code (en- und decodeURI()) verwendet habe, der bei den HTML-erstellten Boxen immer prima funktioniert hat, klappt das bei den in JS erstellten Boxen leider überhaupt nicht!

Außerdem finde ich die Frage der Namensvergabe sehr problematisch: Welche ID soll die erstellte Box bekommen? - Am besten wäre es natürlich, wenn man die Namensvergabe irgendwie automatisieren könnte, also je nach dem, welche ID's schon vergeben sind, contentBox1, contentBox2, contentBox739, ..., contentBox[n]. (und natürlich die Buttons respektive!)

Leider habe ich keine Ahnung, wie ich das anstellen soll...

Wäre toll, wenn mir da jemand weiterhelfen könnte!

Zuletzt davon einigermaßen unabhängig: Weiß jemand von euch, ob es eine Möglichkeit gibt, via CSS oder JS, bei dem Attribut 'opacity' einen Verlauf zu erzeugen, also dass innerhalb eines Rahmens die transparenz graduell zu- bzw. abnimmt?!

Wenn nämlich mehrere von den weißen Inhaltsboxen offen sind und diese gescrollt werden, dann verschieben sie sich unter die mit position:fixed festgepinnte Kopfleiste, und da wäre es sehr nice, wenn der unter der Leiste befindliche Teil smooth ausblenden würde, ohne das es da einen cut gäbe...

Für Hilfe und Anregungen wie immer in Dankbarkeit ergeben und mit besten Grüßen,

euer

Roadster.