What is this? From this page you can use the Social Web links to save News Scroller to a social bookmarking site, or the E-mail form to send a link via e-mail.

Social Web

E-mail

E-mail It
May 26, 2007

News Scroller

Posted in: Design, Programmazione

Ecco un piccolo esempio in cui si applicano le proprietà  presentate in Scroll boxes. Si tratta di una possibile visualizzazione di news a scorrimento automatico in un blocco DIV. Niente di innovativo e tanto meno completo, ma può considerarsi uno buono spunto per esercitarsi con javascript, css e xhtml ( AJAX usando una sigla audace ).

Primo step, HTML formato da un contenitore generale un wrapper che servira' come contenitore delle news e quindi le singole news:

PLAIN TEXT
HTML:
  2.     <div>
  3.         <div>
  4.             <h3>Title 1</h3>
  5.             <p>Lorem ipsum doler sit amet, consectetur...</p>
  6.         </div>
  7.         <div>
  8.             <h3>Title 2</h3>
  9.             <p>Lorem ipsum doler sit amet, consectetur...</p>
  10.         </div>
  11.         <div>
  12.             <h3>Title 3</h3>
  13.             <p>Lorem ipsum doler sit amet, consectetur...</p>
  14.         </div>
  15.     </div>
  16. </div>

Secondo step,CSS che nasconde l'overflow delle news:

PLAIN TEXT
CSS:
  1. #container{
  2.     margin: 20px;
  3.     width: 200px;
  4.     height: 200px;
  5.     /*Nasconde la parte in eccesso*/
  6.     overflow: hidden;
  7.     border: 1px solid #000
  8. }
  9.  
  10. div.news{
  11.     padding: 10px;
  12. }

Ultimo step, Javascript per dare moto al tutto:

PLAIN TEXT
JavaScript:
  1. //dichiarazione variabili globali
  2. var time;
  3. var scroll_limit;
  4.  
  5. //Alcune impostazioni fondamentali pre caricamento pagina
  6. function init(){
  7.     var container = document.getElementById("container");
  8.     var wrapper = document.getElementById("wrapper");
  9.     var client_height = container.offsetHeight;
  10.     var news_nodelist = wrapper.getElementsByTagName("DIV");
  11.        
  12.     /**
  13.      * Lo scroller deve resettarsi quando gli attuali
  14.      * elementi news sono stati tutti scorsi.
  15.      **/
  16.     scroll_limit = wrapper.offsetHeight;
  17.     var i = 0;
  18.     var current_element = news_nodelist[i];
  19.  
  20.     /**
  21.      * Si duplicano i nodi in modo da creare l'illusione
  22.      * dello scorrimento continuo. Si assume che ci siano
  23.      * abbastanza nodi (news) da duplicare.
  24.      **/
  25.     while(client_height&gt;= 0){
  26.         var current_element = news_nodelist[i];
  27.         client_height = client_height - current_element.scrollHeight;
  28.         wrapper.appendChild(current_element.cloneNode(true));
  29.         i = i + 1;
  30.     }
  31.     scroll("wrapper"); 
  32. }
  33. function scroll(element_id){
  34.     var wrapper = document.getElementById(element_id);
  35.     var container = wrapper.parentNode;
  36.     var scroll_top = container.scrollTop;
  37.     if( scroll_top + 1 &lt;scroll_limit ){
  38.         container.scrollTop = container.scrollTop + 1;
  39.     }else{
  40.         container.scrollTop = 0;
  41.     }
  42.     // Si richiama la funzione tra 25 millisecondi
  43.     time = setTimeout('scroll(\'wrapper\')', 25);
  44. }
  45.  
  46. function stopScroll()
  47. {
  48.     if (time) clearTimeout(time);
  49. }

Ovviamente la funzione init() deve essere richiamata al termine del caricamento della pagina HTML, ora sta a voi raffinare questo rozzo esempio di News Scroller.

Testato su:
Firefox 2.0.0.3 (Linux)
Mozilla 1.7.13 (Linux)
Epiphany 2.16.1 (Linux)
Galeon 2.0.2 (Linux)
IE 6.0 (Linux)

Return to: News Scroller