Home Scarica CV Azienda I Links della chimica Forum

Er FORO Essendo io un non bravo programmatore di javascript, vorrei comunque regalarvi alcuni script che possono servirvi per abbellire le vostre pagine Web. Quel poco (veramente poco) che ho imparato di javascript lo devo alle migliaia di programmatori, un poco più seri di me, che hanno deciso di mettere a disposizione di tutti il loro sapere, perdendo ore del loro tempo per tramutare in HTML le loro conoscenze. Dunque i miei scripts possono essere utilizzati liberamente da tutti, con l'obbligo 1) che tutti quelli che li utilizzano non impongano copyright, bloccandone la diffusione nel WWW 2) che tutti quelli che li utilizzano non li vendano ad altri lucrando sulle fatiche altrui. Accetto consigli/discussioni via e mail

1) Scroller con sorgente esterna (javascript) (28/12/1999)

2) Eppur non si muove (28/12/1999)

3) Inserire subject, cc ed altro nelle e mail

1) Come fare un carrello che abbia come risorsa esterna un file html

Molti mi hanno chiesto come creare un carrello di News che possa essere aggiornato senza toccare ogni volta il codice. Si può usare un carrello che carichi un file che un utente droppa nel sito. Vuoi aggiornare le News? Crei con un banale editor (word va benissimo) le tue nuove news, le salvi in HTML e le droppi nel tuo sito. Il sistema caricherà le nuove news che sostituiscono le vecchie. Si può volendo anche creare un sistema per caricare dopo certi inrtervalli di tempo più carrelli di news (così possono coesistere news vecchie e nuove).

Vediamo in pratica

Caricare un file esterno
La prima difficoltà è proprio questa. l'HTML 4 ci regala l'oggetto iframe (supportato solo da IE4+); per NS dobbiamo accontentarci di un banale frame. ho visto gente usare il tag Layer (supportato solo da NS) dopo migliaia di linee di codice per renderlo scrollabile, ma putroppo per problemi di NS che ancora non sono riuscito ben a comprendere il mio script scrolla l'intero documento :-(. Insomma per NS accontentatevi di un banale frame!

Partiamo con la versione per IE e con il tag inline frame di HTML 4

I fortunati possessori di IE4+ vedrammo un frame isolato con cui possiamo scrollare il contenuto di un file scroller.html richiamato dal tag mediante src. L'iframe ha un nome "pincopalla" ed e' scrollabile (vedi il codice HTML di questa pagina per vedere quali attributi ho assegnato.

Gli sfortunati possessori di NS non vedranno un bel tubo!!

Farlo scrollare automaticamente
Per prima cosa togliere le barre di scorrimento al tag iframe (scrolling="no"). Otteniamo questo risultato:

Otteniamo il risultato sopra; un povero file incastrato ed immobile in un finestra!!!

Ricopiamo nel header della pagina che vogliamo scrollare (scroller1.html ad esempio) la seguente stringa

<script name="scroller" language="JavaScript1.2" src="scroller.js"></script>

Scarichiamo il seguente file e lo posizioniamo nella stessa cartella. La stringa richiama il file .js che contiene oil codice necessario a scrollare il documento scroller1.html.

faccaimo in modo che la src dell'iframe sia questo file ed ecco ottenuto il risultato sottostante

Magia si muove!!!!!!!!!!!!!!!!!!: carino no!

Il risultato è un carrello scorrevole che potete personalizzare a piacere con links e javascript vari.

Scroller.js contiene anche due funzioni stop() e restart(). Potete fare in modo che associando queste due funzioni a onmouseover e a onmouseout il carrello si blocchi quando il mouse è su un link e riparta quando ne esce: ciò è molto utile per bloccare il carrello (soprattutto quando scorrono velocemente!!!). Ecco il tutto! Scrivi ogni link in questo modo:

<a href="filedalincare" onmouseover = "stop()" onmouseout = "restart()">mome del link</a>

in modo tale che quando il mouse è sopra il link si applicala funzione stop() che blocca il carrello e che quando il mouse è fuori si applica la funzione restart() che riattiva lo scorrimento. Ecco il risultato!!!

Carino eh eh!!!

Discussione dello script scroller.js
Passamo alla discussione delle funzioni dello script che regola lo scroller. Ecco qua il mostro con i commentini a lato

/* definizione variabili*/
var intervallo = 100; /* intervallo di applicazione funzione scrolla() */
var posizionecorrente=0;

/* funzione principale */

function scrolla(velocita){

if (document.all)
posizionecorrente=document.body.scrollTop+velocita /* se e' IE */
else
posizionecorrente=window.pageYOffset+velocita /* se e' NS */

if (posizionecorrente != 400)
window.scroll(0,posizionecorrente)
else scroll(0,0)

}
/* funzione partenza carrello*/
function start(){

inter_vallo = setInterval("scrolla(1)",intervallo)

}

/* funzione di blocco carrello*/
function stop() {
clearInterval(inter_vallo); /* blocca la funzione setInterval*/
}

function restart(){
inter_vallo = setInterval("scrolla(1)",intervallo)
}

Il nucleo è la funzione Scrolla(): essa aggiunge un pixel all'asse Y, (fino al 400 esimo pixel, dopo il quale setta la posizione a Y =0 e X = 0, ma questo è un dettaglio, per far riprendere il carrello dall'inizio dopo 400 pixels). La funzione start() riapplica la funzione scrolla() ogni 100 millisecondi. Le due funzioni assieme "generano" lo scroll verticale delle scritte. La funzione stop() termina con clearInterval() setInterval bloccando lo scroller e restar() lo riprende.

E il povero Netscape?
E' ingiusto che gli utenti di NS (ahimé sempre meno) non possano gioire di news così semplici che non utilizzano DIV o altri tag che il più delle volte mandano in tilt i browsers. Con il tag ilayer puoi caricare un file esterno: il file esterno e' caricato ma non è scrollabile!