Willkommen auf dem Portal für Mediengestalter

Noviomagus · Threadersteller

Hi Leuts hab ein Problem,

das Script iss soweit supergeil.. nur brauche ich eins wo horizontal scrollt...
Weiss jemand wass ich wo umstellen muss ? ich hab mir schon den Wolf gelesen in dem Script bin aber
ned so der Held ...
www.n-son.com/scripts/jsScrolling/example3.html

Schon mal Danke im Voraus falls sich jemand auskennt und mir sagt wo ich schrauben muss ... *zwinker*

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jsScrollbar</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">
.Container {
position: absolute;
top: 50px; left: 100px;
width: 400px;
height: 200px;
background-color: #EEE;
}
#Scroller-1 { position: absolute; overflow: hidden;
width: 400px;
height: 600px;
}
#Scroller-1 p {
margin: 0; padding: 10px 20px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
text-indent: 20px;
color: #777;
}
.Scroller-Container {
position: absolute;
top: 0px; left: 0px;
}
.Scrollbar-Track {
width: 10px; height: 100px;
position: absolute;
top: 75px; left: 500px;
background-color: #EEE;
}
.Scrollbar-Handle {
position: absolute;
top: 0px; left: 0px;
width: 10px; height: 30px;
background-color: #CCC;
}
</style>
<script type="text/javascript" src="example3-Dateien/jsScroller2.js"></script>

<script type="text/javascript">
var scroller = null;
var scrollbar = null;
window.onload = function () {
scroller = new jsScroller(document.getElementById("Scroller-1"), 400, 200);
scrollbar = new jsScrollbar (document.getElementById("Scrollbar-Container"), scroller, false);
}
</script>
</head>

<body>

<div class="Container">
<div id="Scroller-1">
<div style="left: 0px; top: -143px;" class="Scroller-Container">
<p>Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Donec iaculis, ante
et congue feugiat, elit wisi commodo metus, ut commodo ligula enim ac
justo. Pellentesque id ligula. Class aptent taciti sociosqu ad litora
torquent per conubia nostra, per inceptos hymenaeos. Phasellus vitae mi
a elit dictum volutpat. Pellentesque nec arcu. Etiam blandit. Phasellus
egestas dolor ut lacus. Sed enim justo, sagittis ut, condimentum non,
ullamcorper eu, neque. In hac habitasse platea dictumst. Integer ipsum
risus, sagittis ac, imperdiet ac, interdum sed, libero. Praesent
commodo. Mauris congue, urna eget hendrerit elementum, dolor ligula
ultrices neque, in elementum ante erat et elit.</p>

<p>Vivamus
vehicula. Integer cursus massa et nisl. Morbi pretium sem eget risus.
Vestibulum nec est. Donec feugiat purus et ligula. Quisque semper. Sed
eu ante. Curabitur suscipit porttitor libero. Nam eros leo,
sollicitudin eget, tincidunt vitae, facilisis a, dui. Proin neque.
Aliquam erat volutpat. Pellentesque felis.</p>

<p>Aliquam
consequat. Proin feugiat ultricies dui. Suspendisse mollis dui nec
nunc. Nam tristique, ante vitae imperdiet vestibulum, elit nulla
rhoncus nisl, vitae tincidunt dolor dui eu mi. In hac habitasse platea
dictumst. Nunc blandit dolor vel mauris. Proin wisi. Nam pharetra
ultrices tellus. Sed arcu. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Nullam ultricies semper wisi. Sed nisl. Donec blandit.
Nunc vitae urna sed nisl mattis ornare.</p>

<p>Lorem ipsum dolor
sit amet, consectetuer adipiscing elit. Donec iaculis, ante et congue
feugiat, elit wisi commodo metus, ut commodo ligula enim ac justo.
Pellentesque id ligula. Class aptent taciti sociosqu ad litora torquent
per conubia nostra, per inceptos hymenaeos. Phasellus vitae mi a elit
dictum volutpat. Pellentesque nec arcu. Etiam blandit. Phasellus
egestas dolor ut lacus. Sed enim justo, sagittis ut, condimentum non,
ullamcorper eu, neque. In hac habitasse platea dictumst. Integer ipsum
risus, sagittis ac, imperdiet ac, interdum sed, libero. Praesent
commodo. Mauris congue, urna eget hendrerit elementum, dolor ligula
ultrices neque, in elementum ante erat et elit.</p>

