div con effetto drop down

[legal-x]

salve a tutti,

sto realizzando dei box (con i div) contenenti news in forma breve ....quindi tagliando il testo con i punti ... (in asp). Mi piacerebbe fare un effetto che, cliccando su "continua" espandesse con un effetto grafico il DIV, permettendo la lettura completa della notizia, e facendo scomparire il testo "continua" a favore magari di un "chiudi" finale ...

non mi ricordo di aver visto qualcosa del genere in giro ...mi potreste aiutare ?

Grazie 1000 come al solito

[artorius]

beh, devi implementare l'effetto grafico con una qualunque libreria (jQuery, Mootools, Scriptaculous).
Nella pagina che fai devi mettere i div con altezza fissa e overflow:hidden nel css.
Quando attivi l'effetto, semplicemente, porti l'altezza a sufficienza per mostrare tutto il contenuto del div che è l'articolo. Per far scomparire basta che trovi il link "Leggi tutto" e lo metti in display:none prima di lanciare l'effetto, il link Chiudi, lo metti in fondo al div e sarà visibile solo se l'utente clicca su Leggi tutto (ed amplia il div). L'effetto contrario deve riportare l'altezza del div alla originale, poi mettere display:inline; al link "leggi tutto"

[legal-x]

in effetti stavo provando ad utilizzare Mootools ...l'unico problema è che non sò quant'è altezza max del div, in quanto la notizia è gestita dinamicamente in Asp

[artorius]

mmm, puoi mettere un limite ai caratteri e calcolarti quant'è la massima altezza che il div può raggiungere. Altrimenti, puoi inserire un link, all'interno del div e calcolarti l'altezza per quello:
per esempio

<div class="News">
   <h2 class="Inline">Titolo </h2> [url="#"]Leggi Tutto...[/url]
   


      Blablabla
      Blablabla
      Blablabla
      ...
   </p>
   [url="#"]Chiudi[/url]
</div> 

metti come CSS

.News{
   overflow:hidden;
   height: 20px;
}
.Inline{
   line-height: 20px;
   display: inline;
} 

poi nel JS

var closeHeight = null;
window.addEvent('domready', function(){
   $$('div.News').each(function(item){
       if(!closeHeight)
          closeHeight = item.getStyle('height').toInt();
       item.getElement('a.Opener').addEvent('click', function(){
          var height = this.getParent().getElement('a.Closer').getPosition(this.getParent()).y + this.getParent().getElement('a.Closer').getSize().y;
          new Fx.Tween(this.getParent(), {duration: 300, onComplete: function(){this.element.getElement('a.Opener').setStyle('display', 'none');}}).start('height', height);
       });
       item.getElement('a.Closer').addEvent('click', function(){
          new Fx.Tween(this.getParent(), {duration: 300, onComplete: function(){
             this.element.getElement('a.Opener').setStyle('display', 'inline');
          }}).start('height', closeHeight);
       });
   })
}); 

Dovrebbe andare.
(per non impazzire a leggere il codice, ora te lo spiego)

Dunque, sebbene non posso sapere a priori quanto devono alti di div conteneti la news quando sono aperti, posso sapere quanto sono alti quando sono chiusi (che è l'altezza che setto con il CSS).
Dato questo prerequisito, come calcolo l'altezza del div?
Lo calcolo, sommando lo spazio dall'inizio del DIV fino al tag anchor che chiude il div (quel <a class="closer">) all'altezza del anchor stesso, quindi:
altezza div = spazio tra top div e top a + altezza a

Detto questo cosa fa la funzione:

var closeHeight = null;

Non so a priori che altezza minima avranno i div, quindi me la calcolerò una volta e poi me la salvo

window.addEvent('domready', function(){

Quando il dom è pronto definirò gli eventi

$$('div.News').each(function(item){

Certo tutti i div con class = "News" e per ognuno di essi

if(!closeHeight)
   closeHeight = item.getStyle('height').toInt();

Per il primo div (salvato in item) mi salvo l'altezza (sono tutte uguali di base), per gli altri non mi serve

 item.getElement('a.Opener').addEvent('click', function(){

Per ogni div (in item) ottengo il primo elemento figlio con tag a e class Opener e gli definisco un evento di tipo onClick

var height = this.getParent().getElement('a.Closer').getPosition(this.getParent()).y + this.getParent().getElement('a.Closer').getSize().y;

E questo è il punto focale: il calcolo dell'altezza del div.News: nel punto dove chiamo l'istruzione, lo scope è l'elemento a.Opener (quindi con this ottengo a.Opener), del this trovo il padre (quindi il div.News), su questo trovo l'elemento a.Closer figlio di div.News.
per qeusto elemento calcolo il getPosition() sulla base del padre e ne ottengo la y (cioè lo spazio in verticale).
Quindi la parte di sinistra della somma mi trova:

{a.Closer} .getPosition( {div.News padre di a.Closer} )

Se ti ricordi lo schema HTML

<div class="News">
...
Chiudi
</div>

Con
{a.Closer} .getPosition( {div.News padre di a.Closer} ) .y
trovo lo spazio che intercorre tra il top dell'elemento passato per argomento di gePosition() e il top dell'elemento su cui chiamo getPosition().

Per questo quello che faccio dopo e sommare l'altezza dell'elemento a.Closer e trovare l'altezza effettiva di div.News.
Spero di essere stato chiaro

 new Fx.Tween(this.getParent(), {duration: 300, onComplete: function(){this.element.getElement('a.Opener').setStyle('display', 'none');}}).start('height', height);});

Istanzio l'effetto sul div.News (this.getParent()), e lancio l'effetto di modifica dell'altezza da quant'è al momento a quanto ho calcolato la riga sopra, ho aggiunto un istruzione per mettere in display:none a.Opener alla fine dell'effetto.

item.getElement('a.Closer').addEvent('click', function(){

Aggiungo l'effetto onClick sull a.Closer figlio del div.News.

 new Fx.Tween(this.getParent(), {duration: 300, onComplete: function(){this.element.getElement('a.Opener').setStyle('display', 'inline');}}).start('height', closeHeight);});

Questo istanzia e lancia l'effetto di aumento dell'height di div.News (this.getParent()) da quanto è in quel momento a closeHeight che ho calcolato all'inizio. Vi ho aggiunto onComplete dell'effetto l'istruzione per ritornare visibile il link a.Opener.

Spero di essere stato chiaro