Tag Archives: opera

Opera9, il posizionamento relativo degli elementi e jQuery

Avvertenza: le porzioni di codice riportate in questo post non corrispondono più alla reale implementazione iniziale nel blog. Ragioni di manutenibilità, compatibilità o mera obsolescenza ne hanno reso necessaria la rimozione.

Esigenza:

Inserire dinamicamente un’icona, posizionarla in maniera relativa (position: relative;) senza conoscere le dimensioni del container. E fare in modo che funzioni anche su Opera

relatively_positioned

Si lo so, il titolo è un pochino ‘criptico’ ma i miei colleghi developers e designers forse intuiscono che Opera9 è un browser e ‘posizionamento relativo’ ha a che fare coi CSS.

Ancora non ci siamo? Mi riferisco al bug in cui mi sono imbattuto in relazione al posizionamento ‘relativo’ di un elemento in un altro elemento di cui non è dichiarata la larghezza.

Prendiamo come esempio due siti che utilizzano questa tecnica, di apporre una gif sopra alla thumbnail (quindi posizionato in maniera relativa) di un video: YouTube e MTV; anche io volevo la mia iconcina enlarge img icon ma su questo mio blog, le cose non sono così semplici.

  1. Le immagini non sono necessariamente larghe sempre 150px
  2. Il wrapper del ‘blocco’ immagine + ombra non ha dimensione fissa
  3. Vorrei evitare di ’sporcare’ il codice inserendo “a mano” l’icona
  4. Inoltre poichè le immagini con ombra non hanno sempre la stessa dimensione (io le creo da Photoshop larghe 150px, ma come avevo spiegato l’ombra è dinamica e prescinde dalle dimensioni) ed il loro container div non ha dimensione definita, position:relative non funziona su Opera9, che mette l’icona spostata alla destra delle immagini, invece io le voglio sopra alla thumnail

fake_positioned_twoCome potete notare se fate click sull’immagine, questa si apre nella sua versione originale (non è ingrandita, in realtà è sempre la thumbnail) e non ha l’icona.
Ok, l’icona enlarge img icon è stata aggiunta a runtime con jQuery.
Ma vi ricordate che ho detto? Opera vuol sapere le dimensioni del container altrimenti per lui position:relative non funziona correttamente.

Ok allora tramite il ns. jQuery possiamo sapere quanto è “largo” qualcosa:

1
$('img.dropshadow').width();

Questo mi ritorna la larghezza dell’immagine nel link (la thumbnail).

1
var tbWrapperWidth = ($('img.dropshadow').width() + 34);

Qui creo una variabile che vale la larghezza dell’immagine + il margine necessario per staccare immagine ed ombra dal paragrafo di testo.

1
$('div.tb-wrapper').css({ width: tbWrapperWidth });

Qui assegno al div che mi avvolge tutto, uno stile in linea che definisce la larghezza in pixel tipo: style=”width: 184px;”
E qui è il trucco. Ora Opera conosce la larghezza del wrapper e mi posiziona l’icona correttamente.

Il resto del codice, tramite il metodo .prepend(content) di jQuery aggiunge la mia icona ed il gioco è fatto.

1
2
3
var tbWrapperWidth = ($('img.dropshadow').width() + 30);
$('div.tb-wrapper').css({ width: tbWrapperWidth });
$("a.thickbox").prepend("<img class="tb-larger" alt="larger view" src="http://www.gcmingati.net/wordpress/wp-content/uploads/tblarger.gif" />");

Enjoy!