[jQuery]Chrome e posizionamento elemento

[kwb]

Ciao a tutti!
Ho sviluppato uno script in JS-jQuery che posiziona al centro ( orizzontalmente ) un div.
Ho dovuto fare questa cosa perchè ho un'immagine e questo div appunto, dentro il "wrapper" diciamo, ciò che li racchiude. La struttura ( semplificata ) è la seguente:

<div class="wrapper">
<img src"blabla.jpg" style="float: left;" id="miaImg"/>
<div id="altro"></div>
</div>

Ora, ho bisogno di posizionare al centro del div wrapper il mio div altro. Chiaramente per farlo devo prima togliere la larghezza dell'immagine, per capire quanto spazio mi avanza per posizionare l'elemento.
Detto ciò, ho scritto questo in JS:

$(document).ready(
		function centerHeaderText(){
			var widthParent = $(".wrapper").width();
			var widthLogo = $("#miaImg").width(); 
			var widthElement = $("#altro").width();
			
			widthParent -= widthLogo;
			$("#altro").css({ "position": "relative", "left": (widthParent-widthElement)/2});
		}
	)

Questo script funziona perfettamente su tutti i browser, eccetto Chrome.
Ho letto che il problema può essere dovuto al fatto che siccome lo script viene eseguito quando il DOM è carico ( ma le immagini non ancora ), allora Chrome fa pasticci...

Prendendo spunto da qui: http://stackoverflow.com/questions/2...idth-in-chrome ho provato anche a cambiare l'evento con $(window).load ma anzi, peggiora la situazione, calcolandomi un valore completamente errato per qualunque browser.

Chiudo dicendo che per altre ragioni, non ho la possibilità di specificare a priori la dimensione dell'immagine ne nel tag html ne nel css ( e non voglio specificarle!! )

Qual è il problema? Come si risolve?

[wingman87]

Se il problema è il caricamento di un'immagine puoi fare una cosa del genere:

var imgSrc = $('imgSelector').attr('src');
var image = new Image();
image.onload = function() {
	//qui la dimensione dell'immagine è disponibile
};
image.src = imgSrc;

Dove "imgSelector" è il selettore per l'immagine che ti interessa.
Questo (se non ho fatto errori) dovrebbe funzionare, non ho usato l'handler load di jQuery perché nella documentazione c'è scritto che con le immagini non è sempre affidabile:
http://api.jquery.com/load-event/

[kwb]

Ho ricontrollato bene le varie dimensioni, facendo stampare a entrambi i browser ( FF e Chrome ) le larghezze che calcolavano per i 3 elementi: l'immagine, il genitore e l'elemento da posizionare.
Fatto stà che le dimensioni dei div risultavano diverse ( usando document.ready ho verificato che Chrome ritorna 0 di larghezza dell'immagine, con window.load invece è corretto ): mi sono poi accorto di una differenza sostanziale, ovvero che Firefox visualizza la barra di scorrimento verticale della pagina sempre, e quindi va a mangiare quei 6px ( 5.5px per l'esattezza ) che non mi tornavano su Chrome, dove invece la barra di scorrimento è sovrapposta e invisibile quando non si scrolla.

Il problema si è quindi risolto sostituendo window.load a document.ready

Un'ultima cosa, come faccio a rieseguire una funzione ( ad esempio questa per il posizionamento del div ) se ad esempio viene ridimensionata la finestra del browser? Oppure se si cambia la visualizzazione su un tablet da portrait a landscape?

Kwb

[wingman87]

Per il ridimensionamento esiste l'evento resize di jQuery:
http://api.jquery.com/resize/

Per il cambio di orientamento sono meno ferrato ma dovrebbe esistere l'evento orientationchange, prova a vedere questo link:
http://davidwalsh.name/orientation-change

[kwb]

Originariamente inviato da wingman87

Per il ridimensionamento esiste l'evento resize di jQuery:
http://api.jquery.com/resize/

Perfetto, funziona!