Aiutino per creare delle news dinamiche semplici

**newentry** · 21-02-2009, 18:17

Vorrei creare del news con una scrollbar laterale per fare scendere le notizie
e possibile crearlo con Javascript o devo trovare un altro linguaggio ?

e vorrei che sia facili da aggiornare !(visto che in teoria potrebbero essere modificate mensilmente! )

vi allego una possibile bozza in jpg !

Vi sarò eternamente grato se mi aiutate !

**cavicchiandrea** · 21-02-2009, 19:04

vedi qui http://javascript.html.it/script/lista/23/news/

**newentry** · 22-02-2009, 11:31

Originariamente inviato da cavicchiandrea
vedi qui http://javascript.html.it/script/lista/23/news/

ho cercato ma non ho trovato uno simile ma non è quello che voglio io ! per fare dei mini scroller come si fa ?
ne ho trovato uno simile ma per fare le scroller e possibile crearle con Javascript?

Se uno usa Dreamweaver mx ?

**cavicchiandrea** · 22-02-2009, 13:40

Originariamente inviato da newentry
ho cercato ma non ho trovato uno simile ma non è quello che voglio io ! per fare dei mini scroller come si fa ?

Si studia il javascript ottime guide http://javascript.html.it/guide/

ne ho trovato uno simile ma per fare le scroller e possibile crearle con Javascript?

Direi di si il javascript e un linguaggio molto duttile

Se uno usa Dreamweaver mx ?

E' ininfluente l'editor che usi, se conosci il codice e sai programmare in javascript puoi fare tutto con il semplice wordpad (o programma di testo)

Altra risorsa dove puoi guadare http://www.dynamicdrive.com/ d'altronde se non sai programmare e desideri cose particolari/personalizzate devi sperare che qualche buon "samaritano" te le faccia oppure ti studi il linguaggio, oppure paghi.

**Straystudios** · 22-02-2009, 15:09

Non so se vuoi che questo box sia anche dinamico, cioè con il contenuto che "scorre" da solo.
Intanto per la parte HTML (statica) ti puoi studiare questo mio modellino, realizzi un po' con quali Attributi / Proprietà di Stile puoi/devi giocare; prova a cambiarli, anche:

codice:

<html>
<head>
<TITLE>news box</TITLE>

</head>
<body bgcolor="#909090">

<div align="center">


 <div id="news" 
      style="width: 25%; height: 100px; overflow: auto; 
      text-align: left; padding-left: 10px; background-color: #DEDEDE; border: 1px solid black;"
 >
      <h2>notizia 4</h2>Barablab-bla bla !<hr>
      <h2>notizia 5</h2>Barablab-bla bla !<hr>
 </div>

</div>



</body>
</html>

Con overflow: auto; la barra di scroll apparirà spontaneamente non appena il volume del contenuto lo richieda; se occorre solo quella verticale, quella orizzontale o entrambe.
Con overflow: scroll; appaiono comunque ed entrambe.
Bisogna assegnare delle dimensioni al DIV style="width: ; height: ;" perché l' overflow intervenga; alrimenti, senza dimensioni assegnate, il DIV continua ad espandersi in altezza in funzione del contenuto, ed in larghezza per tutto lo spazio disponibile.

**newentry** · 24-02-2009, 19:26

Originariamente inviato da Straystudios

Non so se vuoi che questo box sia anche dinamico, cioè con il contenuto che "scorre" da solo.
Intanto per la parte HTML (statica) ti puoi studiare questo mio modellino, realizzi un po' con quali Attributi / Proprietà di Stile puoi/devi giocare; prova a cambiarli, anche:

codice:

<html>
<head>
<TITLE>news box</TITLE>

</head>
<body bgcolor="#909090">

<div align="center">


 <div id="news" 
      style="width: 25%; height: 100px; overflow: auto; 
      text-align: left; padding-left: 10px; background-color: #DEDEDE; border: 1px solid black;"
 >
      <h2>notizia 4</h2>Barablab-bla bla !<hr>
      <h2>notizia 5</h2>Barablab-bla bla !<hr>
 </div>

</div>
</body>
</html>

Con overflow: auto; la barra di scroll apparirà spontaneamente non appena il volume del contenuto lo richieda; se occorre solo quella verticale, quella orizzontale o entrambe.
Con overflow: scroll; appaiono comunque ed entrambe.
Bisogna assegnare delle dimensioni al DIV style="width: ; height: ;" perché l' overflow intervenga; alrimenti, senza dimensioni assegnate, il DIV continua ad espandersi in altezza in funzione del contenuto, ed in larghezza per tutto lo spazio disponibile.

lo stile è quello che voglio !
E se volessi farla dinamica e cioè mettere le notizie da fonti esterne(fogli di testo,immagini, etc...)? Cosa dovrei modificare ?

Grazie mille !

**Straystudios** · 25-02-2009, 10:46

Piacere di ritrovarti.
Per dinamica intendevo lo scroll che si mette in movimento da solo. Prova ad aggiungere questo pulsante (fuori dal DIV delle news):

<input value="scorre" type="button"
 onClick='document.getElementById("news").scrollTop="40";'>

Vedrai la barra di scorrimento che al click, fa un salto di 40 pixel.
Avevo già dato   id="news"   al DIV perché ora JavaScript lo possa trovare con   getElementById("news")
Poi aggiungi anche questo:

