Newsgroup: it.comp.lang.javascript
Titolo: Come limito la lunghezza della pagina? [Era: Scroller di pagina...] sviluppi (e lunghetto..)

Un po' di tempo fa postai sul ng una richiesta circa la possibilità di
realizzare uno scroller di pagina.
Fox in una sua risposta mi indirizzò  verso
http://www.risorse.net/dhtml/finestre_frame/scegli/frame_scroll.asp
ed effettivamente l'oggetto faceva al caso mio.
il problema è questo :
la pagina "scrollata" non termina , ovvero: con i tasti presenti
nell'esempio la pagina si muove verso l'alto o verso il basso ma se il
puntatore del mouse rimane su uno dei tasti la pagina scrolla verso l'oalto
o verso il basso all'infinito...
Il mio problema è implementare il codice per delimitare la lunghezza della
pagina affinchè si possa scrollare fino (al massimo) alla lunghezza di
pagina e poi fermarsi.
Qualche idea?
il codice era questo
<HTML>
<HEAD>
<title>Demo dhtml - 
www.risorse.net
</title>
<!-- Script tratto da 
WWW.RISORSE.NET
 -->
<!-- Visita il sito per altre centinaia di esempi gratuiti -->
<SCRIPT>
function tmtZ_clipBottom(bersaglio, clipbottom) {
    if (document.layers) {
        var Hzob = self.innerHeight / 100;
        document.layers[bersaglio].clip.bottom = clipbottom * Hzob;
    }
    if (document.all) {
        var Hzob = document.body.offsetHeight / 100;
        turi = eval("document.all." + bersaglio + ".style");
        if (turi.clip) {
            var clipv =
turi.clip.split("rect(")[1].split(")")[0].split("px");
            var ct = Number(clipv[0]);
            var cr = Number(clipv[1]);
            var cl = Number(clipv[3]);
        }
        eval("turi.clip = 'rect(' + ct + ' ' +  cr + ' ' + clipbottom*Hzob +
' ' + cl +')'");
    }
}
function tmt_scrollLayerBy(bersaglio, dx, dy, vel) {
    if (document.layers) {
        turi = document.layers[bersaglio];
        var cl = turi.clip.left;
        var ct = turi.clip.top;
        var cr = turi.clip.right;
        var cb = turi.clip.bottom;
        var l = turi.left;
        var t = turi.top;
        turi.clip.left = cl + dx;
        turi.clip.top = ct + dy;
        turi.clip.right = cr + dx;
        turi.clip.bottom = cb + dy;
        turi.top = t - dy;
        turi.left = l - dx;
    } else {
        if (document.all) {
            turi = eval("document.all." + bersaglio + ".style");
            if (turi.clip) {
                var clipv =
turi.clip.split("rect(")[1].split(")")[0].split("px");
                var ct = Number(clipv[0]);
                var cr = Number(clipv[1]);
                var cb = Number(clipv[2]);
                var cl = Number(clipv[3]);
                var l = turi.pixelLeft;
                var t = turi.pixelTop;
            }
            ncl = cl + dx;
            nct = ct + dy;
            ncr = cr + dx;
            ncb = cb + dy;
            turi.pixelTop = t - dy;
            turi.pixelLeft = l - dx;
            eval("turi.clip = 'rect(' + nct + ' ' +  ncr + ' ' + ncb + ' ' +
ncl +')'");
        }
    }
    tmt_scrollalo = setTimeout("tmt_scrollLayerBy('" + bersaglio + "'," + dx
+ "," + dy + "," + vel + ")", vel);
}
function tmt_stopScroll() {
    if (tmt_scrollalo) {
        clearTimeout(tmt_scrollalo);
    }
}
if (document.layers) {
origWidth = innerWidth;
origHeight = innerHeight;}
function reDo() {
if (innerWidth != origWidth || innerHeight != origHeight)
location.reload();}
if (document.layers) onresize = reDo;
</SCRIPT>
</HEAD>
<BODY>
<div id="scroller" style="position:absolute; width:50px; left: 540px; top:
30px">
<div align="center">
<a href="#" onMouseOver="tmt_scrollLayerBy('scrollo',0,3,5)"
onMouseOut="tmt_stopScroll()"><img name="scroller01" src="scroller01.gif"
border="0" alt="Su"></a><br><br><br><br><br><br><br>
<a href="#" onClick="location.reload()"><img name="scroller02"
src="scroller02.gif" alt="Inizio" border="0"
vspace=12></a><br><br><br><br><br><br><br>
<a href="#" onMouseOver="tmt_scrollLayerBy('scrollo',0,-3,5)"
onMouseOut="tmt_stopScroll()"><img name="scroller03" src="scroller03.gif"
border="0" alt="Giù"></a>
</div>
</div>
<div id="scrollo" style="position:absolute; width:500px; height:400px; left:
20px; top: 20px; clip: rect(0 500 400 0)">
<br>
<br><br>
Risorse.net - sezione Dhtml. Finalmente Dynamic Html anche in Italia.
Risorse.net - sezione Dhtml. Finalmente Dynamic Html anche in Italia.
Risorse.net - sezione Dhtml. Finalmente Dynamic Html anche in Italia.</div>
</body>
</html>
Grazie,
Alex

 Qualche idea?
Basta dirglielo;
cosi' funziona anche con N6 e Opera.
function tmtZ_clipBottom(bersaglio, clipbottom) {
    if (document.layers) {
        var Hzob = self.innerHeight / 100;
        document.layers[bersaglio].clip.bottom = clipbottom * Hzob;
    }
    if (document.getElementById) {
        var Hzob = innerHeight / 100;
        document.getElementById(bersaglio).clip.bottom = clipbottom * Hzob;
    }
    if (document.all) {
        var Hzob = document.body.offsetHeight / 100;
        turi = eval("document.all." + bersaglio + ".style");
        if (turi.clip) {
            var clipv =
turi.clip.split("rect(")[1].split(")")[0].split("px");
            var ct = Number(clipv[0]);
            var cr = Number(clipv[1]);
            var cl = Number(clipv[3]);
        }
        eval("turi.clip = 'rect(' + ct + ' ' +  cr + ' ' + clipbottom*Hzob +
' ' + cl +')'");
    }
}
function tmt_scrollLayerBy(bersaglio, dx, dy, vel) {
    if (document.layers) {
        turi = document.layers[bersaglio];
        if(turi.top<0){turi.top=0;return;}
        if(turi.top>innerHeight){turi.top=innerHeight;return;}
        var cl = turi.clip.left;
        var ct = turi.clip.top;
        var cr = turi.clip.right;
        var cb = turi.clip.bottom;
        var l = turi.left;
        var t = turi.top;
        turi.clip.left = cl + dx;
        turi.clip.top = ct + dy;
        turi.clip.right = cr + dx;
        turi.clip.bottom = cb + dy;
        turi.top = t - dy;
        turi.left = l - dx;
    } else {
        if (document.all) {
            turi = eval("document.all." + bersaglio + ".style");
        if(turi.pixelTop<0){turi.pixelTop=0;return;}
if(turi.pixelTop>document.body.clientHeight){turi.pixelTop=document.body.cli
entHeight;return;}
            if (turi.clip) {
                var clipv =
turi.clip.split("rect(")[1].split(")")[0].split("px");
                var ct = Number(clipv[0]);
                var cr = Number(clipv[1]);
                var cb = Number(clipv[2]);
                var cl = Number(clipv[3]);
                var l = turi.pixelLeft;
                var t = turi.pixelTop;
            }
            ncl = cl + dx;
            nct = ct + dy;
            ncr = cr + dx;
            ncb = cb + dy;
            turi.pixelTop = t - dy;
            turi.pixelLeft = l - dx;
            eval("turi.clip = 'rect(' + nct + ' ' +  ncr + ' ' + ncb + ' ' +
ncl +')'");
        }
        if (document.getElementById && navigator.appName!="Microsoft
Internet Explorer") {
            turi = document.getElementById(bersaglio).style;
        if(parseInt(turi.top)<0){turi.top=0;return;}
        if(parseInt(turi.top)>innerHeight){turi.top=innerHeight;return;}
            if (turi.clip) {
                var clipv =
turi.clip.substring(5,turi.clip.length-1).split(" ");
                var ct = parseInt(clipv[0]);
                var cr = parseInt(clipv[1]);
                var cb = parseInt(clipv[2]);
                var cl = parseInt(clipv[3]);
                var l = parseInt(turi.left);
                var t = parseInt(turi.top)
            }
            ncl = cl + dx;
            nct = ct + dy;
            ncr = cr + dx;
            ncb = cb + dy;
            turi.left = l - parseInt(dx);
            turi.top = t - parseInt(dy);
            eval("turi.clip = 'rect(' + nct + ' ' +  ncr + ' ' + ncb + ' ' +
ncl +')'");
        }
    }
    tmt_scrollalo = setTimeout("tmt_scrollLayerBy('" + bersaglio + "'," + dx
+ "," + dy + "," + vel + ")", vel);
}
--
 [Ciao]
  [web]   
www.gfcarlotti.it
   [mail]   
fra...@gfcarlotti.it

  [Ciao]
Ciao e grazie ,
Alex3man

Ciao Gianfranco,
ho provato ad implementare la versione dello script modificata da te.
ho però un problema, lo scroller così modificato blocca la parte superiore
della pagina al posto giusto ma quando
avviene lo scrollo vero e proprio è l'intestazione di pagina che si muove
non le parti successive!
Detto a parole non è facilissimo quindi passo ad un esempio "grafico"
l'intestazione della pagina x.htm è :
-------------------------------------
|            Questa è l'intestazione          |
|                                                       |
|                                                       |
|          questo è il corpo della pagina |
|                                                       |
|                                                       |
|         questa è la fine della pagina     |
-------------------------------------
se scrollo la pagina verso il basso avviene che
(mi lascia spazio dall'alto rispetto all'intestazione)
-------------------------------------
|                                                       |
|                                                       |
|                                                       |
|          Questa è l'intestazione            |
|                                                       |
|                                                       |
|     questo è il corpo della pagina      |
-------------------------------------
quindi effettivamente scrolla ma al contrario di come vorrei io, ossia
(bloccare in basso la fine della pagina e farla scrollare verso l'alto)
-------------------------------------
|       questo è il corpo della pagina    |
|                                                       |
|                                                       |
|         questa è la fine della pagina     |
|                                                       |
|                                                       |
|                                                       |
-------------------------------------
Puoi darmi una mano? Purtroppo di lavoro faccio tutt'altro che il
programmatore
ma mi servirebbe veramente molto.
Spero di essermi spiegato, e nuovamente ringrazio.
Alex3man

 non le parti successive!
Hai ragione, errore mio, cosi' funzia, parola.
Spero che si potesse modificare lo script, perche' l' ho un po' sconvolto.
CopiaIncolla la pagina intera e prova.
<HTML>
<HEAD>
<title>Demo dhtml - 
www.risorse.net
</title>
<!-- Script tratto da 
WWW.RISORSE.NET
 -->
<!-- Visita il sito per altre centinaia di esempi gratuiti -->
<!-- Modificato da Gianfranco Carlotti - gfCsoft - 
fra...@gfcarlotti.it
 -
Ferrara - Italy-->
<SCRIPT>
var tmt_scrollalo=false
var gfC_fineScroll=190
function tmt_scrollLayerBy(bersaglio, dx, dy, vel) {
    if (document.layers)
        turi = document.layers[bersaglio];
        turi.clip.left = turi.clip.left + dx;
        turi.clip.top = turi.clip.top + dy;
        turi.clip.right = turi.clip.right + dx;
        turi.clip.bottom = turi.clip.bottom + dy;
        if(turi.clip.top<0){turi.clip.top=0;return}
if(turi.clip.top>gfC_fineScroll){turi.clip.top=gfC_fineScroll;return}
        turi.top = turi.top - dy;
        turi.left = turi.left - dx;
    } else {
        if (document.all) {
            turi = document.all[bersaglio].style;
            if (turi.clip){var clipv =
turi.clip.split("rect(")[1].split(")")[0].split("px");}
            if((Number(clipv[0]) + dy)<0) return;
            if((Number(clipv[0]) + dy)>gfC_fineScroll) return;
            turi.pixelTop = turi.pixelTop - dy;
            turi.pixelLeft = turi.pixelLeft - dx;
           eval("turi.clip = 'rect(' + (Number(clipv[0]) + dy) + ' ' +
(Number(clipv[1]) + dx) + ' ' + (Number(clipv[2]) + dy) + ' ' +
(Number(clipv[3]) + dx) +')'");
        }
        if (document.getElementById && navigator.appName!="Microsoft
Internet Explorer") {
            turi = document.getElementById(bersaglio).style;
            if(turi.clip){var clipv =
turi.clip.substring(5,turi.clip.length-1).split(" ");}
            if((parseInt(clipv[0]) + parseInt(dy))<0) return;
            if((parseInt(clipv[0]) + parseInt(dy))>gfC_fineScroll) return;
            turi.left = parseInt(turi.left) - parseInt(dx);
            turi.top = parseInt(turi.top) - parseInt(dy);
            eval("turi.clip = 'rect(' + (parseInt(clipv[0]) + parseInt(dy))
+ ' ' +  (parseInt(clipv[1]) + parseInt(dx)) + ' ' + (parseInt(clipv[2]) +
parseInt(dy)) + ' ' + (parseInt(clipv[3]) + parseInt(dx)) +')'");
        }
    }
    tmt_scrollalo = setTimeout("tmt_scrollLayerBy('" + bersaglio + "'," + dx
+ "," + dy + "," + vel + ")", vel);
}
function tmt_stopScroll() {
    if (tmt_scrollalo) {
        clearTimeout(tmt_scrollalo);
    }
}
</SCRIPT>
</HEAD>
<BODY style="background:blue;">
<div id="scroller" style="position:absolute; width:50px; left: 540px; top:
30px;background:green;text-align:center">
<a href="#" onMouseOver="tmt_scrollLayerBy('scrollo',0,3,5)"
onMouseOut="tmt_stopScroll()"><img name="scroller01" src="scroller01.gif"
border="0" alt="Su"></a>
<a href="#" onMouseOver="tmt_scrollLayerBy('scrollo',0,-3,5)"
onMouseOut="tmt_stopScroll()"><img name="scroller03" src="scroller03.gif"
border="0" alt="Giù"></a><br><br>
<a href="#" onClick="location.reload()"><img name="scroller02"
src="scroller02.gif" alt="Inizio" border="0" vspace=12></a>
</div>
<div id="scrollo" style="position:absolute; width:400px; height:250px; left:
20px; top: 20px; clip: rect(0 400 250 0);background:blue;">
inizio<br>
Risorse.net - sezione Dhtml. Finalmente Dynamic Html anche in Italia.
Risorse.net - sezione Dhtml. Finalmente Dynamic Html anche in Italia.
Risorse.net - sezione Dhtml. Finalmente Dynamic Html anche in Italia.
Risorse.net - sezione Dhtml. Finalmente Dynamic Html anche in Italia.
Risorse.net - sezione Dhtml. Finalmente Dynamic Html anche in Italia.
Risorse.net - sezione Dhtml. Finalmente Dynamic Html anche in Italia.
Risorse.net - sezione Dhtml. Finalmente Dynamic Html anche in Italia.
Risorse.net - sezione Dhtml. Finalmente Dynamic Html anche in Italia.
Risorse.net - sezione Dhtml. Finalmente Dynamic Html anche in Italia.
Risorse.net - sezione Dhtml. Finalmente Dynamic Html anche in Italia.
Risorse.net - sezione Dhtml. Finalmente Dynamic Html anche in Italia.
Risorse.net - sezione Dhtml. Finalmente Dynamic Html anche in Italia.
Risorse.net - sezione Dhtml. Finalmente Dynamic Html anche in Italia.
Risorse.net - sezione Dhtml. Finalmente Dynamic Html anche in Italia.
Risorse.net - sezione Dhtml. Finalmente Dynamic Html anche in Italia.
Risorse.net - sezione Dhtml. Finalmente Dynamic Html anche in Italia.
Risorse.net - sezione Dhtml. Finalmente Dynamic Html anche in Italia.
Risorse.net - sezione Dhtml. Finalmente Dynamic Html anche in Italia.
<br>fine
</div>
</body>
</html>



Ciao Gianfranco,
sto provando lo script modificato ma mi da'
3 errori:
1)  il debugger mi indica   ---> } else
 (approssimamativamente alla riga 26)-->errore di sintassi
2 e 3 ) riga 70 e 71 errore , previsto oggetto  , il debugger mi segnala -->
tmt_scrollLayerBy('scrollo',0,3,5)
Che ne pensi?
Ciao ,
Alex
(p.s. mi raccomando, che non diventi un lavoro rispondere ai miei msg! )

 Che ne pensi?
Non ne ho idea, comunque per tagliare la testa al toro:
http://www.gfcarlotti.it/gfC_free/00scrollLayer.htm
Funziona alla grande.
Fammi sapere.



Anche a me!!! Non ho ancora capito cosa c____o avesse da lamentarsi, mi
sembrava pari pari (almeno per le righe 70 e 71) all'esempio che avevo
portato...
Misteri di Frontpage!!!
Credo che inizierò a scrivere con il notepad  .....
Grazissime e buona notte ,
Alex

 Credo che inizierň a scrivere con il notepad  .....
Ottimissima idea.
Io uso Microsoft Script Debugger, che era compreso con IE4(mi sembra),
e mi trovo bene.
