Nascondere un div dopo un tot numero di secondi spesso puo essere utile nei nostri siti web, oggi vi spieghiamo come fare in pochi semplici passi. Partiamo come di consueto dal codice xhtml da implementare.
<div id="div">
<p>div da nascondere</p>
</div>
Diamogli un minimo di css di presentazione, giusto per far si che venga visualizzato sulla pagina.
#div {
background-color:red;
width:100px;
height:100px;
}
Infine scriviamo il codice javascript da inserire tra i tag head che gestisce la scomparsa del div. Il tutto gestito dalla proprietà visibility e dalla funzione setTimeout. Vi ricordiamo che la proprietà visibility consente all’elemento a cui viene applicata di occupare lo stesso spazio che occuperebbe di solito ma restando del tutto invisibile.
function chiudi(){
document.getElementById('div').style.visibility='hidden';
}
{setTimeout('chiudi()',4000) }
Ok perfetto, ma ti faccio una domanda.
ma se io ho più pulsanti collegati a funzioni nella pagina html che con style.display nascondono o mostrano vari div, perché tornando la seconda volta sulal funzione “chiudi” non va più?
Ti allego il codice:
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #b33109;
}
function display_block_home() {
document.getElementById(‘p1b’).style.display = “none”;
document.getElementById(‘p2b’).style.display = “none”;
document.getElementById(‘p3b’).style.display = “none”;
document.getElementById(‘centroh’).style.display = “block”;
document.getElementById(‘centro1_1′).style.display = “none”;
document.getElementById(‘centro1_2′).style.display = “none”;
}
function display_block1() {
document.getElementById(‘p1b’).style.display = “block”;
document.getElementById(‘p2b’).style.display = “none”;
document.getElementById(‘p3b’).style.display = “none”;
document.getElementById(‘centroh’).style.display = “none”;
document.getElementById(‘centro1_1′).style.display = “block”;
document.getElementById(‘centro1_2′).style.display = “none”;
}
function chiudi(){
document.getElementById(‘centro1_2′).style.display=’block’;
document.getElementById(‘centro1_1′).style.display=’none’;}
{setTimeout(‘chiudi()’,10000)
}
function display_block2() {
document.getElementById(‘p1b’).style.display = “none”;
document.getElementById(‘p2b’).style.display = “block”;
document.getElementById(‘p3b’).style.display = “none”;
document.getElementById(‘centroh’).style.display = “none”;
document.getElementById(‘centro1_1′).style.display = “none”;
document.getElementById(‘centro1_2′).style.display = “none”;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
Grazie
Salve,
come primo passo, ho implementato una funzione che va a raccogliere le singole che chiudono i tutti i div tranne quello preso in questione:
anziché fare una funzione per bottone, crei semplicemente una variabile, che sarà il div che NON scomparirà.
la funzione ‘chiudi’ l’ho lasciata invariata.
Ora, non hai postato l’html, quindi ne ho creato uno di prova intuendo il risultato:
http://www.megaupload.com/?d=7KLZ8551
Il risultato è quindi che cliccando un bottone, viene richiamata la funzione fnCloseAll che chiude tutti i div tranne quello settato nella variabile.
Il settimo pulsante attiva nuovamente la funzione chiudi, già avviata una volta dal setTimeout.
Se sorgono ulteriori problemi, o non ti è chiaro qualcosa, non farti scrupoli e chiedi pure