Zum Inhalt springen

Java Script - Div Scoller im TypoScript ?

Erstellt am 10. April 2003 · Noch keine Antworten

Tags: Frage

fbreuner ·

ich habe einen div scroller der in einer externen js datei ausgelagert ist, der beim besten willen nicht gehen will in meinem template.

andere ausgelagerte js dateien gehen aber, also kann es nicht daran liegen. kann mir jemand sagen wie und wo dieser div scroller implementiert werden muss ?

hier ein beispiel von dem scroller: http://www.skphoto-digital.de

und hier der java script dazu:

__________________.js datei______________________________

var isDOM = (document.getElementById ? true : false);
var isIE4 = ((document.all && !isDOM) ? true : false);
var isNS4 = (document.layers ? true : false);
var isDyn = (isDOM || isIE4 || isNS4);

function getRef(id) {
if (isDOM) return document.getElementById(id);
if (isIE4) return document.all[id];
if (isNS4) return document.layers[id];
}

function getSty(id) {
return (isNS4 ? getRef(id) : getRef(id).style);
}

function scrLoad(name) { with (this) {
if (!name) return;
var path = location.href.substring(0, location.href.lastIndexOf('/') + 1);
if (isDOM || isIE4) {
oldLoc = bufRef.location.href;
if ((name.substring(0, 5) != 'http:') && (name.substring(0, 5) != 'file:'))
name = path + name;
if (isDOM && !document.all) setTimeout(myName + '.bufRef.document.readyState="complete"', 5000);
if (oldLoc != name) {
bufRef.location.href = name;
checkBuffer(oldLoc);
}
else checkBuffer('dummyLocation');
}
else {
divRef.onload = new Function(myName + '.fileLoaded()');
divRef.load(name, cWidth);
}
}}

