nicht angemeldet
Hallo Alle,
ich habe ein kleines Problem mit einem Javascript wo mir selber langsam die Ideen ausgehen und hoffe Ihr könnt mir weiterhelfen :-/
Also erstmal zum Script selbst:
Das Script soll eine Div-Box scrollen über einen link scrollen lassen. Es funktioniert auch in meinem Beispielcode... Wenn ich diesen nun auf die Produktivseite übernehme, kann ich die Box nicht mehr scrollen.
Das Produktivsystem läuft in einem ModX-Revolution CMS...
Das Script:
###########################################
// JavaScript Document
<!--
function verifyCompatibleBrowser(){
this.ver=navigator.appVersion
this.dom=document.getElementById?1:0
this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom)?1:0;
this.ie4=(document.all && !this.dom)?1:0;
this.ns5=(this.dom && parseInt(this.ver) >= 5) ?1:0;
this.ns4=(document.layers && !this.dom)?1:0;
this.bw=(this.ie5 || this.ie4 || this.ns4 || this.ns5)
return this
}
bw = new verifyCompatibleBrowser()
var speed=50
var loop, timer
function ConstructObject(obj,nest){
nest=(!nest) ? '':'document.'+nest+'.'
this.el=bw.dom?document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+'document.'+obj):0;
this.css=bw.dom?document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?eval(nest+'document.'+obj):0;
this.scrollHeight=bw.ns4?this.css.document.height:this.el.offsetHeight
this.clipHeight=bw.ns4?this.css.clip.height:this.el.offsetHeight
this.up=MoveAreaUp;
this.down=MoveAreaDown;
this.MoveArea=MoveArea; this.x; this.y;
this.obj = obj + "Object"
eval(this.obj + "=this")
return this
}
function MoveArea(x,y){
this.x=x;this.y=y
this.css.left=this.x
this.css.top=this.y
}
function MoveAreaDown(move){
if(this.y>-this.scrollHeight+objContainer.clipHeight){
this.MoveArea(0,this.y-move)
if(loop) setTimeout(this.obj+".down("+move+")",speed)
}
}
function MoveAreaUp(move){
if(this.y<0){
this.MoveArea(0,this.y-move)
if(loop) setTimeout(this.obj+".up("+move+")",speed)
}
}
function PerformScroll(speed){
if(initialised){
loop=true;
if(speed>0) objScroller.down(speed)
else objScroller.up(speed)
}
}
function CeaseScroll(){
loop=false
if(timer) clearTimeout(timer)
}
var initialised;
function InitialiseScrollableArea(){
objContainer=new ConstructObject('divContainer')
objScroller=new ConstructObject('divContent','divContainer')
objScroller.MoveArea(0,0)
objContainer.css.visibility='visible'
initialised=true;
}
//-->
###########################################
Die Beispieldatei in html:
###########################################
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="scroll.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body onload="InitialiseScrollableArea()">
<div id="divContainer">
<div id="divContent">
<a name="start"></a>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et
justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
est Lorem ipsum dolor sit amet. </p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan
et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis
dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat. </p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor
in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat
nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<a name="ende"></a></div>
</div>
<div class="buttons">
<a href="#ende" class="style1" onmouseover="PerformScroll(2); return document.MM_returnValue" onmouseout="CeaseScroll()" >DOWN</a>
<a href="#start" class="style1" onmouseover="PerformScroll(-3); return document.MM_returnValue" onmouseout="CeaseScroll()">UP</a>
</div>
</body>
</html>
###########################################
Die Css-Datei der Beispieldatei:
###########################################
#divContainer {
width: 300px;
min-height: 100px;
max-height: 200px;
overflow: hidden;
border: 1px solid;
}
#divContent {
position: relative;
max-height: 600px;
}
###########################################
Template und CSS datei des Contentsystems findet man unter: www.heolo.de
Ich Bitte zu verzeiehen dass ich das nicht komplett aufliste... aber ihr würdet euch erschlagen fühlen...
Jedenfalls... wird der Top-Wert vom #divContent nicht geändert auf der Produktivseite und ich weiß leider nicht warum und hoffe ihr könnt mir helfen =/
Gunnar Bittersmann