[js] scroller di testo in javascript

di il
1 risposte

[js] scroller di testo in javascript

Buonasera.

Sto realizzando l'interfaccia di un software gestione che verrà visualizzato su touch screen da 12" con una risoluzione di 800x600.

In alcune pagine il testo andrà sicuramente oltre lo spazio consentito dallo schermo, quindi si renderà necesaria una barra di scorrimento verticale.

Considerate le caratteristiche del touch screen, è improponibile l'uso della barra del browser (che sarà FireFox), nasce quindi l'esigenza di qualcosa di differente.

Ho letto sulla possibilità di fare qualcosa in javascript ma, a parte questo esempio questo esempio che non funziona, non ho trovato nulla che possa fare al caso mio.

Qualcuno può aiutarmi?

Grazie e buona serata.

1 Risposte

  • Re: [js] scroller di testo in javascript

    <html>
    <head><title>::: Scrolling testo :::</title>
    </head>
    <style type="text/css">
    body { font: bold 9pt Verdana,Arial; color:#660000; }
    #titolo { font: bold 8pt Verdana,Arial; color:#ffffff; background-color:#990000; padding:2px; position:absolute;top:0px;left:0px; width:200px;height:15px; }
    #scroll { font: 8pt Verdana,Arial; color:#660000; padding:3px; position:absolute; top:5px; left:5px; width:180; }
    #clip { border: solid 1px #660000; position:absolute;top:16px;left:0px; width:200px;height:120px; clip:rect(0 200 120 0); padding:5px; }
    a,a:visited {color :#ffffff; text-decoration:none}
    </style>
    <script type="text/javascript">
    var delta=0; // spostamento
    var inizio=5; // posizione iniziale del testo in pixel
    var fine=-500 // posizione finale del testo
    var attesa=50; // millisecondi di attesa
    var pos=inizio; // variabile corrente che memorizza la posizione

    function muovi() {
    if (((pos==fine)&&(delta==-1))||((pos==inizio)&&(delta==1))) delta=0;
    pos=pos+delta;
    document.getElementById('scroll').style.top=pos;
    if (delta!=0) setTimeout('muovi()',50);
    }
    </script>
    <body>
    <div style="position:absolute;top:10px;left:10px;">
    <div id="titolo"> <a href="javascript:window.close()">
    <img src="chiudi.gif" width="12" height="12" alt="chiudi" border="0" align="right"></a>:: Titolo :: </div>
    <div id="clip">
    <div id="scroll"> Nelle homepage spesso è necessario inserire più testo rispetto allo spazio disponibile... Nelle homepage spesso è necessario inserire più testo rispetto allo spazio disponibile.Nelle homepage spesso è necessario inserire più testo rispetto allo spazio disponibile.Nelle homepage spesso è necessario inserire più testo rispetto allo spazio disponibile.Nelle homepage spesso è necessario inserire più testo rispetto allo spazio disponibile.Nelle homepage spesso è necessario inserire più testo rispetto allo spazio disponibile.Nelle homepage spesso è necessario inserire più testo rispetto allo spazio disponibile.Nelle homepage spesso è necessario inserire più testo rispetto allo spazio disponibile.Nelle homepage spesso è necessario inserire più testo rispetto allo spazio disponibile.Nelle homepage spesso è necessario inserire più testo rispetto allo spazio disponibile.Nelle homepage spesso è necessario inserire più testo rispetto allo spazio disponibile.Nelle homepage spesso è necessario inserire più testo rispetto allo spazio disponibile.Nelle homepage spesso è necessario inserire più testo rispetto allo spazio disponibile.Nelle homepage spesso è necessario inserire più testo rispetto allo spazio disponibile.Nelle homepage spesso è necessario inserire più testo rispetto allo spazio disponibile.Nelle homepage spesso è necessario inserire più testo rispetto allo spazio disponibile.Nelle homepage spesso è necessario inserire più testo rispetto allo spazio disponibile.Nelle homepage spesso è necessario inserire più testo rispetto allo spazio disponibile.Nelle homepage spesso è necessario inserire più testo rispetto allo spazio disponibile. </div>
    </div>
    <div style="position:absolute;top:20px;left:182px;width:16;">
    <a href="#"><img src="su.gif" onmouseover="delta=1;muovi();" onmouseout="delta=0;" width="16" height="16" alt="freccia su" border="0"></a>
    </div>
    <div style="position:absolute;top:118px;left:182px;width:16;">
    <a href="#"><img src="giu.gif" onmouseover="delta=-1;muovi();" onmouseout="delta=0;" width="16" height="16" alt="freccia giu" border="0"></a>
    </div>
    </div>
    </body>
    </html>

    ti ho aGGIUSTATO IL CODICE....OVVIAMENTE FUNZIA CON FIREFOX:)
    ALCUNI ACCORGIMENTI.
    var fine=-500 // posizione finale del testo 500 RAPPRESENTANO LA LUNGHEZZA IN BASSO DEL TUO TESTO(QUINDI QUESTO POTREBBE RISULTARE NON VISUALIZZATO TUTTO)

    <img src="su.gif" onmouseover="delta=1;muovi();" onmouseout="delta=0;" width="16" height="16" alt="freccia su" border="0"> QUI GLI DICI CHE QUANDO PASSI CON IL MOUSE DEVE PROVARE A SALIRE(SE SEI IN UNA POSIZIONE DEL TESTO DIVERSA DALL'INIZIO).

    <img src="giu.gif" onmouseover="delta=-1;muovi();" onmouseout="delta=0;" width="16" height="16" alt="freccia giu" border="0">QUI GLI DICI CHE QUANDO PASSI CON IL MOUSE DEVE PROVARE A SCENDERE(SE SEI IN UNA POSIZIONE DEL TESTO DIVERSA DALLa FINE).

    IL CODICE CHE SI TROVA NEL SITO DA DOVE HAI PRESO L'ESEMPIO NON E' CORRETTO. RESTA CMQ BUONA L'IDEA DI UNSARE IL SETtIMEOUT PER LA SIMULAZIONE DELLO SCROLLING.

    ORA FUNZIONA TUTTO...


    MARIO.
Devi accedere o registrarti per scrivere nel forum
1 risposte