Avete presente l’effetto di quei div, che vengono esplosi nelle pagine web?
In pratica il div esploso fa andare a capo il contenuto della pagina, al fine di focalizzare l’attenzione su altre informazioni secondarie come dei tab, pubblicità o semplicemente approfondimenti aggiuntivi.
Andiamo a vedere come creare un div animato
Per questo tipo di sviluppo useremo un JavaScript: Animate Colspan Div
La cosa importante è avere una pagina con il seguente DOCTYPE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
- Andiamo a richiamare il JavaScript tra i tag <head>…</head>
<script type="text/javascript" src="animatedcollapse.js"></script>
Vi ricordo che qualora spostiate il file JS in sottocartelle di inserite il percorso esatto esempio JS/animatedcollapse.js
- A questo punto creiamo il collegamento al pulsante che farà esplodere il div
<a href="javascript:collapse2.slideit()">Visibile/Invisibile</a>
Realizzato il collegamento al JavaScript andremo a creare il nostro div nascosto
<div id="cat" style="background-color: #99E0FB;">
<div style="padding: 0 5px">
<p align="center" class="Stile1">QUESTO DIV PRENDE LE DIMENSIONI <br />
A SECONDA DEL CONTENUTO DEL DIV </p>
</div></div>
<script type="text/javascript">
var collapse2=new animatedcollapse("cat", 500, true)
</script>
Il nostro contenuto sarà dentro un div di id=”cat” che verrà preso in considerazione dal Js successivo per impostare il tempo dell’animazione di esplosione.
Ovviamente non sta a me ricordarvi, che il div può contenere qualsiasi oggetto testo, immagine, flash e che può essere personalizzato tramite CSS esterni nel colore, dimensioni e posizioni.
22 Commenti
complimenti …. bello e funziona anke molto bene …. di facile utilizzo …. senti ma se volessi che il div cmparisse … come si può dire … in orizzontale …. cioè al posto che dal”alto verso il basso da destra verso sinistra …..
Si dovrebbe modificare il file .js e dove si impostano parametri per l’altezza height sostituire con la larghezza width
Dovrei averci azzeccato :)
è no anke io ci avevo pensato … sono andato sul file .js e ho fatto un cerca e sostituisci …. ho sostituito tutte le parole height con width … ma quqando provo a cliccare su visibile/invisibile mi viene fuori una finestra di avviso con il seguente mess : please wait until document has fully loaded then click again …
an e volevo anke chiederti una cosa … solo che nn so dove postarla … io volevo crare tipo un menu del tipo | home | chi sono | ecc | …. come faccio a fare in modo che quando vado sopra con il mouse su una di queste parole la parola scenda e sparisca e intanto ne compaia un’altra dall’alto … ??? del tipo vai sopra home e vedi home che scorre verso giu ma man mano che scende sparisce un pezzo e da sopra ricompare home …. xo nn in flash …. javascript … oppure boh ….
Giulio forse ho capito cosa intendi, diciamo che a farlo a mano ci vorrebbe tempo, invece con qualche programma potresti riuscirci.
Ti consiglio Sothink DHTMLMenu
Crei facilmente dei menu accessibili a tutti i browser
saluti
Ciao Giulio, ma se voglio che il div sia aperto come stato iniziale, come devo fare?
grazie mille..
Basterebbe inserire nel body la funzione collapse2.slideit()
in questo modo
<body onload="collapse2.slideit();">Il problema è che la pagina deve essere caricata per far partire la funzione e quindi ti darebbe errore…
cia julius tu parli di ..” che il div può contenere qualsiasi oggetto testo, immagine, flash ..” beh ho provato a mettere una img ed e’ ok, sparisce e ricompare…
ma con un oggetto flash, mi rimane in “primo piano” anche se dovrebbe scomparire.. :-(
Ho inserito un file flash nel tuo file di esempii e da’ lo stesso “errore”…. tu ne sei a conoscenza? si puo’ risolvere?
GRAZIEEEEEE!!!!!!!!!!!!!!!!!
Ciao Julius, ho seguito le tue indicazioni….le immagini all’interno dei div animati non hanno nessun problema…ma se all’immagini do un effetto (il glossy) mi appare in sovrimpressione e non si chiude come dovrebbe.
Hai un’idea per come risolvere questo problemino?
Ti ringrazio.
Ciao ciao
ah dimenticavo!!!!!
il problema me lo da solo con l’insopportabile explorer (firefox e safari nessun problema)
Ciao Julius,
ma se dovessi applicare l’effetto a 3 div nella stessa pagina invece che ad uno solamente?
Come posso fare?
@nextart: ciao caro, stai inserendo flash con SWFObject?
@Giacomo: verifico
@Dario: utilizza la stessa sintassi cambiano le classi e i riferimenti
Ciao, volevo chiederti se era possibile, modificare il file, in modo che si apra in orizzontale e non in verticale, come posso fare? c’è un modo?
o non è possibile?
@WerwolfeCiao Juilius sono riuscito a far funzionare in orizzontale lo script, sostituendo height con width e funziona, ma il div, l’animazione del div inizia dal centro, non è possibile farla iniziare da destra? o sinistra? ti ringrazio sempre in anticipo per la risposta
Ciao Juilius, non riesco a sfruttare questo script con il tuo JD FLV Player, nel senso che in Firefox se il player è contenuto nel div nascosto, viene cmq. visualizzato benchè il div sia ancora “compresso”…mentre in IE tutto funziona correttamente! Sto impazzendo, puoi aiutarmi?!?!?
Grazie!
Si possono realizzare 2 div animati nella stessa pagina web?
Si può far aprire il div dal basso verso l’alto?
grazie!
ciao e complimenti!
Ciao per creare questo effetto qui cosa bisogna fare?
http://www.zaum.co.uk/about.htm
ho provato cosi ma non funziona:
Web design
QUESTO DIV PRENDE LE DIMENSIONI
A SECONDA DEL CONTENUTO DEL DIV
Web design
QUESTO DIV PRENDE LE DIMENSIONI
A SECONDA DEL CONTENUTO DEL DIV
var collapse2=new animatedcollapse(“cat”, 500, true)
var collapse1=new animatedcollapse(“cat”, 500, true)
@ luca:
hei Luca, hai provato a dare un occhiata qui: http://api.jquery.com/slideDown/
dacci il link della tua prova e si da un’occhiata!
Ciao… ho provato il tutto e funziona…
Però se lascio aperto un div e poi ricarico la stessa pagina (F5) il div rimane aperto..come posso evitare questa cosa?
Grazie
se lascio aperto un div e poi ricarico la stessa pagina (F5) il div rimane aperto..come posso evitare questa cosa?
Grazie