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;
}
Alles anzeigen
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');
}
}
);
}
);
Alles anzeigen
