//Objekt zur Erzeugung eines Scrollbalkens mit allen Funktionalitäten
//Benötigt werden:
//- ein Textfelfd in der HTML-Datei mit fester Breite und Höhe
function scrollbalken(){
// Definition der Konstanten
// 1. Das Div
var textfeld = 'seiteninhalt'; //Div-Name
var tBreite = 620; //Div-Breite
var thoehe = 340; //Div-Höhe
var tRand = 15; //Div-Rand nach Oben (zum Elternelement
var pixel = 5; //Menge, um die der Div je Durchlauf scrollt
var time = 6; //Zeitinterval, in dem die Scrollfunktion abläuft
// 2. Der Scrollbalken
var scrollbalkenname = 'balken'; //Scrollbalkenname
var sHoehe = 300; //Höhe des scrollbaren Bereichs
var sX = 25;
// interne Variablen
// 1. Textfeld
var lyrheight; //Die gesamte Textfeldhöhe
var hheight; //die restilche Höhe des Textfeldes abzüglich des sichtbaren Bereich
var h; //die restilche Höhe des Textfeldes abzüglich des sichtbaren Bereich
var cliptop = 0; //Obere Kante des Sichtbaren Bereichs
var clipBottom = thoehe; //untere Kante des sichtbaren Bereichs
// 2. Scrolleigenschaften Div
var oben = tRand; //Position des Div am Anfang
// 3. Scrollbalken
var scrollmenge; //Pixel, die der Scrollbalken insgesamt scrollen kann
var balkenhoehe; //Höhe des Scrollbalkens
var scrollInt; //Menge, um die der Scrollbalken bei jedem Umlauf scrollt
// 3. allgemeine Variablen
var self = this;
var mach,i,y,mausAnfang,altjetzt=25;
var k;
var sb;
// Ausgabe des Scrollbalken
this.scrollleiste = function(){
document.write('');
}
// Einrichten des Objekt und bei Bedarf Ausgabe des Scrollbalken
this.init = function(){
k = new getObj(textfeld);
sb = new getObj(scrollbalkenname);
if(window.getComputedStyle){
balkenY = parseInt(window.getComputedStyle(sb.obj,null).top.slice(0,-2));
}else if(sb.obj.currentStyle){
balkenY = parseInt(sb.obj.currentStyle.top.slice(0,-2));
}
Clip();
scrollbalkenhoehe();
vis();
}
Clip = function(){
if (document.layers){
lyrheight = k.style.clip.bottom;
h = lyrheight-clipBottom;
lyrheight += 2;
k.style.clip.top = cliptop;
k.style.clip.left = 0;
k.style.clip.right = tBreite;
k.style.clip.bottom = clipBottom;
}
else if (document.getElementById || document.all){
lyrheight = k.obj.offsetHeight;
hheight = lyrheight - thoehe;
h = lyrheight-clipBottom;
lyrheight += 2;
k.style.clip = 'rect('+cliptop+'px '+tBreite+'px '+clipBottom+'px 0px)';
}
if(cliptop < 5 || clipBottom > lyrheight) clearInterval(mach);
}
this.scrolldiv = function(m){
if((m<0 && cliptop >= 5) || (m>0 && clipBottom < (lyrheight-5))){
cliptop += pixel*m;
clipBottom += pixel*m;
oben -= pixel*m;
Clip();
pfeil_scrollt_balken(m);
k.style.top = oben+"px";
}
}
this.scrollen = function(m){ mach = window.setInterval(function(){ self.scrolldiv(m) }, time); }
this.stopscrollen = function(){ clearInterval(mach); }
vis = function(){ if(lyrheight<=clipBottom) document.getElementById('scrollleiste').style.display="none"; }
//Höhe des Scrollbalkens
scrollbalkenhoehe = function(){
var proz = (thoehe*100)/lyrheight;
balkenhoehe = (sHoehe/100)*proz;
scrollmenge = sHoehe-balkenhoehe;
scrollInt = scrollmenge/hheight;
sb.style.height = Math.floor(balkenhoehe)+'px';
}
//Scrollbalken bewegt sich mit bei Pfeildruck
pfeil_scrollt_balken = function(m){
i = scrollInt*pixel*m;
balkenY += i;
j = Math.ceil(balkenY);
sb.style.top = j+'px';
}
this.balkenbewegen = function(event){
if(window.getComputedStyle) balkenanfang = parseInt(window.getComputedStyle(sb.obj,null).top.slice(0,-2));
else if(sb.obj.currentStyle) balkenanfang = parseInt(sb.obj.currentStyle.top.slice(0,-2));
if(sb.obj.addEventListener){
sb.obj.addEventListener("mousemove", moveHandler, true);
sb.obj.addEventListener("mouseup", upHandler, true);
mausAnfang = event.clientY;
}
else if(sb.obj.attachEvent){
sb.obj.attachEvent("onmousemove", moveHandler);
sb.obj.attachEvent("onmouseup", upHandler);
mausAnfang = event.clientY;
}
if(event.stopPropagation) event.stopPropagation();
else event.cancelBubble = true;
if(event.preventDefault) event.preventDefault();
else event.returnValue = false;
function moveHandler(event){
balkenBewegtSich(event);
if(event.stopPropagation) event.stopPropagation();
else event.cancelBubble = true;
}
function upHandler(event){
if(sb.obj.removeEventListener){
sb.obj.removeEventListener("mouseup", upHandler, true);
sb.obj.removeEventListener("mousemove", moveHandler, true);
}
else if(sb.obj.detachEvent){
sb.obj.detachEvent("onmouseup", upHandler);
sb.obj.detachEvent("onmousemove", moveHandler);
}
if(event.stopPropagation) event.stopPropagation();
else event.cancelBubble = true;
}
function balkenBewegtSich(event){
var mDif = event.clientY - mausAnfang;
var jetzt = balkenanfang + mDif;
if(jetzt >= sX && jetzt <= (scrollmenge+sX)){
altjetzt= 5) || (p>0 && clipBottom < (lyrheight-5))){
cliptop += scrollwert;
clipBottom += scrollwert;
oben -= scrollwert;
Clip();
k.style.top = oben+"px";
}
}
}
//Ausgabe von Variablen in Testtefd auf der Seite
ausgabe = function(a){
document.ftest.test1.value = a+'>='+1/scrollInt;
document.ftest.test2.value = a+'<='+(scrollmenge+sX);
}
}
// verkürzt die Ansprache des Elements auf "obj"
function getObj(namen){
if (document.getElementById){
this.obj = document.getElementById(namen);
this.style = document.getElementById(namen).style;
}
else if (document.all){
this.obj = document.all[namen];
this.style = document.all[namen].style;
}
else if (document.layers){
this.obj = document.layers[namen];
this.style = document.layers[namen];
}
}
