utentionline
searchengine
quicklinks
WebDesigner
Tutorials ASP
Tutorials XHTML
Tutorials Javascript
Tutorials HTML-CSS
Tutorials SQL
Tutorials PHP & MySQL
AJAX applicazioni web
Web Development
Template & Layout
Non solo Web :: Blog
Portfolio Lavori
Who is Yappy?
Benvenuto nella Newsletter
libririviste
Calendario motoGP 2007
newscorsi
FAQ & Domande
newscorsi
Web Designer gratuitoCorso Web Designer Gratuito per creare siti internet trucchi, consigli, esempi pratici e template per diventare un vero web designer.
Seo Extreme 2007
Al corso nazionale "Seo Extreme 2007" troverai le ultime tecniche e strategie di Posizionamento nei motori di ricerca. Parteciperai ad un corso di alto livello dedicato a chi vuole fare posizionamento...
libririviste
Web Design Facile"Web Design Facile" di Davide Vasta è una guida pratica che conduce il lettore, passo per passo attraverso la realizzazione di un sito Internet: dalla creazione di un prototipo da mostrare al cliente fino al suo sviluppo definitivo.
WebDesigner 22
Web Designer Magazine n.22. Flash in prima linea, conoscere l'ultima versione del programma Macromedia. Inserire video Flash nelle vostre pagine. In primo piano "diventare Designer di successo".
Web Marketing
Trucchi headlines efficaci 8Trucchi headlines efficaci 7
tagclouds
Macromedia Web Classes Trucchi headlines efficaci 2 Importare Rss Feed esterni Realizzare un sito internet Web Designer 18 Portal for foreign students Annick Augier Art Blog Pesci & Acquari Libreria grafica PHP Mondonauta viaggi Effetto eco Realizzare un sito internetsyndicate
RSS 2.0Atom feed
CreativeCommons
stampa l'articolo
segnala ad un amicoScrolling in Javascript
[13 Mar 2004]Nelle homepage spesso è necessario inserire più testo rispetto allo spazio disponibile. Per questo realizziamo una casella in cui poter inserire un testo più o meno lungo e lasciare la possibilità? al visitatore di scrollare il
Nelle homepage spesso è necessario inserire più testo rispetto allo spazio disponibile. Per questo realizziamo una casella in cui poter inserire un testo più o meno lungo e lasciare la possibilità? al visitatore di scrollare il suo contenuto.
Analizziamo il problema pratico: un testo contenuto in un livello deve muoversi al passaggio del mouse su due frecce, ovviamente deve essere mascherato per non far visualizzare ne l'inizio ne la fine del testo.
Iniziamo con la definizione della pagina e degli elementi che la compongono...
<html>
<head><title>::: Scrolling testo :::</title>
</head>
<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... </div>
</div>
<div style="position:absolute;top:20px;left:182px;width:16;">
<a href="#"><img src="su.gif" width="16" heght="16" alt="freccia su" border="0"></a>
</div>
<div style="position:absolute;top:118px;left:182px;width:16;">
<a href="#"><img src="giu.gif" width="16" heght="16" alt="freccia giu" border="0"></a>
</div>
</div>
</body>
</html>
Il livello più esterno definisce semplicemente la posizione nello spazio dell'intera struttura, potrete di fatto posizionarla in qualunque posizione della pagina, anche in modo relativo a tabelle o altri elementi.
Il livello "titolo" contiene il titolo della finestra ed eventualmente un collegamento per chiuderla.
Il livello "clip" è il livello che contiene il testo da scrollare e che permette di mascherare parzialmente il testo contenuto al suo interno nel livello "scroll". Ricordiamo che il modo più efficace per spostare un testo è quello di modificare la posizione del livello che lo contiene, ed è proprio quello che faremo.
Gli ultimi elementi inseriti nella pagina sono i livelli che posizionano le frecce.
I livelli così inseriti ovviamente hanno bisogno di una caratterizzazione attraverso gli stili css descritti di seguito...
Gli ultimi elementi inseriti nella pagina sono i livelli che posizionano le frecce.
I livelli così inseriti ovviamente hanno bisogno di una caratterizzazione attraverso gli stili css descritti di seguito.
<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>
L'operazione da compiere è di mettere in movimento il livello "scroll" al passaggio del mouse sulle frecce poste al lato...
Iniziamo con il definire le condizioni predefinite con un elemento Javascript all'interno della testata del file che stiamo realizzando.
<script type="text/javascript">
var delta=0; // spostamento
var inizio=5; // posizione iniziale del testo in pixel
var fine=-130 // posizione finale del testo
var attesa=50; // millisecondi di attesa
var pos=inizio; // variabile corrente che memorizza la posizione
</script>
<script type="text/javascript" src="codice.js"></script>
Mentre all'interno della pagina abbiamo messo le caratteristiche locali dello spostamento, in modo da poterle cambiare facilmente in funzione della lunghezza della finestra e del testo da contenere; il codice necessario al movimento è contenuto in un altro file, in modo da poter essere facilmente richiamato da più documenti.
Vediamo il contenuto del file "codice.js"
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);
}
La funzione muovi(); viene attivata dal passaggio del mouse sulle frecce.
Il primo controllo è se la posizione del livello è giunta alla fine della corsa quando delta è uguale a -1 oppure se la corsa di ritorno è conclusa (delta==1), nell'uno o mell'altro caso viene riazzerata la variabile delta, ossia lo spostamento da compiere nell'uno o nell'altro verso.
Viene aggiornata così la posizione corrente del livello ed attribuita al livello stesso.
L'ultimo elemento di controllo determina se è richiesta l'attivazione di un nuovo spostamento.
Il codice è pronto, vediamo come utilizzarlo all'interno dei collegamenti:
Per il pulsante che permette di far salire il testo mettiamo all'interno del collegamento:
onmouseover="delta=-1;
muovi();"
al passaggio del mouse imposta la variabile dello spostamento delta=-1 e attiva la funzione muovi;
onmouseout="delta=0;"
al passaggio del mouse imposta la variabile dello spostamento delta=0.
Analogamente per il pulsante che permette di far scendere il testo che imposta la variabile dello spostamento delta=1
