Visualizzazione dei risultati da 1 a 8 su 8
  1. #1
    Utente di HTML.it
    Registrato dal
    Nov 2005
    Messaggi
    168

    autochiusura <div> dopo N secondi

    Ciao a tutti!
    Ho il seguente codice che mi apre un pop-up DHTML all'interno del quale è incastonato un <IFRAME>:

    codice:
    <style type="text/css">
    #sponsor { position: Absolute; top: 230px; left: 250px; width: 250px; height: 250px; }
    /*#sbord { border: Solid 1px #000000; }*/
    div.chiudi { width: 342px; text-align: Right; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #FFFFFF; font-weight: Bold; text-decoration: None;}
    a.sponsor, a.sponsor:hover { color: #FFFFFF; font-weight: Bold; text-decoration: None; }
    </style>
    <div id="sponsor">
    <div class="chiudi">CHIUDI POP-UP</div>
    <div id="sbord"><iframe src=popup.asp scrolling=no width=342 height=350 frameborder="0"></iframe></div>
    </div>
    Tutto bene, funziona tutto, il problema è che vorrei che il <div id="sponsor"> (con tutto ciò che contiene all'interno) venga chiuso (o reso "hidden") in automatico dopo X secondi, da solo, senza che venga cliccato alcun link.

    Potete gentilmente aiutarmi a trovare una soluzione? Come posso modificare il codice? Ho provato ad implementare un javascript con setTimeout ma senza riuscirci, poi mi sono accorta della proprietà "visibility" (sono una neofita di css/dhtml/js...) e così mi è sorto il dubbio che forse si può fare in qualche altro modo...

    Vi ringrazio in anticipo per l'aiuto che potrete darmi!

    tizz

  2. #2
    Utente di HTML.it
    Registrato dal
    Sep 2001
    Messaggi
    21,188
    Se vuoi far sparire un oggetto, devi dargli la proprieta`:
    display: none;

    visibility:hidden fa lasciare il posto, per cui potrebbe avere controindicazioni.

    Non conviene usare lo stesso nome per due oggetti: sponsor e` l'id di un oggetto: non definire una classe con lo stesso nome.

    Attenzione alla sintassi: le maiuscole non si possno mettere a caso.

    Per il link, ecco il codice:
    CHIUDI POP-UP

    Per la chiusura automatica, devi inserire lo stesso codice in un timeout da chiamare all'onload della pagina:

    <body onload="setTimeout('document.getElementById(\"spon sor\").style.display=\"none\" ', 10000);">

    Nota l'uso di apici e virgolette: e` molto delicato.
    Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
    No domande tecniche in messaggi privati

  3. #3
    Utente di HTML.it
    Registrato dal
    Nov 2005
    Messaggi
    168

    ancora non funge... :-(

    Ciao Mich,
    ti ringrazio molto per la risposta, ho provato ad applicare la soluzione da te suggerita ma ottengo 2 inconvenienti:
    1. non funziona l'autochiusura del body onload (ok quella del link chiudi)
    2. la struttura della pagina (table di 3 colonne, le cui caratteristiche interne vengono gestite da un css esterno) mi viene fuori completamente stravolta, è sparita la testata, il menu da sx è passato in alto, la colonna centrale sotto, e ancora sotto la colonna dx... (togliendo l'onload dal body la struttura torna alla normalità...)
    Sinceramente non capisco... per completezza, riporto di seguito il codice aggiornato, chissà che nel copia+incolla non abbia combinato qualche guaio...

    codice:
    <style type="text/css">
    #sponsor { position: Absolute; top: 230px; left: 250px; width: 250px; height: 250px; }
    #sbord { border: Solid 1px #000000; }
    div.chiudi { width: 342px; text-align: Right; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #FFFFFF; font-weight: Bold; text-decoration: None;}
    a.sponsor, a.sponsor:hover { color: #FFFFFF; font-weight: Bold; text-decoration: None; }
    </style>
    <div id="sponsor">
    <div class="chiudi">CHIUDI POP-UP</div>
    <div id="sbord"><iframe src=popup.asp scrolling=no width=342 height=350 frameborder="0"></iframe></div>
    </div>
    
    </HEAD>
    
    <body topmargin="0" leftmargin="0" rightmargin="0" marginwidth="0" marginheight="0" onload="setTimeout('document.getElementById(\"sponsor\").style.display=\"none\" ', 3000);">

  4. #4
    Utente di HTML.it
    Registrato dal
    Sep 2001
    Messaggi
    21,188
    Forse dovresti rivedere tutta la struttura e la sintassi della pagina.

    Un <div> non puo` stare nella head.
    Alcuni valori attribuiti alle proprieta` potrebbero non essere compresi (errori di maiuscole/minuscole).

    Inoltre dalla tua descrizione sembrerebbe che hai errori di CSS e di semantica: il codice HTML+CSS deve essere valido sia con il <div> visualizzato che con il <div> mancante.
    Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
    No domande tecniche in messaggi privati

  5. #5

    Re: ancora non funge... :-(

    codice:
    <style type="text/css">
    #sponsor { position: Absolute; top: 230px; left: 250px; width: 250px; height: 250px; }
    #sbord { border: Solid 1px #000000; }
    div.chiudi { width: 342px; text-align: Right; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #FFFFFF; font-weight: Bold; text-decoration: None;}
    a.sponsor, a.sponsor:hover { color: #FFFFFF; font-weight: Bold; text-decoration: None; }
    </style>
    <div id="sponsor">
    <div class="chiudi">CHIUDI POP-UP</div>
    <div id="sbord"><iframe src=popup.asp scrolling=no width=342 height=350 frameborder="0"></iframe></div>
    </div>
    
    </HEAD>
    
    <body topmargin="0" leftmargin="0" rightmargin="0" marginwidth="0" marginheight="0" onload="setTimeout('document.getElementById(\"sponsor\").style.display=\"none\" ', 3000);">
    [/QUOTE]

    Prova a fare una funzione in javascript e richiamarla dal body ( a me funziona ):

    <script language="javascript1.2">
    function chiudi()
    {
    setTimeout("document.getElementById('sponsor').sty le.display='none';", 3000);
    }
    </script>

    <body topmargin="0" leftmargin="0" rightmargin="0" marginwidth="0" marginheight="0" onload="chiudi()">



    ciaooo

  6. #6
    Utente di HTML.it
    Registrato dal
    Nov 2005
    Messaggi
    168

    grazie!!!

    Tote, grazie 1000 x il codice, ho risolto!
    Grazie cmq anche a Mich x avermi dedicato un po' del suo tempo!
    t.

    P.S. a breve tornerò a rompervi le scatole con tante belle domandine su CSS et similia, non mi occupo propriamente di questo genere di linguaggi, pertanto avrò moltissimo da imparare, anche grazie al vostro aiuto!

  7. #7
    Utente di HTML.it
    Registrato dal
    Sep 2001
    Messaggi
    21,188
    Per i problemi su XHTML e CSS posta nell'apposito forum (sotto HTML).
    Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
    No domande tecniche in messaggi privati

  8. #8
    Utente di HTML.it
    Registrato dal
    Nov 2005
    Messaggi
    168

    ok!

    Ok Mich, tnx!
    t.

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.