Comparsa teto in verticale

[erbedo]

Ciao a tutti
sto usando scriptaculous su un sito, e devo far comparire una scritta dal basso verso l'alto. Non esiste un effetto gia funzionante, cosi ho provato diverse soluzioni, ma nessuna e' andata a buon fine.

Qualcuno conosce qualche scorciatoia?

Grazie
Ciao

[artorius]

in che senso comparire una scritta dal basso verso l'alto? Tipo slide, ma dal basso?

[erbedo]

Si esattamente, una sorta di slide che pero parte dal basso..

[artorius]

allora, è un problema che ho affrontato un po' di tempo fa:

Per effettuare l'effetto slide hai due opzioni: o effettui una modifica dell'altezza, da 0 all'altezza voluta, in modo che il div sembri crescere, o dei margini dell'elemento, cioè metti l'elemento in position: absolute; poi modifichi il margin del lato da cui lo vuoi far spuntare, da -(dimensione div) a 0.

Io ti consiglierei il primo, dato che è più semplice da gestire, il secondo richiedei di mettere il div in un altro div cornice con overflow hidden e grandezza fissa. Quello che devi fare è impostare la proprietà height a 0 ed effettuare l'effetto di aumentarla.

Ora, cosa succede facendo così? Il div sembra crescere, certo, ma, dato il funzionamento di HTML come documento verticale, dall'ALTO, il div sembra crescere dall'alto verso il basso.

Per fare il tuo effetto devi modificare 2 proprietà contemporaneamente: altezza e margine superiore:

l'idea è che il div non parta dall'alto, quindi quando l'altezza è 0 il margin-top sarà = all'altezza originale dell'elemento. L'effetto a questo punto sarà di portare l'altezza alla originale e il margin a 0:

<div id="MyDIV" style="height: 0; margin-top: 100px;">
    Questo div deve essere alto 100px; una volta espanso
</div>

a questo punto attivi il morph con la chiamata rapida:

$('MyDIV').morph('height: 100px; margin-top: 0px;');

Quello che vedrai sarà il div crescere dal basso verso l'alto

[erbedo]

Ho provato a fare come hai detto, pero in realta il div non cresce, ma rimane fisso. Si sposta pero dal basso verso l'alto, mentre invece io volevo che partisse da una immaginaria linea e crescesse. Mi ero spiegato male?

Guarda, sto cercando di realizzare l'effetto qui: http://www.bononiacommunication.it/

[erbedo]

Allora quel problma l'ho risolto, perche ho messo overflow: hidden.
L'ultima cosa che mi rimane da fare e' far comparire l'altra scritta in slide verso il basso. Il problema, come si puo vedere, e' che mi si sovrappongono i testi.
Sempre usando Morph, imposto gli attributi come prima pero aumento l'altezza verso il basso, ma si sovrappone.

Idee?

[erbedo]

Allora, ho usato Morph, semplicemente aumentando l'altezza, e su firefox funziona.

Cioe che non capisco, che pero a questo punto non so se e' sempre colpa di Javascript o html, e' che su firefox funziona tutto come vorrei io, ma su Safari invece mi taglia la fine di un div e mi aumenta la spaziatura tra i due div.

Dove posso sbattere la testa?

[artorius]

mi sa di un problema di CSS più che JS

[erbedo]

Eh infatti sembrava anche a me. Cosa posso guardare secondo te?

Perche l'overflow e' hidden di modo che il testo compaia pian piano, e l'altezza direi che e' a posto. Sono le uniche due cose che mi vengono in mente che possano disturbare il testo, o mi scordo qualcosa?

[artorius]

non lo hai pubblicato da qualche parte che provo a darci un'occhiata?