jQuery horizontale Scrollbar

[Ratlosermann]

Hallo Leute,

ich brauche für ein Projekt eine horizontale Scrollbar. Es soll jedoch kein inFrame sein.

Dabei bin ich auf die folgende Seite gestoßen...
Slider demo - scrollbar - Interface plugin for jQuery

Finde das Script ganz nett und würde dies gerne nutzen. Nur leider ist die Scrollbar vertikal. Was muss ich in dem Script ändern, damit die Scrollbar horizontal ist? Leider kenn ich mich mit JQuery nicht aus.

Gerne bin ich auch für alternativen offen. Jedoch sollte die Scrolleiste nur einseitig und farblich veränderbar sein.

Grüße
Ratlosermann

[Ammaletu]

Ich habe jetzt nicht wirklich Zeit, in das Script zu schauen. Aber reichen da nicht einige Zeilen CSS dafür?! Sagen wir mal, Du hast ein div mit einer Klasse, welches die Scrollbar kriegen soll. Dem div gibst Du eine fest Weite (oder eine relative, je nach Seite) und dann packst Du da mehr Inhalt rein als reinpasst, ganz viele Bilder meinetwegen. Dann einfach "overflow: scroll" für das div definieren und den Zeilenumbruch dafür ausschalten (damit der Browser die Sachen nach rechts und nicht nach unten darstellt), und der Browser sollte eine Scrollbar produzieren, oder? Da könnte es höchstens sein, dass gleich zwei Scrollbars eingeblendet werden. Müsstest Du auf jeden Fall in mehreren Browsern testen.

[sensifreak]

<style type="text/css">
<!--
.scroll {
    height: 400px;
    width: 300px;
    overflow: scroll;
}
-->
</style>
<div class="scroll">
der text 
</div>

versuchs damit

[Ratlosermann]

Vielen Dank für eure Lösungsansätze...

Zitat von Ammaletu

Ich habe jetzt nicht wirklich Zeit, in das Script zu schauen. Aber reichen da nicht einige Zeilen CSS dafür?! Sagen wir mal, Du hast ein div mit einer Klasse, welches die Scrollbar kriegen soll. Dem div gibst Du eine fest Weite (oder eine relative, je nach Seite) und dann packst Du da mehr Inhalt rein als reinpasst, ganz viele Bilder meinetwegen. Dann einfach "overflow: scroll" für das div definieren und den Zeilenumbruch dafür ausschalten (damit der Browser die Sachen nach rechts und nicht nach unten darstellt), und der Browser sollte eine Scrollbar produzieren, oder? Da könnte es höchstens sein, dass gleich zwei Scrollbars eingeblendet werden. Müsstest Du auf jeden Fall in mehreren Browsern testen.

Ich bin diesbezüglich auch deiner Meinung und der css Befehl ist mir bekannt. Nur steht diesbezüglich nichts im Script. Ich sehe es bestimmt nur wieder nicht...

Zitat von sensifreak

<style type="text/css">
<!--
.scroll {
    height: 400px;
    width: 300px;
    overflow: scroll;
}
-->
</style>
<div class="scroll">
der text 
</div>

versuchs damit

Auf die Idee bin ich auch schon gekommen. Jedoch möchte ich eine horizontale Scrollbar haben und die Vertikale soll aber versteckt sein. Leider funktioniert dies damit nicht. Auch soll die Scrollbar, wie in dem o.g. Beispiel aussehen...

[sensifreak]

<style type="text/css">
<!--
.scroll {
    height: 40px;
    width: 300px;
    overflow: auto;
}

-->
</style>
<div class="scroll">
Text
</div>

So sollte es gehen

[Ratlosermann]

Zitat von sensifreak

<style type="text/css">
<!--
.scroll {
    height: 40px;
    width: 300px;
    overflow: auto;
}

-->
</style>
<div class="scroll">
Text
</div>

So sollte es gehen

