jQuery addClass - neue Elementabmessungen

[netsurfer]

@@Gunnar

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.

Ja doch! Ohne JS soll es ja ein Einspalter mit vertikaler Scrollbar sein. Mit JS ein Mehrspalter ohne Scrollbar.

Also muss ich ja von column-width:auto auf einen belieibig größen Wert ändern, damit er zum Mehrspalter wird.

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 { … }.

Ja, schon klar ... ;-)

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.

Ja ja, ist ja schon gut. Irrtum meinerseits. Ist ja genau das, was der Browser "automatisch" machen soll.

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.

Nein, eben nicht. Um das Blättern zu ermöglichen, muss ich trotzdem die Abmessungen (und somit die Anzahl der entstandenen Spalten) ermitteln.

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

Ja, danke! Völlig richtig ..., baue ich direkt ein, sobald ich das andere Problem gelöst habe! ;-)

Gruß Gunther