XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   Javascript & Ajax (http://xhtmlforum.de/forumdisplay.php?f=83)
-   -   Horizontaler Scroll mit DIVs und Breite über Javascript (http://xhtmlforum.de/showthread.php?t=62068)

kolarsky 13.08.2010 21:37

Horizontaler Scroll mit DIVs und Breite über Javascript
 
Hallo liebe Community,

ich weiß, der Titel hört sich nach "...und täglich grüßt das Murmeltier" an, aber ich hab jetzt etlich Stunden Suche hinter mir und leider noch nicht wirklich eine befriedigende Antwort/Lösung gefunden...

Hier im Forum auch schon ein Thema gefunden, welches im Prinzip mein Problem genau trifft, aber auch damit hatte ich kein Glück. (Artikel)

Also nochmal meine Problemstellung:
Ich möchte eine Seite aufbauen, die horizontal scrollt. Die Seite enthält ein umschließendes DIV und darin liegen mehrere DIVs - hier kommt immer mal wieder ein neues dazu. Die Breite des umschließenden DIVs kann ich natürlich auch jedesmal aufs Neue im CSS anpassen, würde aber gerne die Gesamtbreite aller enthaltenen DIVs per Javascript auslesen lassen und dann dem umschließenden DIV die entsprechende Breite zuweisen.

Mit dem angepassten Script aus o.g. Artikel sieht die Seite so aus:
Testseite
Lustigerweise funktioniert der Javascript-Scroller noch... ;)

Eigentlich sollte die Breite im HEAD mit der Funktion 'AutoSize' ermittelt werden und dann dem DIV 'content' zugewiesen werden.
---
Edit: Ich habe auch in der Funktion, bzw. beim Funktionsaufruf im BODY ein alert(length); eingebaut und bekomme 0 (also Null) ausgespuckt...
---

Kann mir da jemand nen Tipp geben, wie man das umsetzen kann? Ich verlier da so ein wenig den Überblick...

Danke schonmal
Ralf

kolarsky 16.08.2010 11:18

Lösung gefunden mit ein wenig Hilfe...
 
Also:
nachdem ich leider mit dem Script keinen Erfolg hatte, hab ich mir noch ein wenig Unterstützung geholt. Nachdem wir dann festgestellt hatten, dass ich im HEAD bereits jQuery eingebunden hatte, haben wir kurzerhand nach den Möglichkeiten geschaut, über die JQ-Bibliotheken dem DIV die Breite zuzuweisen. Und das hat dann auch prima geklappt. :D

Der Code schaut final so aus:

...
<script type="text/javascript">
function AutoSize() {
var container = document.getElementById('content');
var elements = container.getElementsByTagName('div');
var length = 0;
for (var elementIndex = 0; elementIndex < elements.length; elementIndex++) {
var element = elements[elementIndex];
length = length + (element.offsetWidth + 2);
}
$(container).css('width',length);
}
</script>
</head>
<body onload="AutoSize()">
...

In der zweiten Scriptzeile muss dann noch 'content' durch den eigenen DIV-ID ersetzt werden und bei der Berechnung von length musste ich ein +2 einbauen, da meine DIVs links und rechts einen Margin von 1px haben.

Dann gabs noch das Problem, dass die Seite erstmal alle DIVs untereinander lädt und am Ende alles auf eine Zeile schubst, da ja erst dann quasi die finale Breite feststeht.
Hier gabs dann auch noch n kleines Workaround: Im CSS dem DIV 'content' eine seeeehr große Breite geben, die dann nach dem Laden auf die richtige Breite eingestellt wird.

Hoffe, damit konnte ich ein wenig zur Community beitragen.

Beste Grüße


Alle Zeitangaben in WEZ +2. Es ist jetzt 17:28 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2022, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2020