Scroll-leiste von Julian Finn, 13.06.2001 14:15

Scroll-leiste

Julian Finn 13.06.2001 14:15

javascript

Hallo,

ich bin auf der Suche nach einem Javascript, das mir die vertikale Scroll-Leiste ersetzt.
Grund: einerseits soll das scrollen nicht auf Mausklick sondern auf onmouseover starten und flüssig laufen, andererseits soll diese Scroll-Leiste in einem festlegbaren Rahmen frei positionierbar sein und so nur einzelne Elemente einer Seite, etwa einen Text, scrollen können.
Weiß jemand einen link zu solch einem Skript? Sonstige Tipps?

Dankeschön im Voraus,

Julian

Beitrag melden

– Informationen zu den Bewertungsregeln

Scroll-leiste
oliver 13.06.2001 14:37

javascript
– Informationen zu den Bewertungsregeln
Das fand ich sehr gut, besser jedenfalls als mein eigenes, weil es gut Dokumentiert und vielseitig einsetzbar ist. Viel Spass damit :o) Oliver

<html>
<head>
<title>DHTMLCentral.com - Free Dynamic HTML Scripts - ScrollText Demo</title>
<meta name="Author" content="Thomas Brattli (webmaster@dhtmlcentral.com)">
<META NAME="Generator" CONTENT="Designer:Thomas Brattli (www.bratta.com)">
<meta name="KeyWords" content="DHTML, HTML, Dynamic HTML, Javascript, Cascading Style Sheets, Cross-browser, Cross browser, Javascripts, DOM, Scripts, Free Scriptsscrolltext,text,scroll,move,slide,mouseover,effect,">
<meta name="Description" content="Dynamic HTML Central - The ultimate place to find DHTML scripts, demos, tutorials and help.">
<style type="text/css">
#divUp{position:absolute; left:170; top:190}
#divDown{position:absolute; left:170; top:380}
#divCont{position:absolute; width:300; height:150; overflow:hidden; top:220; left:170; clip:rect(0,300,150,0); visibility:hidden; border:groove black 2px}
#divText{position:absolute; top:0; left:0}
</style>
<script language="JavaScript" type="text/javascript">
/********************************************************************************
Copyright (C) 2001 DHTMLCentral.com
This script is made by Thomas Brattli and copyrighted to DHTMLCentral.com
Visit for more great scripts. This may be used freely as long as this msg is intact!
We will also appreciate any links you could give us.

ScrollText
********************************************************************************/
function lib_bwcheck(){ //Browsercheck (needed)
this.ver=navigator.appVersion
this.agent=navigator.userAgent
this.dom=document.getElementById?1:0
this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom)?1:0;
this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom)?1:0;
this.ie4=(document.all && !this.dom)?1:0;
this.ie=this.ie4||this.ie5||this.ie6
this.mac=this.agent.indexOf("Mac")>-1
this.opera5=this.agent.indexOf("Opera 5")>-1
this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0;
this.ns4=(document.layers && !this.dom)?1:0;
this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5 || this.dom)
return this
}
var bw=new lib_bwcheck()

/*****************

You set the width and height of the divs inside the style tag, you only have to
change the divCont, Remeber to set the clip the same as the width and height.
You can remove the divUp and divDown layers if you want.
This script should also work if you make the divCont position:relative.
Then you should be able to place this inside a table or something. Just remember
that Netscape crash very easily with relative positioned divs and tables.

Updated with a fix for error if moving over layer before pageload.

****************/

//If you want it to move faster you can set this lower:
var speed=50

//Sets variables to keep track of what's happening
var loop, timer

//Object constructor
function makeObj(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=goUp;this.down=goDown;
this.moveIt=moveIt; this.x; this.y;
    this.obj = obj + "Object"
    eval(this.obj + "=this")
    return this
}
function moveIt(x,y){
this.x=x;this.y=y
this.css.left=this.x
this.css.top=this.y
}

//Makes the object go up
function goDown(move){
if(this.y>-this.scrollHeight+oCont.clipHeight){
this.moveIt(0,this.y-move)
   if(loop) setTimeout(this.obj+".down("+move+")",speed)
}
}
//Makes the object go down
function goUp(move){
if(this.y<0){
this.moveIt(0,this.y-move)
if(loop) setTimeout(this.obj+".up("+move+")",speed)
}
}

//Calls the scrolling functions. Also checks whether the page is loaded or not.
function scroll(speed){
if(loaded){
loop=true;
if(speed>0) oScroll.down(speed)
else oScroll.up(speed)
}
}

//Stops the scrolling (called on mouseout)
function noScroll(){
loop=false
if(timer) clearTimeout(timer)
}
//Makes the object
var loaded;
function scrollInit(){
oCont=new makeObj('divCont')
oScroll=new makeObj('divText','divCont')
oScroll.moveIt(0,0)
oCont.css.visibility='visible'
loaded=true;
}
//Call the init on page load
onload=scrollInit;
</script>
</head>

<body marginleft="0" marginheight="0">

<div style="position:absolute; left:0; top:0"><a href="#" onclick="self.close(); return false"><img src="/images/logo.gif" width="165" height="54" alt="" border="0" alt="Click to close window"></a></div>
<br><br><br>


<div id="divUp">
<a href="#" onmouseover="scroll(-2)" onmouseout="noScroll()">[slow]</a>
<a href="#" onmouseover="scroll(-7)" onmouseout="noScroll()">[medium]</a>
<a href="#" onmouseover="scroll(-10)" onmouseout="noScroll()">[fast]</a>
</div>

<div id="divDown">
<a href="#" onmouseover="scroll(2)" onmouseout="noScroll()">[slow]</a>
<a href="#" onmouseover="scroll(7)" onmouseout="noScroll()">[medium]</a>
<a href="#" onmouseover="scroll(10)" onmouseout="noScroll()">[fast]</a>
</div>

<div id="divCont">
<div id="divText">
<p>News: <br>
www.bratta.com/dhtml - Have you ever experienced DHTML is now updated
with more script, demos and how to's then ever. Visit now!
Also added: The DHTML Scriptomania, a new and better interface
to browser the scripts, demos and how to's.</p>
<p>
test text test text test text test text test text test text<br><br>
test text test text test text test text test text test text<br>
test text test text test text test text test text test text<br>
test text test text test text test text test text test text<br>
test text test text test text test text test text test text<br></p>
<p>
test text test text test text test text test text test text<br>
test text test text test text test text test text test text<br>
test text test text test text test text test text test text<br><br>
test text test text test text test text test text test text<br>
test text test text test text test text test text test text - END</p>
</div>
</div>

</body>
</html>
Beitrag melden

–
Informationen zu den Bewertungsregeln

SELFHTML Forum - Ergänzung zur Dokumentation Übersicht

Julian Finn: Scroll-leiste

Scroll-leiste

Scroll-leiste

Scroll-leiste