Fare internet

E' come il lego, più pezzi ho più sono allegro
Seguci su Facebook Seguici su Twitter Iscrivita ai nostri Feed      Mandaci una mail

jQuery: sapere se un elemento è visibilie.

Scritto da Fare-internet il 6 novembre 2010 condividi condividi

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:

<p id="miVedi">In questo esempio controllermo se un elemento è visibile o meno</p>
<form name="nomeForm" method="get" action="action">
    <input type="button" value="Controlla Visibile"
      onclick="alert($(‘#miVedi’).isVisible())" />

    <input type="button" value="Controlla display none"
      onclick="alert($(‘#none’).isVisible())" />

    <input type="button" value="Controlla visibility hidden"
      onclick="alert($(‘#nascosto’).isVisible())" />

</form>
<p id="none" style="display:none">A me non mi vedi</p>
<p id="nascosto" style="visibility:hidden">Io sono nascosto</p>

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:

<form name="nomeForm2" method="get" action="action">
    <input type="button" value="Tutti i paragrafi" onclick="alert($(‘p’).isVisible())" />
</form>

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().

Twitter