CSS - Effetti con la proprieta' visibility

February 25th 2010 by Paolo Bindi in: Css | Tags: Css

Prendendo spunto dalla bibbia del CSS ed in particolare da questa "recommandation" http://www.w3.org/TR/CSS2/visufx.html#propdef-visibility vi illustro la proprieta' visibility di un elemento, che unita ad un semplice codice javascript, permette di creare un effetto grafico dinamico.

Le direttive CSS

Chiaramente non posso che iniziare dall'illustrarvi la definizione della proprieta' visibility cosi' come indicate nel W3C. 

'visibility'
    Value:  	visible | hidden | collapse | inherit
    Initial:  	visible
    Applies to: all elements
    Inherited:  yes
    Media:  	visual

La proprieta' definisce la visualizzazione dell'elemento. Come potete vedere, di default questo elemento sara' visibile.
Riporto, dalla versione originale (senza tradurli) il significato dei valori

L'uso (effetto grafico)

Ora la parte piu' interessante. Un piccolo esempio dell'effetto grafico, usando questa proprieta', unita ad un semplice codice javascript.

(ho inserito tutto in un file .html, ma chiaramente andrebbero i codici CSS e Javascript, nei relativi file)

Innanzitutto definiamo i due div contenitori, "container1" e "container2". 

   #container1 { position: absolute; 
                 top: 2in; left: 2in; width: 2in }
   #container2 { position: absolute; 
                 top: 2in; left: 2in; width: 2in;
                 visibility: hidden; }

Dove solo il primo sara' visible (ricordo che e' il valore di default), mentre il secondo lo impostiamo come nascosto (hidden).
Non mi soffermo sul codice html, se non per farvi notare che essendo hidden, il secondo gruppo di informazioni non e' visibile (ma penso sia chiaro...)

Infine creiamo le poche righe di codice javascript, ricondandoci di inserire le chiamate alla due funzioni, all'onclick sul bottone. Chiaramente, e sarebbe superfluo ricordarlo, l'evento potrebbe essere associato all'on-change, on-blur, etc... 

function show(div){

	var oDiv=document.getElementById(div);
	oDiv.style.visibility='visible';

}

function hide(div){
	var oDiv=document.getElementById(div);
	oDiv.style.visibility='hidden';
}

Ecco fatto. :)
Con queste poche righe di codice, avete creato un effetto dinamico tra quelli piu' in voga attualmente.

Di seguito trovate il codice completo da copiare ed incollare in un file .html (ricordo, fino alla noia, che andrebbero divisi i vari codici HTML/CSS/JS) 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD><TITLE>Dynamic visibility example</TITLE>
<META 
 http-equiv="Content-Script-Type"
 content="application/x-hypothetical-scripting-language">
<STYLE type="text/css">
<!--
   #container1 { position: absolute; 
                 top: 2in; left: 2in; width: 2in }
   #container2 { position: absolute; 
                 top: 2in; left: 2in; width: 2in;
                 visibility: hidden; }
-->
</STYLE>

<script type="text/javascript">
function show(div){

	var oDiv=document.getElementById(div);
	oDiv.style.visibility='visible';

}

function hide(div){
	var oDiv=document.getElementById(div);
	oDiv.style.visibility='hidden';
}

</script>

</HEAD>
<BODY>
<P>Choose a suspect:</P>
<DIV id="container1">
   <IMG alt="Al Capone" 
        width="100" height="100" 
        src="suspect1.png">
   <P>Name: Al Capone</P>
   <P>Residence: Chicago</P>
</DIV>

<DIV id="container2">
   <IMG alt="Lucky Luciano" 
        width="100" height="100" 
        src="suspect2.png">
   <P>Name: Lucky Luciano</P>
   <P>Residence: New York</P>
</DIV>

<FORM method="post" 
      action="http://www.suspect.org/process-bums">
   <P>
   <INPUT name="Capone" type="button" 
          value="Capone" 
          onclick='show("container1");hide("container2")'>
   <INPUT name="Luciano" type="button" 
          value="Luciano" 
          onclick='show("container2");hide("container1")'>
</FORM>
</BODY>
</HTML>

Nel caso che riscontrate qualche errore o se volete contattarmi per qualche consiglio o suggerimento, utilizzate la form della sezione contatti

Visible The generated box is visible.
hidden The generated box is invisible (fully transparent, nothing is drawn), but still affects layout. Furthermore, descendants of the element will be visible if they have 'visibility: visible'.
collapse Verificare in questo link http://www.w3.org/TR/CSS2/tables.html#dynamic-effects il significato e gli effetti di questo valore.