Fix Hidden Element
In questo articolo affrontiamo un problema che può essere riscontrato andando ad usare i metodi width() e height() di jQuery su elementi del DOM nascosti.
Ottenere height e width di un elemento nascosto
Alcune versioni di jQuery hanno problemi a trovare la larghezza / altezza di elementi invisibili del DOM. Se un elemento o un suo genitore ha la proprietà css ‘display’ impostata su ‘none’ $(‘hidden.’).width() restituirà 0 al posto della larghezza effettiva. Il plugin Actual è sufficiente risolvere il problema.
Per utilizzare il plugin basta inserire nella sezione head del documento l’inclusione dello script di jQuery e del plugin jQuery Actual:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="path-to-file/jquery.actual.js"></script>
Di seguito riportiamo alcuni esempi di utilizzo del plugin:
// get hidden element actual width
$( '.hidden').actual('width');
// get hidden element actual innerWidth
$('.hidden').actual('innerWidth');
// get hidden element actual outerWidth
$('.hidden').actual('outerWidth');
Il plugin è molto utile, è possibile scaricarlo da Github:
Riportiamo il link al sito dove poter trovare informazioni aggiuntive sul plugin: dreamerslab
