jScrollPane und horizontales Layout

Guten Abend in die Runde,
ich würde gerne jScrollPane verwenden um eine Reihe von Inhaltselementen (Text mit Bild / Video/ usw.) in der vollen Bildschirmbreite horizontal zu scrollen.
Script ist eingebunden usw. Leider will es mir nicht gelingen, die gefloateten (float:left ) Artikel in einer Reihe zu halten. Sie brechen um und der horizontale Scrollbalken erscheint nicht, nur der vertikale (trotz horizontal only).
Hat jemand jScrollPane für horizontales Scrollen von Artikeln im Einsatz und könnte mir einen Tip geben?

Wäre super toll.

Gruß,
sparklz

Gut is immer ein Link zur Seite, dann kann man mal direkt schauen.
Wir wissen ja nicht was Du gebaut hast und wie es ausschaut. Ausserdem läßt es sich an einer echten Seite leichter debuggen ;-)

Hallo sparklz,
es muss manuell eine Breite angegeben werden. Entweder fest, oder mit Javascript berechnet, damit es funktioniert. Ohne das Setzen der Breite geht es meiner Erfahrung nach nicht.

Hier ist es zwar nicht mit Artikeln gemacht, aber das Prinzip sollte das Gleiche sein: ingageiser.com

Hallo Niels,

danke für Deine Antwort und schöne Website!.
Ich habe eine horizontale Seite aufgebaut: in #main liegen unterschiedlich viele divs (Anzahl je Seite unterschiedlich) mit unterschiedlichen Breiten und Navigation gefloatet nebeneinander. Width für #main setze ich momentan per Hand als feste Größe und overflow-y: scroll / overflow-x:hidden.
Mousewheel habe ich für das ausschließliche horizontale Scrollen eingebunden. Ich glaube mit dieser Lösung kann ich inzwischen leben

Somit funktioniert mal die Grundfunktion. Aber die per Hand festgesetzte Breite für den #main-DIV ist natürlich keine schöne und vorallem wenig praktikable Lösung.
Magst Du mir vielleicht verraten, wie Du die Gesamtbreite errechnet und ausgegeben hast?
MEine Möglichkeiten mit jQuerie sind leider noch sehr rudimentär, taste mich da erst heran.

Schönen Abend,
sparklz

Hallo sparklz,

kommt natürlich drauf an, wie der Container und die Einzelelemente heißen. Wenn jQuery eingebunden ist, sollte es so gehen:

HTML-Code:

---

$( document ).ready(function() {
        var sum=0;
        $('.dein_container .dein_item').each( function() { sum += $(this).outerWidth(true) ; } );
        $('.dein_container').width( sum );
});

---