<p>Vivamus
vehicula. Integer cursus massa et nisl. Morbi pretium sem eget risus.
Vestibulum nec est. Donec feugiat purus et ligula. Quisque semper. Sed
eu ante. Curabitur suscipit porttitor libero. Nam eros leo,
sollicitudin eget, tincidunt vitae, facilisis a, dui. Proin neque.
Aliquam erat volutpat. Pellentesque felis.</p>

<p>Aliquam
consequat. Proin feugiat ultricies dui. Suspendisse mollis dui nec
nunc. Nam tristique, ante vitae imperdiet vestibulum, elit nulla
rhoncus nisl, vitae tincidunt dolor dui eu mi. In hac habitasse platea
dictumst. Nunc blandit dolor vel mauris. Proin wisi. Nam pharetra
ultrices tellus. Sed arcu. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Nullam ultricies semper wisi. Sed nisl. Donec blandit.
Nunc vitae urna sed nisl mattis ornare.</p>

</div>

</div>

</div>

<div style="visibility: visible;" id="Scrollbar-Container">

<div style="width: 119px; height: 328px; top: 145px; left: 740px;" class="Scrollbar-Track">
<div style="top: 100px; visibility: visible; left: 0px; width: 80px;" class="Scrollbar-Handle"></div>

</div>

</div>

</body>
</html>

Hier das JS-Script dazu ...

function jsScroller (o, w, h) {
var self = this;
var list = o.getElementsByTagName("div");
for (var i = 0; i < list.length; i++) {
if (list[i].className.indexOf("Scroller-Container") > -1) {
o = list[i];
}
}

//Private methods
this._setPos = function (x, y) {
if (x < this.viewableWidth - this.totalWidth)
x = this.viewableWidth - this.totalWidth;
if (x > 0) x = 0;
if (y < this.viewableHeight - this.totalHeight)
y = this.viewableHeight - this.totalHeight;
if (y > 0) y = 0;
this._x = x;
this._y = y;
with (o.style) {
left = this._x +"px";
top = this._y +"px";
}
};

//Public Methods
this.reset = function () {
this.content = o;
this.totalHeight = o.offsetHeight;
this.totalWidth = o.offsetWidth;
this._x = 0;
this._y = 0;
with (o.style) {
left = "0px";
top = "0px";
}
};
this.scrollBy = function (x, y) {
this._setPos(this._x + x, this._y + y);
};
this.scrollTo = function (x, y) {
this._setPos(-x, -y);
};
this.stopScroll = function () {
if (this.scrollTimer) window.clearInterval(this.scrollTimer);
};
this.startScroll = function (x, y) {
this.stopScroll();
this.scrollTimer = window.setInterval(
function(){ self.scrollBy(x, y); }, 40
);
};
this.swapContent = function (c, w, h) {
o = c;
var list = o.getElementsByTagName("div");
for (var i = 0; i < list.length; i++) {
if (list[i].className.indexOf("Scroller-Container") > -1) {
o = list[i];
}
}
if (w) this.viewableWidth = w;
if (h) this.viewableHeight = h;
this.reset();
};

//variables
this.content = 0;
this.viewableWidth = w;
this.viewableHeight = h;
this.totalWidth = o.offsetWidth;
this.totalHeight = o.offsetHeight;
this.scrollTimer = null;
this.reset();
};
//Ab hier scrollbar script