<input value="ripete" type="button"
 onClick='document.getElementById("news").scrollTop=document.getElementById("news").scrollTop+10;'>

che ad ogni click riprende il Valore di scrollTop e ci riaggiunge +10 (pixel).
Il prossimo passo sarebbe di far eseguire l' istruzione ad un timer anziché all' onClick del pulsante.

Comunque sì, avevo pensato anche al caso che tu volessi importare le news da file esterno.
Allora può tornarti utile l' Elemeto IFRAME (in-line frame, per distinguerlo dai FRAME).
Salva-con-nome... un' altra copia del codice sopra, lo puoi fare dal Blocco Note di Windows (Start => Programmi => Accessori) lasciando un momento stare Dreamweaver; nomina con estensione .html o .htm   esempio2.html
Però in luogo del DIV ID="News" ci piazzi questo:

<iframe frameborder="0" width="280" height="100" scrolling="auto"
 src="news.txt" style="border: 1px solid black;">
</iframe>

che tramite l' Attributo SRC="indirizzo" carica un' altra pagina (l' iframe diventa una finestra nella finestra).
Nella stessa Cartella o Desktop dove hai salvato   esempio2.html   salvi ora un file di testo nominandolo   news.txt   e te lo vedrai apparire sulla pagina master, nell' iframe.

codice:

notizia 6
Barablab-bla bla !
notizia 7
Barablab-bla bla !

Questo permette di editare le news senza rischiare di fare disastri nel codice della pagina master.
Ovviamente puoi caricare nell' iframe anche un file .html; come pure, pagine dal web.
È buona norma citare la fonte, se visualizzi pagine che non sono le tue.

Devi fare i conti però, con le dimensioni ...

**newentry** · 28-02-2009, 11:00

dovrebbero essere delle ultime domande:
se voglio formattare un testo esterno come devo fare ? cioè per distinguere i titoli dalle notizie
e come faccio linkare ad un altra pagina probabilmente .html ?

**Straystudios** · 28-02-2009, 12:04

Lo nomini e lo salvi con estensione .html anch' esso; ad esempio: news.html
e poi nell' iframe:

<iframe frameborder="0" width="280" height="100" scrolling="auto"
src="news.html" style="border: 1px solid black;">
</iframe>

È in base all' estensione che il Browser, e come esso l' IFRAME, decide come interpretare i caratteri; con news.txt invece, rende come plain text anche i tag di formattazione.

Poi puoi mettere un Link alla pagina "in grande" delle news:

<a href="news.html" target="_blank">Vedi news</a>

lo puoi mettere sia accanto all' iframe, che nello stesso Documento news.html che l' iframe carica.
Fai attenzione che l' iframe è un in-line element quindi per andare a capo ci vuole il <br> ma comunque suppongo che ci sarà un' architettura di TABLE o DIV per dar forma alla pagina.

Il file caricato dall' iframe può anche essere di un altro dominio, ma a questo punto allora va indicato in SRC con l' URL assoluto absolute URL src="http://nomesito.com/directory/news.html"
Quindi può anche essere un' altra persona che aggiorna le news, da altro sito e con altra password, senza pericolo che manometta il sito principale.

**Straystudios** · 28-02-2009, 13:48

Ecco un semplice SCRIPT che fa muovere lo scorrimento di un DIV in automatico.
Non si può applicare direttamente alla barra di scorrimento di un IFRAME, ma dentro al DIV si può piazzare un IFRAME.

<body bgcolor="#909090" onload='run();'>

Il comando onload interviene non prima che la pagina abbia terminato di caricare l' HTML ed allora richiama la function run() che avvia un temporizzatore setInterval(); questo a sua volta attiva la function move() ogni 50 milli-secondi.
L' unità di misura del tempo in JS, è il millisecondo.

codice:

<html>
<head>
<TITLE>auto-scrolling news box</TITLE>

<script type="text/javascript" language="javascript">
<!--
var pos = 0;
var TIMER1;


function move(){
 pos = pos+1;
 document.getElementById("news").scrollTop = pos;
 if(pos >= document.getElementById("news").scrollHeight){pos=0;};
 }

function run(){
 TIMER1 = setInterval('move();', 50);
 }

//-->
</script>

</head>
<body bgcolor="#909090" onload='run();'>

<div align="center">


 <div id="news" 
      onMouseOut='run();' onMouseOver='clearInterval(TIMER1);'
      style="width: 280; height: 100px; overflow: auto; 
      text-align: left; padding-left: 10px; background-color: #DEDEDE; border: 1px solid black;"
 >
      <h2>notizia 1</h2>Barablab-bla bla !<hr>
      <h2>notizia 2</h2>Barablab-bla bla !<hr>
      <h2>notizia 3</h2>Barablab-bla bla !<hr>
      <h2>notizia 4</h2>Barablab-bla bla !<hr>
      <h2>notizia 5</h2>Barablab-bla bla !<hr>
      <h2>notizia 6</h2>Barablab-bla bla !<hr>
 </div>

</div>



</body>
</html>

Discussione: Aiutino per creare delle news dinamiche semplici

Strumenti discussione

Ricerca discussione

Visualizza

Aiutino per creare delle news dinamiche semplici

div style="width: ; height: ; overflow: auto;"

Re: div style="width: ; height: ; overflow: auto;"

scrollTop e IFRAME

Auto-scrolling DIV

Permessi di invio