function scrCheckBuffer(oldLoc) {
with (this) {
if ((bufRef.location.href == oldLoc) || (bufRef.document.readyState != 'complete'))
setTimeout(myName + '.checkBuffer('' + oldLoc + '')', 50);
else {
divRef.innerHTML = bufRef.document.body.innerHTML;
bufRef.location.href = 'about:blank';
setTimeout(myName + '.fileLoaded()', 1);
}
}}
function scrFileLoaded() {
with (this) {
activeScr = null;
scrollBy(-100000);
loadSty.visibility = 'hidden';
for (count = 0; count < divs.length; count++)
getSty(divs[count][0]).visibility = 'visible';
}}
function scrScrollBy(amount) { with (this) {
if (!isDyn || !loaded) return;
amount = parseInt(amount);
divHeight = document.all ? divRef.clientHeight :
(isDOM ? divRef.offsetHeight : divRef.document.height);
if (divHeight == 0) divHeight = 1;
if ((cBot + amount) > divHeight) amount = divHeight - cBot;
if ((cTop + amount) < 0) amount = 0 - cTop;
cTop += amount;
cBot += amount;
if (isDOM || isIE4)
divSty.clip = 'rect(' + cTop + 'px ' + cWidth + 'px ' + cBot + 'px ' + 0 + 'px)';
else if (isNS4) {
if (isNaN(cTop) || isNaN(cBot) || isNaN(amount)) layout();
if (cBot < divSty.clip.top) divSty.clip.top = cTop;
divSty.clip.bottom = cBot;
divSty.clip.top = cTop;
}
divSty.top = eval(divs[0][2]) - cTop;
thmHeight = Math.ceil(barHeight * ((cBot - cTop) / divHeight));
if (thmHeight < minThmHeight) thmHeight = minThmHeight;
if (thmHeight > barHeight) thmHeight = barHeight;
if (isDOM || isIE4) thmSty.height = thmHeight;
else if (isNS4) thmSty.clip.height = thmHeight;
if (activeScr) return;
fracDivDown = (cTop / (divHeight - (cBot - cTop)));
thmSty.top = parseInt(barSty.top) + fracDivDown * (barHeight - thmHeight);
if (loop) setTimeout(myName + '.scrollBy(' + amount + ')', loop);
}}
function scrThumbDown(evt) {
activeScr = this;
if (document.all) scrOffset = event.offsetY;
else scrOffset = evt.layerY;
return false;
}
function scrThumbMove(evt) {
if (isNS4) document.routeEvent(evt);

if (!activeScr) return true;
else { with (activeScr) {
if (isNaN(cTop) || isNaN(cBot)) divLayout();
if ((cBot > divHeight) || (thmHeight == barHeight)) return;
if (document.all) newTop = document.body.scrollTop + event.clientY - scrOffset;
else newTop = evt.pageY - scrOffset;
var barTop = parseInt(barSty.top);
if (newTop < barTop) newTop = barTop;
if (newTop + thmHeight > (barTop + barHeight))
newTop = (barTop + barHeight) - thmHeight;
thmSty.top = newTop;
fracDivDown = cTop / (divHeight - (cBot - cTop));
fracBarDown = (newTop - barTop) / (barHeight - thmHeight);
scrollBy((fracBarDown - fracDivDown) * (divHeight - (cBot - cTop)));
return false;
}}
}
function scrThumbUp(evt) {
if (isNS4) document.routeEvent(evt);
activeScr = null;
}
function scrBarClick(evt) {
with (this) {
if (isNS4) document.routeEvent(evt);
if (document.all) clickPos = document.body.scrollTop + event.clientY;
else clickPos = evt.pageY;
if (clickPos < parseInt(thmSty.top)) scrollBy(cTop - cBot);
if (clickPos > (parseInt(thmSty.top) + thmHeight)) scrollBy(cBot - cTop);
}}
function scrLayout() {
with (this) {
if (!isDyn) return;
winWidth = document.all ? document.body.clientWidth : window.innerWidth;
winHeight = document.all ? document.body.clientHeight : window.innerHeight;
if (isNS4 && (scrFirstWidth != winWidth)) {
fileName = location.href;
if (fileName.indexOf('?') != -1) fileName = fileName.substring(0, fileName.indexOf('?'));
location.href = fileName + '?loadFile=' + divRef.src;
}
if (!loaded) return;
if (winWidth < minWinWidth) winWidth = minWinWidth;
if (winHeight < minWinHeight) winHeight = minWinHeight;
for (count = 0; count < divs.length; count++) {
var tmpObj = getSty(divs[count][0]);
if (divs[count][1]) tmpObj.left = eval(divs[count][1]);
if (divs[count][2]) tmpObj.top = eval(divs[count][2]);
if (divs[count][3]) {
var tmpW = eval(divs[count][3]);
isNS4 ? tmpObj.clip.width = tmpW : tmpObj.width = tmpW;
}
if (divs[count][4] && count != 0) {
var tmpH = eval(divs[count][4]);
isNS4 ? tmpObj.clip.height = tmpH : tmpObj.height = tmpH;
}
}

if ((isDOM || isIE4) && !cTop) cTop = 0;
if (isNS4) cTop = divSty.clip.top;
barHeight = eval(divs[1][4]);
cBot = cTop + eval(divs[0][4]);
cWidth = eval(divs[0][3]);
if (isDOM || isIE4) divSty.width = cWidth;
scrollBy(0);
}}
function scrSetup(defaultFile) {
with (this) {
if (!isDyn) return;
divRef = getRef(divs[0][0]);
divSty = getSty(divs[0][0]);
barSty = getSty(divs[1][0]);
thmSty = getSty(divs[2][0]);
loadSty = getSty(loadSty);
bufRef = eval('window.' + bufRef);
barRef = getRef(divs[1][0]);
thmRef = getRef(divs[2][0]);
if (isNS4) {
barRef.captureEvents(Event.CLICK);
thmRef.captureEvents(Event.MOUSEDOWN);
document.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
}
barRef.onclick = new Function('evt', 'return ' + myName + '.barClick(evt)');
thmRef.onmousedown = new Function('evt', 'return ' + myName + '.thumbDown(evt)');
document.onmousemove = scrThumbMove;
document.onmouseup = scrThumbUp;
if (document.all) document.onselectstart = new Function('if (activeScr) return false');
else if (isDOM) document.onselect = new Function('if (activeScr) return false');
loaded = true;
layout();
fileName = '';
if (location.href.indexOf('?') != -1)
fileName = location.href.substring(location.href.lastIndexOf('=') + 1);
if (fileName.indexOf('.htm') != -1) load(fileName)
else if (defaultFile) load(defaultFile);
else fileLoaded();
}}
function DHTMLScroller(myName, bufferID, loadMess) {

this.divRef = null;
this.divSty = null;
this.barSty = null;
this.thmSty = null;
this.divs = new Array();
this.loadSty = loadMess;
this.bufRef = bufferID;
this.myName = myName;
this.loaded = false;
this.loop = 0;
this.minThmHeight = 20;
this.divHeight = 0;
this.barHeight = 0;
this.thmHeight = 0;
this.cTop = 0;
this.cBot = 0;
this.cWidth = 0;
this.load = scrLoad;
this.checkBuffer = scrCheckBuffer;
this.fileLoaded = scrFileLoaded;
this.scrollBy = scrScrollBy;
this.thumbDown = scrThumbDown;
this.barClick = scrBarClick;
this.setup = scrSetup;
this.layout = scrLayout;
}
var activeScr = null, scrOffset = 0, winWidth, winHeight, scrFirstWidth = window.innerWidth;
var mainDiv;
var minWinWidth = 250, minWinHeight = 300;
mainDiv = new DHTMLScroller('mainDiv', 'bufferFrame', 'loadMess');

