Creare due div con la stessa altezza via jquery

18 contenuti / 0 new
Ultimo contenuto
Ritratto di ziobudda
Offline
UberDrupalitaliano
Iscritto: 20 Mar 2009
Messaggi: 717
Creare due div con la stessa altezza via jquery

Sto realizzando la nuova grafica di ziobudda.net e mi sono trovato nella situazione di dover gestire l'altezza di due div affiancati, ovviamente dinamici ed ovviamente impossibilitati a definire un qualsiasi valore di minimo o massimo. Meno male che con poche righe di jquery si sistema tutto.

Potete leggere l'intero post qui: http://www.ziodrupal.net/blog/creare-due-div-con-la-stessa-altezza-jquer...

--
Michel 'ZioBudda' Morelli michel@ziobuddalabs.it
Sviluppo applicazioni CMS DRUPAL e web dinamiche (LAMP+Ajax)
Telefono: 0200619074
Telefono Cell: +39-3939890025 -- Fax: +39-0291390660

http://www.ziobuddalabs.it -- http://w

Offline
Drupalista
Iscritto: 3 Gen 2010
Messaggi: 1390

ciao non ho ben capito perchè vuoi farlo in jquery e non va bene in css.
scusami se ho frainteso ma volevo solo capire.

Ritratto di jhl.verona
Offline
Iscritto: 25 Set 2009
Messaggi: 2000

E' necessario JS per il semplice motivo che (per quanto ne so io) non è possibile specificare l'altezza di un div uguale ad un altro usando solo CSS. Ottimo tutorial fra parentesi...

John

Più imparo, più dubito.

Offline
Drupalista
Iscritto: 3 Gen 2010
Messaggi: 1390

grazie john. nel mio caso io nell'header ho 2 div:
il sinistro dove è posizionato il logo del sito e nel destro dove posiziono il blocco login.
questo codice potrebbe aiutarmi nel caso io volessi specificare un'altezza uguale ad entrambi i div?

Ritratto di jhl.verona
Offline
Iscritto: 25 Set 2009
Messaggi: 2000

Certo. Come ha descritto ZioBudda, jQuery legge l'altezza finale dei div, poi setta quello più corto a quello più lungho. Lui ha anche fatto l'esempio per più di 2 div, trovando il massimo di tutti, poi settando tutti i div a questo valore. Semplice ed efficace. Ed impossibile in CSS...

Più imparo, più dubito.

Offline
Drupalista
Iscritto: 3 Gen 2010
Messaggi: 1390

vorrei provarlo john, va inserito nello style o nel page.tpl?

Offline
Drupalitaliano
Iscritto: 28 Gen 2009
Messaggi: 220

asdomar wrote:
vorrei provarlo john, va inserito nello style o nel page.tpl?

Ti crei il file .js e poi tramite drupal_add_js nel file template.php lo carichi.

Ritratto di bohz@drupal.org
Offline
Iscritto: 21 Maggio 2009
Messaggi: 2122

Non per fare il guastafeste, ma per noi pigri (e anche un po' incompetenti) c'è un plugin già pronto: http://www.cssnewbie.com/equalheights-jquery-plugin/
...e anche un modulo per drupal! http://drupal.org/project/equalheights

Offline
Drupalitaliano
Iscritto: 28 Gen 2009
Messaggi: 220

bohz@drupal.org wrote:
Non per fare il guastafeste, ma per noi pigri (e anche un po' incompetenti) c'è un plugin già pronto: http://www.cssnewbie.com/equalheights-jquery-plugin/
...e anche un modulo per drupal! http://drupal.org/project/equalheights

Pigro? Bohz ma se per rispondere hai impiegato tre righe a fronte della mia sola ed unica riga! Sono più pigro di te! ;)

Scherzi a parte ed alla faccia dell'incompetenza sei sempre l'illuminante atlante enciclopedico di d.o e dintorni. :)

Una volta mi fu detta questa massima: "Il vero programmatore è pigro."

Ritratto di Giannazzo
Offline
DrupalNiubbo
Iscritto: 3 Mar 2010
Messaggi: 1

Grazie della segnalazione, molto utile :-)

Offline
Drupalitaliano
Iscritto: 2 Feb 2010
Messaggi: 186

Se avere i due div alti uguali è necessario per esigenze grafiche, nella maggior parte dei casi preferisco usare un div che contenga entrambi i blocchi ed usare un foglio di stile appropriato in modo da evitare javascript.

Ritratto di jhl.verona
Offline
Iscritto: 25 Set 2009
Messaggi: 2000

finex wrote:
...nella maggior parte dei casi preferisco usare un div che contenga entrambi i blocchi ed usare un foglio di stile appropriato in modo da evitare javascript.

Mi piacerebbe molto sapere cos'è questo 'stile appropriato', perchè per quanto ne so io (AFAIK - PQNSI?) non c'è soluzione CSS...
Io opto quasi sempre per un immagine colorato da usare come background url, come descritto da Carlo (bohz) http://www.alistapart.com/articles/fauxcolumns/

John

Più imparo, più dubito.

Offline
Drupalitaliano
Iscritto: 2 Feb 2010
Messaggi: 186

È semplicissimo: una delle tecniche è di usare un div contenitore, due div interni con float, ed un terzo div interno senza float che permette all'esterno di non collassare.

Ritratto di mavimo
Offline
UberAdmin
UberAdmin
Iscritto: 1 Gen 2007
Messaggi: 3277

@finex: si ma poi devi comunque usare un immagine di sfondo per il box pincipale, altrimenti non ne vieni fuori:

____ Main wrapper_____________________________
|  __left col_______    __right col _________  |
| |                 |  |                     | |
| |                 |  |                     | |
| |                 |  |                     | |
| |                 |  |                     | |
| |                 |  |                     | |
| |                 |  |                     | |
| |                 |  |                     | |
| |                 |  |                     | |
| |                 |  |                     | |
| |                 |  |                     | |
| |                 |  |                     | |
| |_________________|  |_____________________| |
|______________________________________________|

per capirci per avere i due box colorati left col e right col non te la cavi se non mettendo un immagine al main wrapper, almeno non mi risulta si possa fare con solo CSS (ma sarei felicissimo di essere smentito). Usando l'immagine di sfondo, però, ti giochi la gestione di larghezze flottanti (per la verità no, ma per mantenerla devi aggiungere un secondo wrapper e esce un pò complessa).

Offline
Drupalitaliano
Iscritto: 2 Feb 2010
Messaggi: 186

Certo, se vuoi lo sfondo fino in fondo metti l'immagine nel wrapper.

Cosa intendi per "larghezze flottanti"?

Ritratto di mavimo
Offline
UberAdmin
UberAdmin
Iscritto: 1 Gen 2007
Messaggi: 3277

@finex: larghezze flottanti = errore mio che intendevo larghezze flessibili, larghezze in percentuale :D

Offline
DrupalNiubbo
Iscritto: 13 Apr 2010
Messaggi: 1

Grazie! È stato molto utile!

Offline
Drupalitaliano
Iscritto: 2 Feb 2010
Messaggi: 186

mavimo wrote:
@finex: larghezze flottanti = errore mio che intendevo larghezze flessibili, larghezze in percentuale :D

ah, ok :-)