Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Div con testo scorrevole

Link copiato negli appunti

Anche lo script che presentiamo è una realizzazione di Sharon Paine per Dynamic Web Coding. Consente la realizzazione di un div al cui interno inserire del testo che scorrerà a intervalli regolari e ciclicamente.

Lo script si compone di uno script in formato js da collegare alla pagina, di una sezione JavaScript presente nella sezione <head></head> della pagina, di una serie di regole CSS e di una serie di un richiamo all'interno della parte HTML.

  • esempio.htm

## 1: LA SEZIONE JAVASCRIPT

Nell'esempio allegato sono stati commentati in italiano i punti cardine dello script. Qui analizeremo solo gli step necessari all'implementazione.

Per prima cosa si dovrà collegare al documento il file .js esterno 'dw_scroller.js':

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

Segue una breve sezione Javascript incorporata:

function initScroller() {
var scr1 = new dw_scroller('cnt', 150, 160, 5, "v", true);
scr1.setTiming(100, 7000);
}

Si tratta della definizione della funzione Javascript principale, 'initScroller'. La variabile scr1 contiene 6 argomenti. Nell'ordine: l'id del div a cui applicare lo scorrimento ('cnt'), larghezza e altezza del div in pixel (150 e 160), il numero di porzioni di testo da far scrorrere (5), la direzione orizzontale o verticale dello scorrimento (v), l'attivazione dello stop del testo con onmouseover (true).

Con l'istruzione ' scr1.setTiming' si imposta invece la velocità di scorrimento.

## 2: LA SEZIONE CSS

Fondamentale è la parte CSS che precede l'inclusione di Javascript. Sono una serie di regole in grado di definire l'aspetto dei div interessati, oltre che del testo e dei link in esso contenuti. Per poter adattare il tutto al layout della nostra pagina è richiesta quindi la conoscenza delle basi della formattazione con i fogli di stile. Anche in questo caso i commenti aiuteranno ad orientarsi nelle sezioni principali.

## 3: LA SEZIONE HTML

Inizia con il richiamo della funzione:

<body onload="initScroller()">

Ora attenzione. La struttura interessata allo script è costituita da 3 div principali annidati:

<div id="bg">
<div id="wn">
<div id="cnt">
-------------
</div>
</div>
</div>

All'interno del div con id 'cnt', trovano posto 5 div con classe 'item'. Il testo che contengono è quello che scorrerà all'interno del div. Il numero 5 deve essere riportato esattamente nella variabile di cui si è parlato qui sopra.

Ti consigliamo anche