Per controllare se un elemento di una pagina web è visibile ci basta controllare i valori delle due proprietà css visbility e display, siano contemporanemente divresi da hidden (visbility) e none (display).
Questa è una seplificazione in quanto un elemento potrebbe essere visibile ma avere uno z-index tale da essere viusalizzato sotto un altro elemento, oppure avere un posizione assoluta e essere posizionato fuori dall’area visibile della pagina, in ogni caso quato diremo risulterà utlie nella maggior parte dei casi.
In questo caso vogliamo estendere jQuery realizzando un apposito metodo da poter utilizzare direttamente sugli elementi selezionati.
Come vedremo l’estensione di jQuery non è complicata, basta infatti la notazione:
$.fn.isVisible = function (){
//corpo della funzione
}
La funzione di cui abbiamo bisogno è:
$.fn.isVisible = function(){
if ($(this).css('visibility')=='hidden' || $(this).css('display')=='none')
return false;
else
return true;
}
Il codice scritto è abbastanza semplice, applicando il metodo ad un elemento avremo true se è visibile o falso altrimenti.
Per applicarla ad un elemento basterà scrivere:
$('elem').isVisible()
Ecco un esmpio di codice funzionante:
In questo esempio controllermo se un elemento è visibile o meno
Io sono nascosto
Abbiamo così analizzato i 3 casi, visibile, display:none e visibility:hidden, bisogna tenere in considerazione che abbiamo utilizzato come selettore l’id di un elemento, quindi l’insime a cui applicare il metodo isVisible() era composto da un unico elemento.
Vediamo ora questo caso in cui passiamo p come selettore:
In questo caso avremo come risultato true in quanto il primo elemento è visibile, generallizzando se l’insieme degli elementi selezionati ha cardinalità maggiore di uno, otterremo come risposta del metodo quella che avremmo ottenuto applicandolo al primo elemento.
Potete vedere qui una demo del funzionamento del metodo jQuery isVisible().