absolutely positioned scrollable area
Orestis
- javascript
Hallo!
ich versuche eine Scrollable area zu realisieren.
David G. Miles (www.z3roadster.net/dreamweaver)
Mit
#divContainer{position:absolute; width:400; height:166; overflow:hidden; top:166; left:286; clip:rect(0,400,166,0); visibility:hidden;}
#divContent{position:absolute; top:0; left:0;}
im header
und
<div id="divContainer">
<div id="divContent">
bla - bla
</div>
</div>
im body
definiere ich einen Bereich.
so jetz kommt das Script:
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.scrollWidth=bw.ns4?this.css.document.height:this.el.offsetWidth
this.clipWidth=bw.ns4?this.css.clip.height:this.el.offsetWidth
this.left=MoveArealeft;this.right=MoveArearight;
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 MoveArearight(move) {
if(this.x>-this.scrollWidth+objContainer.clipWidth) {
this.MoveArea(this.x-move,0)
if(loop) setTimeout(this.obj+".right("+move+")",speed)
}
}
function MoveArealeft(move) {
if(this.x<0) {
this.MoveArea(this.x-move, 0)
if(loop) setTimeout(this.obj+".left("+move+")",speed)
}
}
function scrollAreaPerform(speed) {
if(scrollAreaInitialised) {
loop=true;
if(speed>0)
objScroller.right(speed)
else
objScroller.left(speed)
}
}
function scrollAreaCease() {
loop=false
if(timer) clearTimeout(timer)
}
var scrollAreaInitialised;
function scrollAreaInitialise() {
objContainer=new ConstructObject('divscrollAreaContainer')
objScroller=new ConstructObject('divscrollAreaContent','divscrollAreaContainer')
objScroller.MoveArea(0,0)
objContainer.css.visibility='visible'
scrollAreaInitialised=true;
}
Das funktioniert soweit auchh ganz gut!
Mein Prob!
wenn ich das auf Links/Rechts umgesetzt habe,
läuft es weder im Netscape noch im Mozilla!
nur der IE tut seine Pflicht!
Wer kann mir da bitte weiterhelfen!
ein Bug, ein nicht konformes JS-Teil, das nur IE macht?
Danke
Herrje, schon wieder so ein Brattli-Teil !
Bei http://www.dhtmlcentral.com ist glaub' ich ein Forum eingerichtet, das sich speziell mit Brattli Skripten und Problemlösungen befasst !?
Der Link zum Download-Script hätte übrigens genügt, zumal im Code, den du reingeschmissen hast, ausgerechnet die entscheidenden Zeilen fehlen ! :o)))
Mit ein bißchen herumexperimentieren wärst du vielleicht auch auf die Lösung gekommen !?
Hab mal kurz in die Basic-Demo reingekuckt :
#divUpControl {position:absolute;left:-250px;top:270px;width:320px;height:30px;z-index:2;text-align: right}
#divDownControl {position:absolute;left:10px;top:270px;width:320px;height:30px;z-index:1;text-align:right}
Warum Mozilla/Gecko nur z-index:2 akzeptieren mußt du den Meister selber fragen !
Würd' mich aber auch interessieren !! ;o))
Die Explorer ham halt den Vorteil, daß sie nicht so pingelig sind und eigentlich alles fressen !!
Tschau !!
Hi - Danke erst mal!!
Das wars aber nicht!
Ich hab das Teil auf Links/rechts umgebaut
UND DANN GEHTS IM NETSCAPE/Mozilla/Opera nicht!!
dhtml is tot und eie neue Seite vom Brattli spuckt (noch)
nichts aus!!
Trotzsdem Danke
Orestis
He, he !!
Mißverständnis ! Du hast den/das Skript umgeschrieben weil du in der Horizontalen scrollen willst, richtig !?
Hab' den alten jetzt durch deinen Code ersetzt, da klappt aber garnix ! Nicht mal die 'scrollable area' ist sichtbar !?
Hmmmm !?
Ansonsten bei CSS immmer die px mit angeben !
:-)