[JavaScript] onMouseOver - Scrollleiste

pho3niX

Lt. Commander
Registriert
Juli 2003
Beiträge
1.750
Hi zusammen!

Ich brauch dringend JavaScript-Code für eine Scrollbar.
Soll so aussehen, dass es 2 Bilder ( = Pfeile nach oben und untern ) gibt und sich der Text innerhalb eines bestimmten div-Elements dann entweder nach oben oder nach unten bewegt.
Sobald die Mouse (Maus is'n blödes Wort ;)) dann aber wieder runter vom Button ist, soll auch das Scrollen wieder aufhören.

Ich bedanke mich schon mal im Vorraus :D
 
Kannst du das vielleicht nochmals überdenken? Denn ich finde das ist das grauenhafteste was man mit Javascript überhaupt machen kann. So einen Text runterzuscrollen ist einfach nur fustrierend.
 
Ich mags ja auch nicht, aber der Kunde will das so...
 
Hier ein kleines Script für dich, anpassen musst du dann selber ;)


JavaScript:
PHP:
<script language="JavaScript">
<!--
function BlurLinks()
{
lnks=document.getElementsByTagName('a');
for(i=0;i<lnks.length;i++){
lnks[i].onfocus=new Function("if(this.blur)this.blur()");
}
}

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=20 
 
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; 
} 
//-->
</script>

STYLESHEET:
PHP:
#divUpControl{
	position:absolute; width:220; left:5; top:20; z-index:1; text-align:left} 
#divDownControl{
	position:absolute; width:220; left:5; top:230; z-index:1; text-align:left} 
#divContainer{
	position:absolute; width:220; height:190; overflow:hidden; top:40; left:5; clip:rect(0,320,220,0); visibility:hidden} 
#divContent{
	position:absolute; top:0; left:5}


restliche Code:
PHP:
...
<body onLoad="InitialiseScrollableArea(); BlurLinks();">

<div id="divUpControl"><a
href="#" onMouseOver="PerformScroll(-7)" onMouseOut="CeaseScroll()">aufwärts</a></div><div
id="divDownControl"><a
href="#" onMouseOver="PerformScroll(7)" onMouseOut="CeaseScroll()">abwärts</a></div><div
id="divContainer"><div id="divContent">und hier steht natürlich sehr viel
Text<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11
<br>12<br>13<br> </div></div>
...

mfg digiTALE
 
Wieso fast Perfekt, ist da noch ein Fehler aufgetreten !?
Hmm .. dürfte eigentlich nicht sein, hat ja bei mir auch funktioniert!
 
Problem ist, dass der Scroller im FF nicht läuft.

Wenn ich den DOCTYPE rausnehme, läufts zwar, aber dann hat die Textbox 'ne ganz andere Größe.

Hat da jemand eine Idee?
 
Hallo,

welchen Doctype verwendest du denn und wie sieht dein bisheriger Code aus?
Desweiteren solltest du einmal das "<script language="Javascript">" gegen "<script type="text/javascript">" ersetzen. Eventuell bereitet dies dem Firefox auch Probleme.

MfG mh1001
 
HTML:
<!DOCTYPE html
	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<link rel="stylesheet" type="text/css" href="css/format.css" />
	<title>...</title>
	<script language="javascript" type="text/javascript" src="script/javascript.js"></script>
</head>
<body onLoad="InitialiseScrollableArea(); BlurLinks();">
<div id="horizon">
<div id="wrapper">
	...
	<div id="content">
		...
		<div id="unternehmen">
			<div id="arrowUp">
				<a href="#" onMouseOver="PerformScroll(-7)" onMouseOut="CeaseScroll()"><img src="images/unternehmen/arrow-up.gif" alt="Scrollen" title="Scrollen" /></a>
			</div>
			<div id="arrowDown">
				<a href="#" onMouseOver="PerformScroll(7)" onMouseOut="CeaseScroll()"><img src="images/unternehmen/arrow-down.gif" alt="Scrollen" title="Scrollen" /></a>
			</div>
			<div id="divContainer">
				<div id="divContent">
				... Text ...
				</div>
			</div>
		</div>
	</div>
</div>
</div>
</body>
</html>
Den kompletten JS-Code hab ich einfach per Copy&Paste in der javascript.js ausgelagert.

Folgenden CSS-Code benutz ich (Auszug):
Code:
/* styles for IE 5 Mac */
#horizon {
	background-color:transparent;
	position:absolute;
	top:50px;
	left:50px;
}
/* following rules are invisible to MAC IE 5 \*/
#horizon {
	top:50%;
	left:0px;
	width:100%;
	margin-top:-299px;
	text-align:center;
	/* Wichtig für die Startlayoutzentrierung */
	min-width:848px;
}
/* end IE 5 hack */ 
#wrapper {
	background-color:#FFFFFF;
	position:relative;
	text-align:left;
	width:848px;
	height:598px;
	margin:0 auto;
	border:1px solid #C6C6C6;
	/* Wichtig für die Startlayoutzentrierung */
}
#content {
	position:relative;
	top:53px;
	width:848px;
	height:508px;
}
#unternehmen {
	height:368px;
	width:848px;
	background-image:url("../images/unternehmen/left.jpg");
	background-repeat:no-repeat;
	line-height:15px;
}
#divContainer {
	position:absolute;
	width:550px;
	height:280px;
	overflow:hidden;
	top:180px;
	left:200px;
	clip:rect(0,320,220,0);
	visibility:hidden;
}
#divContent {
	position:absolute;
}
#arrowUp {
	position:absolute;
	left:800px;
	top:170px;
	z-index:1;
}
#arrowDown {
	position:absolute;
	left:800px;
	top:470px;
	z-index:1;
}
 
Da hätten wir auch gleich schon das Problem. ;)
In XHTML werden alle Attribute immer klein geschrieben. Infolgedessen muss das "onMouseOver" auch zu einem "onmouseover" bzw. das "onMouseOut" zu einem "onmouseout" abgeändert werden. ;)

MfG mh1001
 
Ist abgeändert -> Veränderung = null ... :(

Hat sonst noch jemand irgendwelche Ideen?
 
was sagt die Firefox Javascript Konsole ?
 
Fehler: syntax error
Zeile 1


Hat also irgendwas mit dem DOCTYPE zu tun...
 
Ist ja erstmal eine schöne Idee, aber die Scrollbar soll halt per Mouseover funktionieren.

Wär nett, wenn sich jemand die Mühe machen würde, dazu ein JS zu schreiben ;)
Danke.
 
Zurück
Oben