function jsScrollbar (o, s, a, ev) {
var self = this;

this.reset = function () {
//Arguments that were passed
this._parent = o;
this._src = s;
this.auto = a ? a : false;
this.eventHandler = ev ? ev : function () {};
//Component Objects
this._up = this._findComponent("Scrollbar-Up", this._parent);
this._down = this._findComponent("Scrollbar-Down", this._parent);
this._yTrack = this._findComponent("Scrollbar-Track", this._parent);
this._yHandle = this._findComponent("Scrollbar-Handle", this._yTrack);
//Height and position properties
this._trackTop = findOffsetTop(this._yTrack);
this._trackHeight = this._yTrack.offsetHeight;
this._handleHeight = this._yHandle.offsetHeight;
this._x = 0;
this._y = 0;
//Misc. variables
this._scrollDist = 5;
this._scrollTimer = null;
this._selectFunc = null;
this._grabPoint = null;
this._tempTarget = null;
this._tempDistX = 0;
this._tempDistY = 0;
this._disabled = false;
this._ratio = (this._src.totalHeight - this._src.viewableHeight)/(this._trackHeight - this._handleHeight);

this._yHandle.ondragstart = function () {return false;};
this._yHandle.onmousedown = function () {return false;};
this._addEvent(this._src.content, "mousewheel", this._scrollbarWheel);
this._removeEvent(this._parent, "mousedown", this._scrollbarClick);
this._addEvent(this._parent, "mousedown", this._scrollbarClick);

this._src.reset();
with (this._yHandle.style) {
top = "0px";
left = "0px";
}
this._moveContent();

if (this._src.totalHeight < this._src.viewableHeight) {
this._disabled = true;
this._yHandle.style.visibility = "hidden";
if (this.auto) this._parent.style.visibility = "hidden";
} else {
this._disabled = false;
this._yHandle.style.visibility = "visible";
this._parent.style.visibility = "visible";
}
};
this._addEvent = function (o, t, f) {
if (o.addEventListener) o.addEventListener(t, f, false);
else if (o.attachEvent) o.attachEvent('on'+ t, f);
else o['on'+ t] = f;
};
this._removeEvent = function (o, t, f) {
if (o.removeEventListener) o.removeEventListener(t, f, false);
else if (o.detachEvent) o.detachEvent('on'+ t, f);
else o['on'+ t] = null;
};
this._findComponent = function (c, o) {
var kids = o.childNodes;
for (var i = 0; i < kids.length; i++) {
if (kids[i].className && kids[i].className == c) {
return kids[i];
}
}
};
//Thank you, Quirksmode
function findOffsetTop (o) {
var t = 0;
if (o.offsetParent) {
while (o.offsetParent) {
t += o.offsetTop;
o = o.offsetParent;
}
}
return t;
};
this._scrollbarClick = function (e) {
if (self._disabled) return false;

e = e ? e : event;
if (!e.target) e.target = e.srcElement;

if (e.target.className.indexOf("Scrollbar-Up") > -1) self._scrollUp(e);
else if (e.target.className.indexOf("Scrollbar-Down") > -1) self._scrollDown(e);
else if (e.target.className.indexOf("Scrollbar-Track") > -1) self._scrollTrack(e);
else if (e.target.className.indexOf("Scrollbar-Handle") > -1) self._scrollHandle(e);

self._tempTarget = e.target;
self._selectFunc = document.onselectstart;
document.onselectstart = function () {return false;};

self.eventHandler(e.target, "mousedown");
self._addEvent(document, "mouseup", self._stopScroll, false);

return false;
};
this._scrollbarDrag = function (e) {
e = e ? e : event;
var t = parseInt(self._yHandle.style.top);
var v = e.clientY + document.body.scrollTop - self._trackTop;
with (self._yHandle.style) {
if (v >= self._trackHeight - self._handleHeight + self._grabPoint)
top = self._trackHeight - self._handleHeight +"px";
else if (v <= self._grabPoint) top = "0px";
else top = v - self._grabPoint +"px";
self._y = parseInt(top);
}

self._moveContent();
};
this._scrollbarWheel = function (e) {
e = e ? e : event;
var dir = 0;
if (e.wheelDelta >= 120) dir = -1;
if (e.wheelDelta <= -120) dir = 1;

self.scrollBy(0, dir * 20);
e.returnValue = false;
};
this._startScroll = function (x, y) {
this._tempDistX = x;
this._tempDistY = y;
this._scrollTimer = window.setInterval(function () {
self.scrollBy(self._tempDistX, self._tempDistY);
}, 40);
};
this._stopScroll = function () {
self._removeEvent(document, "mousemove", self._scrollbarDrag, false);
self._removeEvent(document, "mouseup", self._stopScroll, false);

if (self._selectFunc) document.onselectstart = self._selectFunc;
else document.onselectstart = function () { return true; };

if (self._scrollTimer) window.clearInterval(self._scrollTimer);
self.eventHandler (self._tempTarget, "mouseup");
};
this._scrollUp = function (e) {this._startScroll(0, -this._scrollDist);};
this._scrollDown = function (e) {this._startScroll(0, this._scrollDist);};
this._scrollTrack = function (e) {
var curY = e.clientY + document.body.scrollTop;
this._scroll(0, curY - this._trackTop - this._handleHeight/2);
};
this._scrollHandle = function (e) {
var curY = e.clientY + document.body.scrollTop;
this._grabPoint = curY - findOffsetTop(this._yHandle);
this._addEvent(document, "mousemove", this._scrollbarDrag, false);
};
this._scroll = function (x, y) {
if (y > this._trackHeight - this._handleHeight)
y = this._trackHeight - this._handleHeight;
if (y < 0) y = 0;

this._yHandle.style.top = y +"px";
this._y = y;

this._moveContent();
};
this._moveContent = function () {
this._src.scrollTo(0, Math.round(this._y * this._ratio));
};

this.scrollBy = function (x, y) {
this._scroll(0, (-this._src._y + y)/this._ratio);
};
this.scrollTo = function (x, y) {
this._scroll(0, y/this._ratio);
};
this.swapContent = function (o, w, h) {
this._removeEvent(this._src.content, "mousewheel", this._scrollbarWheel, false);
this._src.swapContent(o, w, h);
this.reset();
};

this.reset();
};

