Nascondere un elemento dopo tot secondi con css e javascript

Abracadabra Nascondere un div dopo un tot numero di secondi spesso puo essere utile nei nostri siti web, oggi vi […]
Nascondere un elemento dopo tot secondi con css e javascript

Abracadabra

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.

HTML

Partiamo come di consueto dal codice xhtml da implementare.

<div id="div">
    <p>div da nascondere</p>
</div>

CSS

Diamogli un minimo di css di presentazione, giusto per far si che venga visualizzato sulla pagina.

#div {
    background-color:red;
    width:100px;
    height:100px;
}

JS

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) }
  • pippo

    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.

    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 🙂

  • pino

    ciao, ma se io volessi cancellare il div.

    ti spiego meglio. ho uno slideshow in jquery dove scorrono 6 immagini. sto cercando di eliminare il primo div (la prima immagine, quindi) dopo un tot di tempo. di fatto, dal secondo giro di immagini il primo div, quindi la prima immagine, non dovrebbe più esserci.

    il sistema che hai mostrato nel post mi permette solo di nasconderlo, quindi quando lo slide riparte ho un buco bianco di tre secondi. come posso rimediare?

    grazie

  • Ciao Pino, non sono sicuro di quello che vuoi fare, comunque il metodo jquery per eliminare un elemento DOM è $.remove();

    Nel nostro caso la funzione diventa (visto che non si può unire DOM e jquery):

    function chiudi(){
    $(‘div’).remove();
    }

  • Ciao, scusail disturbo oggi cercando una soluzione a quello che vorrei creare sul mio sito, dopo varie ricerche mi ha portato sul tuo sito, ma naturalmente io nn riesco a fare cio’ che voglio e ossia…prendere l’esempio da questo sito in alto a destra dove c’e’ la temperatura con l’icona accanto, la parte sottostante come fanno a scorrere quelle scritte ad apparirne prima una e poi le altre a giro, ecco il sito in questione: h**p://www.nordicweather.net/index.php? , il mio invece dove sono riuscito a fare solo quello che si vede e’ qui: h**p://www.ombarcellonapg.tk/wdisplay/CondizioniCorrenti.php

    Grazie anticipate per l’aiuto.

  • Ciao @marco 🙂

    Prova con questo codice che abbiamo messo per te:

    http://www.bisquits.net/c/li-slideshow/1449.html

Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github