I DIV A SCOMPARSA

Div a scomparsa

In alcuni casi potrebbe essere necessario nascondere aree del sito, perchè utilizzate soltanto in alcune occasioni. Un esempio potrebbero essere i campi userid e password che vengono utilizzati per autenticarsi. Nascondiamo questi campi con un link, che occupa meno spazio nella pagina, se l'utente decide di autenticarsi basterà cliccare sul link e come per magia appariranno il campi userid e password da riempire.

Nella prima parte del codice ci siamo limitati a costruire il form con i campi userid e password, annidandoli nei tag DIV

<div id="divanimato" style="display:none" >
<form name="form1" method="post" action="">
    <table width="12%" border="1">
      <tr valign="top">
        <td width="4%">
          <div align="right">Userid </div>
        </td>
        <td width="96%">
          <input type="text" name="textfield">
        </td>
      </tr>
      <tr valign="top">
        <td width="4%" height="2">
          <div align="right">Password  </div>
        </td>
        <td width="96%" height="2">
          <input type="password" name="textfield">
        </td>
      </tr>
      <tr valign="top">
        <td width="4%" height="2">  </td>
        <td width="96%" height="2">
          <input type="submit" name="Submit" value="Invia">
        </td>
      </tr>
    </table>

</form>
</div>

Ecco il link per richiamare la finestra a scomparsa contenente i form

<a target="_blank" href="javascript:;" onmousedown="if(document.getElementById('divanimato').style.display == 'none'){ document.getElementById('divanimato').style.display = 'block'; }else{ document.getElementById('divanimato').style.display = 'none'; }"><b>Clicca qui per vedere l’effetto Web 2.0</b></a>

Visualizza qui un esempio, cliccando sul link sottostante, vedremo apparire la form con i campi di autenticazione, cliccando nuovamente il link i campi spariranno.

Clicca qui per vedere l’effetto Web 2.0

Scarica qui un esempio

Commenta questo articolo Visualizza i commenti (-0,5)

Torna indietro

Userid
Password

WWW.ROOTWEB.IT

Div a scomparsa