PDA

View Full Version : [Javascript, Firefox & XHTML] Scroll


Janky
14-07-2005, 17:08
Ciao a tutti...
sto cercando di inserire in una mia pagina html un box scrollabile mediante metodo onmouseover su due immagini (ho copiato lo scipt da qui (http://www.btre.it/Provajs20.htm)). Tutto funzionava perfettamente (Safari, Firefox, IE, Opera...), finchč non sono passato alla fase "validazione xhtml".... inserito il doctype, non funziona pił lo scroll su Firefox (pił in generale su browser gecko-based)... il codice utilizzato č questo:
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('BoxRight')
objScroller=new ConstructObject('text','BoxRight')
objScroller.MoveArea(0,0)
objContainer.css.visibility='visible'
initialised=true;
}

document.onkeydown = onKeyDown
document.onkeyup = onKeyUp

function onKeyDown(){
code = event.keyCode
switch (code)
{
case 38: // Up Arrow
PerformScroll(-7);
break;
case 40: // Down Arrow
PerformScroll(7);
break;
default:
}
}

function onKeyUp(){
if(event.keyCode == 38 || event.keyCode == 40)
CeaseScroll();
}

il tutto inserito in un file .js e richiamato nella pagina html mediante tag script:

<script type="text/javascript" src="scripts/scroll.js"></script>

facendo un po' di debug all'interno dello script, mettendo un po' di alert qua e lą, ho notato che nel momento in cui si verifica l'evento onmouseover viene eseguita la funzione moveArea, i parametri this.x e this.y al suo interno ricevono valori esatti, ma this.css.left e this.css.top (sempre all'interno della stessa funzione) rimangono sempre a 0. Che l'errore sia nell'assegnazione di this.css nella funzione ConstructObject? Vi prego aiutateemiiiiiii!! :muro: :muro: :muro:

Janky
15-07-2005, 16:53
up