with (mainDiv) {
divs[0] = new Array('mainContentDiv', '260', '100', '420', '325');
divs[1] = new Array('scrollBar', '736', '116', '', '276');
divs[2] = new Array('scrollThumb', '731', '', '8', '');
divs[3] = new Array('upArrows', '727', '71', '', '');
divs[4] = new Array('downArrows', '727', '401', '', '');
}

_____________im quellcode der seite______________________

<!-- Scroller -->
<div id="upArrows" class="absDiv">
<a href="javascript:mainDiv.scrollBy(-100000)" title="" onFocus="if(this.blur)this.blur()">
<img src="img/shim.gif" width="17" height="17" border="0"></a><br>
<a href="javascript:void(0)" onMouseDown="mainDiv.loop=50; mainDiv.scrollBy(-10); return false" onMouseUp="mainDiv.loop=0" onMouseOut="mainDiv.loop=0" title="" onFocus="if(this.blur)this.blur()">
<img src="img/shim.gif" width="17" height="18" border="0"></a></div>
<div id="scrollBar" class="absDiv" style="background: #fffff; layer-background-color: #fffff; cursor: hand"></div>
<div id="scrollThumb" class="absDiv" style="background: #bebebe; layer-background-color: #bebebe; cursor: hand" ondragstart="return false"></div>
<div id="downArrows" class="absDiv">
<a href="javascript:void(0)" onMouseDown="mainDiv.loop=50; mainDiv.scrollBy(10); return false" onMouseUp="mainDiv.loop=0" onMouseOut="mainDiv.loop=0" title="" onFocus="if(this.blur)this.blur()">
<img src="img/shim.gif" width="17" height="17" border="0"></a><br><a href="javascript:mainDiv.scrollBy(100000)" title="" onFocus="if(this.blur)this.blur()">
<img src="img/shim.gif" width="17" height="18" border="0"></a></div>
<script language="JavaScript" type="text/javascript">
mainDiv.setup('');
</script>
</body>
</html>
__________________________________________________________

Vielen Dank schonmal :-)