jQuery addClass - neue Elementabmessungen

[Gunnar Bittersmann]

@@netsurfer

Ich verstehe nicht, warum du da mit JavaScript was umschalten willst.

Weil ich das Multicolumn-Layout ja nur dann haben will, wenn

1. der Inhalt "zu groß" ist, als dass er ohne Überlauf in das äußere Fenster passt

Und wenn der Inhalt weniger ist, gibt es auch bei Multicolumn-Layout nur eine Spalte. Ich sehe nicht, was es da per JavaScript umzuschalten gäbe.

2. JS aktiviert ist

Kannst du haben. Gewohnte Vorgehensweise: HTML per JavaScript die Klasse "js" verpassen, Elemente als Nachfahren von .js stylen. In meinem Beispiel: .js .outer { … } und .js .inner { … }.

Gut, ich könnte dann dem inneren Fenster pauschal ein Multicolumn-Layout zuweisen. Per CSS dann als Default mit column-count: 1.

Nein, eben nicht. column-count fasst du gar nicht an, sondern nur column-width.

Aber was bringt mir das?

Dass du keinerlei Gefrickel brauchst, um per JavaScript Ausmaße von Elementen auszulesen und zu setzen. Und keins, um dein dabei auftretendes Zeitproblem zu lösen.

Sinn und Zweck ist u.a. keine Scrollbar zu haben, sondern "pagination". Es handelt sich ja quasi um eine "Fenster im Fenster" Geschichte, die möglichst unter allen Anzeigebedingungen/ -konstellationen so benutzerfreundlich wie möglich sein soll.

Mag sein, dass Hin-und-Herscrollen per JavaScript mit Zurück-/Vor-Buttons statt nativem horizontalen Scrollen die bessere Variante ist. Screenreader dürften auch den ganzen Text vorlesen.

Also go ahead! Dafür JavaScript. Für das eigentliche Multicolumn-Layout nicht.

LLAP

PS: Besser (performanter) dürfte es sein, wenn du nicht den Wert von left änderst, sondern transform: translateX( … ) einsetzt. Besonders, wenn du das Hin-und-Herscrollen animierst. (Das solltest du tun. Natürlich auch nicht per JavaScript, sondern mit CSS-Transition.)