scrollfunktion in Javascript ohne Funktion
mana
- javascript
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 =/
Hallo,
Das Script:
wo immer Du es ausgegraben hast, sei bitte so lieb und schicke es dorthin zurück, wo ...
function verifyCompatibleBrowser(){
this.ver=navigator.appVersion
this.dom=document.getElementById?1:0
... sich die hier angeführten Browser seit langem befinden:
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
}
Im Grab. [1]
Freundliche Grüße
Vinzenz
[1] Mit Ausnahme von Netscape 5 - der fiel einer Abtreibung zum Opfer :-)
Das lustige ist, dass es so trotzdem im Firefox 10.0.2 und im Chrome 17.0.963.78 m funktioniert :-/
Bin aber auch gerne offen für Alternativen :-)
Das lustige ist, dass es so trotzdem im Firefox 10.0.2 und im Chrome 17.0.963.78 m funktioniert :-/
bei mir nicht! Firefox gibt Fehlermeldungen aus, die mich vermuten lassen, er sieht sich als die Wiedergeburt eines der totgesagten Browser.
Bin aber auch gerne offen für Alternativen :-)
wozu? Bislang ist mir unklar wozu du die Scrollfunktionalität nutzt und brauchst.
Unabhängig davon: du bindest jquery doch sowieso ein, da ist sicherlich etwas ähnliches schon dabei
Das Script soll einen Text der zu lang für die darüber liegende Box ist scrollen ohne einen scrollbalken anzuzeigen. Ich Versuch mal mein Glück mit dem jquery und hoffe dass des klappt. Danke für die Hilfe :)
@@mana:
nuqneH
<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>
Nutzer möchten zum Scrollen nicht über irgendwelche Buttons zeigen oder clicken, sondern auf die Art scrollen, die sie gewohnt sind, also bspw. per Mausrad.
Und bedenke, dass viele Nutzer gar keine Maus haben.
Es ist sinnlos, den normalen Scrollmechanismus durch irgndwelches JavaScript ersetzen zu wollen. Das kann eigentlich nur schiefgehen.
Qapla'
Moin Moin!
Es ist sinnlos, den normalen Scrollmechanismus durch irgndwelches JavaScript ersetzen zu wollen. Das kann eigentlich nur schiefgehen.
Streiche das "eigentlich".
Alexander
Moin!
Es ist sinnlos, den normalen Scrollmechanismus durch irgndwelches JavaScript ersetzen zu wollen. Das kann eigentlich nur schiefgehen.
Streiche das "eigentlich".
Ich habe hier was Vernünftiges entdeckt. Da kann man einen zusätzlichen Scrollbalken mit der Maus anfassen und in die richtige Richtung schieben.
Ich finde den "normalen" Scrollmechanismus seltsam, weil man einerseits in die falsche Richtung schieben muss (also nach unten, wenn die Seite nach oben bewegt werden soll) und zweitens hat man auch für eine lange Seite den Scrollbalken nur in Fensterhöhe.
Bei iPhone & Co. finde ich es praktisch, die Seite dahin mit dem Finger zu schieben, wohin sie soll.
Gruß, Mittwoch
@@Mittwoch:
nuqneH
Ich habe hier was Vernünftiges entdeckt.
So sehr ich auch suche, ich kann dort nichts Vernünftiges entdecken.
Da kann man einen zusätzlichen Scrollbalken mit der Maus anfassen und in die richtige Richtung schieben.
Das normale Scrollen mit zwei Fingern auf dem Touchpad (MacBook) funktioniert nicht. Fail.
Und auch sonst erschließt sich die Funktion dieses zusätzlichen Scrollbalkens nicht intuitiv. Den normalen Scrollbalken kennt jeder und kann ihn mühelos benutzen.
Qapla'
PS: Die Unvernunft setzt sich im Sprachauswahlmenü fort: Flaggen, die dort nichts zu suchen haben; nach Click auf „mehr“ sind einige Sprachen doppelt im Menü, wobei wohl die unteren Links zu fertigen Seiten in der jeweiligen Sprache führen, die oberen zu automatischer Übersetzung. Und „česky“ und „English“ sind falsch geschrieben.