Neue Version von cssRule()

[Cybaer]

Hi,

»Ein hoher Nutzen also für den Webautor, durch die problemlose
   Scriptanwendung dank UJS - eine unschöne wie irritierende
   "Zappelei" für den Besucher ...«
Da ich an diesem Problem schon wirklich lange knabbere und es bischer immer nur Serverseitig lösen konnte, wenn Leute ohne JS auch an die zugeklappten Inhalte kommen sollten und es gleichzeitig nicht zappeln sollte.

Ggf. schalte ich den Inhalt erst im onLoad-Event sichtbar (s. showMore, wo ich das Problem auf eben diese Art gelöst habe).

Ich gestehe allerdings freimütig, daß ich ja zusätzlich zu CSS oft immer noch ein "stabiles, abwärtskompatibles" Tabellenlayout bevorzuge. Und da erscheint der Inhalt ja ohnehin erst, wenn fertig gerendert wurde, wobei die CSS-Manipulationen von mir bereits *vor* dem onLoad-Event vollzogen werden. ;)

Ohne Tabellenlayout mache ich die Manipulationen dann direkt hinter dem HTML-Element (OK, dann hat es sich was mit UJS, aber was soll's).

Allerdings verstehe ich nicht wie man mit deiner Funktion genau das Verhindern kann?

Die Manipulation der Stylesheets hat den großen Vorteil, daß man sie manipulieren kann, *bevor* überhaupt ein BODY existiert (geschweige denn die Elemente in ihm, die man eigentlich beeinflussen möchte). D.h., man kann mit (U)JS *zwischen* STYLE- und BODY-Tag tun, was zu tun ist (Farben setzen, Elemente ausblenden, etc.). Wenn die Elemente dann tatsächlich kommen, ist alles bereits fertig.

S. das (mittlerweile 2.) Beispiel: Dort sind 2 Tabellenspalten, die eingefärbt werden sollen. Ursprungsfarbe ist schwarz. Mit cssRule() wird die Hintergrundfarbe der linken Spalte auf blau gesetzt, mit toggle() die rechte Spalte auf silber und erneut mit cssRule() dann auch die linke Spalte auf silber.

Daraus lassen sich folgende Unterschiede ableiten:
 1. toggle() (also die Bearbeitung aller betreffenden HTML-Elemente in einer Schleife) dauert was die reine JS-Laufdauer angeht länger als cssRule(), sobald mehr als ca. 200 HTML-Elemente zu verändern sind.
 2. Die reine Umsetzung der dynamischen Style dauert in beiden Fällen ähnlich lange (die Rendering-Engine ist *deutlich* langsamer als die reine JS-Ausführung!).
 3. toggle() kann erst eingesetzt werden, nachdem die HTML-Elemente existieren, cssRule() bereits vorher (schön sichtbar am Umstand, daß die linke Spalte schon mit blauem Hintergrund erscheint, während der silberne Hintergrund auf sich warten läßt - der erste cssRule()-Aufruf steht direkt hinter dem STYLE-Tag).
 4. Mit cssRule() lassen sich die HTML-Elemente je nach Ausgabemedium steuern. D.h., wenn der Surfer z.B. einen Text ausblenden möchte, so kann man es so machen, daß nur der Text auf dem Bildschirm versteckt wird, im Ausdruck aber weiterhin erscheint.

Ich habe heute auch noch eine weitere Testseite hochgeladen, die einfach mal diverse Regeln & Stile ausliest, bzw. verändert. Hier werden z.B. auch gezielt die Schriftgrößen für den Ausdruck geändert.

cssRule() hat halt den Vorteil, sich direkt auf die mit STYLE und LINK eingebunden Stylesheets beziehen zu können (schreibend wie lesend). Wenn man das nicht braucht, kann man natürlich im UJS auch ein eigenes Stylesheet einbinden (indem man halt on-the-fly genau die STYLE- und/oder LINK-Elemente erzeugt, die man für seine Manipulationen braucht).

En "Zappel-Problem" bleibt allerdings: Dann nämlich, wenn man, wie z.B. in showMore(), nicht nur die Stile ändert, sondern nachträglich neuen Inhalt hinzufügt (in diesem Fall halt die "mehr"-Links). Allerdings ist diese "Klein-Zappelei" kaum der Rede Wert, im Vergleich zur Masse des verschwindenden Contents.

Man könnte also z.B. mit cssRule() den Content einklappen, und wenn das geklappt (;-)) hat, mit innerHTML & Co. den Link zum Anzeigen reinbauen. Geschickt gemacht dürfte sich die Irritation in Grenzen halten.

Gruß, Cybaer