Die Möglichkeit ist mir auch bekannt, nur lässt sich hier nicht (aus meinen können her) entsprechend der Scrollbalken verändern (Aussehen). Wie in meinem oben verlinkten Beispiel...

Gibt es denn noch andere Alternativen???

[sensifreak]

mit css kannst du ihn nur für den ie gestalten so weit ich weis.
sonst is das alles noch in flash realisierbar

[Ratlosermann]

Zitat von sensifreak

mit css kannst du ihn nur für den ie gestalten so weit ich weis.
sonst is das alles noch in flash realisierbar

Nun es muss ja auch ohne Flash gehen. Im oben verlinkten Beispiel geht es ja, jedoch nur vertikal.

Ich brauche genau diese Form jedoch nur horizontal!!!

[Ammaletu]

Ehrlich gesagt finde ich, dass Du ruhig selber die 15 Minuten investieren könntest, das verlinkte Script zu verstehen, wenn Dir das so wichtig ist. Ich meine, der Aufwand beim Anpassen beschränkte sich im großen und ganzen darauf, "y" durch "x" zu ersetzen und "height" durch "width"...

Aber gut, ich bin mal nicht so.

Das CSS des Beispiels so hier ändern:

.slider1
{
    height: 16px;
    width: 300px;
    background-color: #33CC33;
    position: absolute;
}
.indicator
{
    width: 16px;
    height: 16px;
    background-color: #FF9900;
    position: absolute;
    font-size: 1px;
    overflow: hidden;
}
.container
{
    width: 400px;
    height: 300px;
    padding: 10px;
    border: 1px solid #900;
    overflow: hidden;
    position: relative;
    background-color: #eee;
}
.content
{
    position: absolute;
    width: 1200px;
}

Die 1200px sind nur dafür da, dass wir horizontal was zum Scrollen haben. Vertikal scrollen ist natürlich nicht mehr, der Text läuft also aus dem sichtbaren Bereich raus.

So, und hier das geänderte javascript:

    var ocontainer;
    var ocontent;
    var spaceToScroll;
    $(document).ready(
        function () 
        {
            ocontainer = $('div.container');
            ocontent = $('div.content');
            
            containerSize = jQuery.iUtil.getSize(ocontainer.get(0));
            containerPosition = jQuery.iUtil.getPosition(ocontainer.get(0));
            containerInner = jQuery.iUtil.getClient(ocontainer.get(0));
            
            contentSize = jQuery.iUtil.getSize(ocontent.get(0));
            
            $('div.slider1')
                .css('top', (containerPosition.y + containerSize.hb) + 'px')
                .css('left', containerPosition.x + 'px')
                .css('width', containerSize.wb + 'px');
            
            spaceToScroll = contentSize.wb - containerInner.w;
            
            $('div.indicator')
                .css('width', containerInner.w * containerSize.wb / contentSize.wb + 'px')
            
            $('.slider1').Slider(
                {
                    accept : '.indicator',
                    onSlide : function( cordx, cordy, x , y)
                    {
                        ocontent
                            .css('left', - spaceToScroll * cordx / 100 + 'px');
                    }
                }
            );
        }
    );

[Ratlosermann]

Hallo,

vielen Dank für deine Rückantwort. Entschuldige, dass ich erst heute dazu gekommen bin dir zu antworten.

Schade, dass du denkst, dass ich die notwendige Zeit nicht investiert habe. Jedoch wie ich eingangs des Treads schon erwähnt hatte, kenne ich mich mit JQuery nicht aus. Ich habe versucht, über Google und per Eigenversuch das Problem zu lösen, leider ohne Erfolg. Dies war definitiv mehr als 15 min…Nur wenn ich keinen Lösungsweg mehr finde, versuche ich es, als aller letzte Möglichkeit über das Forum.

Durch deine Lösung konnte ich nun die notwendigen Änderungen nachvollziehen und finde nun auch dass es eigentlich einfach ist. Das Prinzip konnte ich verstehen.

Ich danke dir und hoffe du bist nicht all zu streng mit mir.

Grüße