Footer che si apre a cascata

[mikele74]

Ciao a tutti, volevo sapere se è possibile fare un footer che si apra a cascata quando clicchi sopra al bottone al centro.

in pratica dovrebbe stare chiuso ed aprirsi solo se uno ci clicca sopra... in quel caso si aprirebbe in basso mostrando le informazioni.

Mi è capitato più volte di vedere cose simili, ora non mi ricordo il nome dei siti purtroppo... ma non erano in flash.

avete qualche indirizzamento da darmi?
ho cercato sul forum ma non ho trovato niente in merito..

Grazie a tutti in anticipo.

[artorius]

vuoi dire con un effetto di crescita?

tipo questo http://demos.mootools.net/Fx.Slide ?

[mikele74]

esatto... il principio di funzionamento è proprio questo! Grazie...
per caso conosceresti qualche altro esempio da poter guardare? Così confronto quello che potrebbe esser meglio per me...
Grazie ancora.. complimenti.. sei preparatissimo!

[artorius]

mah, la teoria è semplice:

hai un div con height = 0;

fai un ciclo ogni millisecondo che aumenta di 1 px (o più a seconda dei casi) l'altezza del div.

il risultato: il div sembra crescere.

[mikele74]

mmmmmm meglio partire dall'altro esempio eh eh...
comunque è possibile sfruttare l'effetto dentro una tabella?
se inserisco un div dentro ad una cella...?

Grazie, ciao.

[artorius]

beh, si, devi impostare il CSS in modo corretto:

tipo:

<style type="text/css">
	#MyDiv{
		height: 120px;
		background-color: #7f7f7f;
	}
</style>
<table width="100%">
	<tr>
		<td valign="top" style=" overflow: hidden;">
			<div id="MyDiv">
				HAHAAH
			</div>
		</td>
	</tr>
	<tr>
		<td>
			<input type="button" value="Clicca" id="FooterToogler"/>
		</td>
	</tr>
</table>

Poi generi un oggetto di Fx.Slide:

var slide;
window.addEvent('load', function(){
	slide = new Fx.Slide('MyDiv');
	slide.hide();
	
	$('FooterToogler').addEvent('click', function(e){
		e.preventDefault();
		slide.toggle();
	});
})

Il pulsante attiva e disattiva il footer.

[mikele74]

ti ringrazio.. nei prossimi giorni faccio delle prove.. se ho necessità o dubbi posto qui!

intanto grazie nuovamente...