tacker · Moderator

Bitte [code]-Tags verwenden.

rob · **Verfasst** Di 03.04.2007 21:22 **Titel**

Das kannst du nicht so einfach umstellen, indem du nur eine Zeile abänderst.
Zum einen mußt du die Styles ändern, damit der Scrollbalken nicht mehr rechts dran hängt, sondern unten drunter.
Dafür mußt du die Klassen .Scrollbar-Track und .Scrollbar-Handle umschreiben und den Balken neu positionieren.

Und dann kommt das Script dran. Da muß einiges geändert werden. Glücklicherweise sind recht sinnvolle Parameter/Variablennamen vergeben worden.
x und y stehen für Koordinatenangaben, wie im Koordinatensystem aus dem Mathemathikunterricht.
Und w und h stehen für width und height.
Vielleicht könntest du das Script in einem Javascript-Debugger laufen lassen, dann kannst du dir ansehen, welche Werte x und y haben und wie sie sich beim Scrollen verändern.
Mit einem Debugger kannst du das Script Zeile für Zeile ablaufen lassen und dabei festgelegte Variablen überwachen, so daß du immer siehst, welchen Wert diese gerade haben.
Das könnte dir beim Verstehen und Umschreiben sicherlich helfen.

EDIT: Für sowas solltest du allerdings einen anständigen Browser verwenden. Ich würde nicht auf die Idee kommen, das mit dem MSIE und dessen JS-Debugger zu machen...
Dafür würde ich Firefox und Venkman empfehlen.

schachbrett · **Verfasst** Mi 04.04.2007 09:08 **Titel**

Auf den ersten Blick wuerde ich vermuten, dass du die Scrollrichtung in der Funktion moveContent vertauschen kannst.

Noviomagus · Threadersteller

Zuerst mal Danke für die Postings,
leider hat das zweite nicht funktioniert.

Ich geb zu JavaScript ist nicht mein Steckenpferd. Vielleicht hat jemand von euch die Zeit mir die Änderungen rein zu machen... ??? Kennt jemand von euch eine gute Seite wo man JS lernen kann ?

schachbrett · **Verfasst** Mi 04.04.2007 12:13 **Titel**

Um ein Bier, dass du den Inhalt gar nicht verbreitert hast! * Wo bin ich? *

http://de.selfhtml.org/javascript/index.htm lesen und dann viel rumprobieren.

Warum nimmst du eigentlich kein <div style="overflow: scroll;"></div> und gut ist???

Noviomagus · Threadersteller

genau das was ich brauch... wenn man jetzt noch die Scrollbar austauschen könnte...

*zwinker*

ja ich weiss .. kein JS können und Ansprüche stellen *G*

Willkommen auf dem Portal für Mediengestalter

Thema: Java Script... Wer kann mir helfen ? vom 03.04.2007

Java Script... Wer kann mir helfen ?

Danke!

DAs mit dem Overflow iss schon mal super...