Camping_RIDER: Dynamisches Erstellen von Seiten-Elementen

Beitrag lesen

Aloha ;)

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!

Du hast dir was vorgenommen ;)

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

Nett, das mal in Action zu sehen. Jetzt verstehe ich auch, dass dich die Scrollbalken aus gutem Grund gestört haben.

(Und bevor jetzt Einsprüche kommen: Ja, ich weiß, die Seite 'sollte' auch ohne script funktionieren.

Nein, du hast das Prinzip nicht verstanden ;) Nicht die Seite sollte ohne Script funktionieren. Grundsätzlich ist Dynamik in Seiten so gut wie nur über Javascript überhaupt möglich. Wenn das gesamte Anforderungsprofil der Seite (wie in diesem Fall hier) auf Dynamik ausgelegt ist, dann ist es nur recht und billig vom User zu verlangen, Javascript dafür zu aktivieren. Es ist nur dann angebracht auf den Einsatz von JavaScript mindestens teilweise zu verzichten, wenn die Funktionalitäten auch ohne Javascript realisierbar sind. Das sind sie in deinem Fall aber nicht. (Bezogen auf die nackte Scrollleiste alleine waren sie das - schließlich konnten wir eine Lösung finden, die auch ohne Javascript scrollen ermöglicht) Ich formuliere gerne so: JavaScript ist eine Sache für Komfortfeatures. Und deine Seite ist imho von vorne bis hinten ein Komfortfeature ;)

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.)

Und eine bewusste Entscheidung seitens des Inhabers ist sowieso nicht in Frage zu stellen ;)

Also habe ich einmal folgenden Code zusammengebastelt:
[...]

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!

Warum überhaupt das kodieren und ent-kodieren? Du kannst doch einfach den String nutzen, der in headline gespeichert ist. Schonmal versucht? Wenn du - warum auch immer - ein Äquivalent zu htmlspecialchars auf js-Basis suchst, dann schau mal hier (Erste Antwort).

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!)

Eigentlich einfach. Folgende Routine spuckt dir immer ein unvergebenes x aus:

var x = 0;  
while (document.getElementById('contentBox'+x) != null) { x++; }

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

Ich hoffe schon, dass dir das weiterhilft ;)

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?!

Mit etwas Umdenken eigentlich auch einfach: Wenn der Berg nicht zum Prophet kommt, muss der Prophet eben zum Berg kommen. Oder: Wenn die Box nicht vor dem Hintergrund verschwinden will, dann soll sie eben dahinter verschwinden :D

Man nehme eine Box über die gesamte gewünschte Breite und mit genügend hohem z-index. Die bekommt per linear-gradient einen vertikalen Farbverlauf zwischen der Hintergrundfarbe (oben) und transparent (unten). Diese knalle man da hin und in der Höhe, wie und wo der smoothe Fading-Effekt geschehen soll. Und voila, die Dinge scrollen unten durch und werden immer blasser.

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...

Dann musst du deine Fading-Box eben auch mit fixed anpinnen ;)

Grüße,

RIDER

--
Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[