Finestra a tempo

carter · 1 Giu 2012

Salve a tutti...
sto cercando il modo di far aprire una "finestra" (che però non sia un popup) con qualcosa scritto dentro al caricamento dell'homepage di un sito che scompaia automaticamente dopo un tot di tempo...
qualcuno di voi può aiutarmi?
purtroppo di javascript non ci capisco molto...
grazie a tutti

criric · 2 Giu 2012

Ciao,
puoi usare setTimeOut() per eseguire un azione dopo un tot di secondi impostati

crei un div con position absolute, lo formatti con un po di css

dopo un tot di secondi setti con javascript l'attributo display a none

esempio:

HTML:

<html>
    <head>
        <title>Finestra a tempo</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript">
            function nascondi() {
                document.getElementById("messaggio").style.display="none";
            }
            setTimeout("nascondi()", 10000);
        </script>
        <style type="text/css">
            div#messaggio {
                position: absolute;
                left:30%;
                top:30%;
                width:250px;
                height:150px;
                border: 3px solid red;
                background-color: yellow;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div id="messaggio">Finestra a tempo</div>
    </body>
</html>

carter · 2 Giu 2012

Grazie mille criric...
sapevo che non era difficile ma purtroppo con javascript non ho molta dimestichezza...
però avrei un altro quesito da porre...se non è troppo...
se volessi far apparire la finestra facendola scendere dall'alto della pagina fino alla sua completa visualizzazione...
un effetto a comparsa dall'alto praticamente...
come potrei fare?

grazie a tutti

criric · 2 Giu 2012

Potresti usare setInterval() che esegue un azione ogni tot tempo

imposti la position a -150px che è l'altezza del div e richiami una funzione che ne modifica la position

esempio:

HTML:

<html>
    <head>
        <title>Finestra a tempo</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript">
            var h = -150;
            function scroll(){
                h++;
                document.getElementById("messaggio").style.top=h + "px";
                if(h==0) {
                    clearInterval(interval);
                }
            }            
            function nascondi() {
                document.getElementById("messaggio").style.display="none";
            }
            var  interval = setInterval("scroll()",1)
            setTimeout("nascondi()", 10000);
        </script>
        <style type="text/css">
            div#messaggio {
                position: absolute;
                left:30%;
                top:-150px;
                width:250px;
                height:150px;
                border: 3px solid red;
                background-color: yellow;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div id="messaggio">Finestra a tempo</div>
    </body>
</html>

Il mio è solo un semplice esempio, se cerchi in rete sicuramente trovi qualcosa di più serio

carter · 2 Giu 2012

Grazie mille davvero criric,
per ora va benissimo così...
poi lo perfezionerò...
Grazie infinite

carter · 2 Giu 2012

Buona sera, sono di nuovo qui...
mi rivolgo a criric perchè ha avuto la bontà di rispondermi ma se qualcunaltro di voi può darmi una mano...
vi ringrazio...
allora ho notato una cosa...
lo script in alcune pagine funziona...in altre no...
in particolare c'è una cosa che ho notato...in alcune pagine funziona solo al primo caricamento...poi non funziona più...
qualcuno sa dirmi perchè?
buona serata a tutti...

Vale2 · 4 Giu 2012

Ciao,

questo presunto malfunzionamento (dico presunto no perché non ci chredo), ma per chiedere se la nuova pagina è passata da un link o con Back Forward del Browser (Indietro - Avanti).

Se nella pagina dove non funziona fai un refresh con il tasto F5 o quello apposito del Browser funziona?

Ci sono pagine dove hai inserito lo script di criric dove hai altri javascript?

Solo per conferma fai questa prova:

solo tre cambi, togliere il clearInterval e spostare il setTimeout prima del setInterval e il CSS prima dello script.

Codice:

<html>
    <head>
        <title>Finestra a tempo</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
       
     <style type="text/css">
            div#messaggio {
                position: absolute;
                left:30%;
                top:-150px;
                width:250px;
                height:150px;
                border: 3px solid red;
                background-color: yellow;
                text-align: center;
            }
        </style>

 <script type="text/javascript">
            var h = -150;
            function scroll(){
                h++;
                document.getElementById("messaggio").style.top=h + "px";
                if(h==0) {
                   // clearInterval(interval);
                h--;
			
				}
            }            
            function nascondi() {
                document.getElementById("messaggio").style.display="none";
            
			}
           setTimeout("nascondi()", 10000);
 var  interval = setInterval("scroll()",1)
            
        </script>
 
    </head>
    <body>
        <div id="messaggio">Finestra a tempo</div>
    </body>
</html>

Valeria.

carter · 4 Giu 2012

ciao valeria quel problema l'ho risolto...grazie mille comunque...
avrei un altro problemino...
vorrei fare in modo che in base alle diverse risoluzioni questa finestra venga centrata in modo che ci sia lo stesso spazio sia a destra che a sinistra...centrata insomma...
qualcuno sa come fare?

grazie mille a tutti come sempre

Vale2 · 4 Giu 2012

Ciao,

cambia

left:30%;

con

left:50%;margin-left:-150px;

50% al centro se -150 è la larghezza del div.

Valeria.

carter · 4 Giu 2012

Vale2 ha scritto:
Ciao,

cambia

left:30%;

con

left:50%;margin-left:-150px;

50% al centro se -150 è la larghezza del div.

Valeria.

grazie mille valeria...
ho adattato un pò...
avevo allargato la finestra a 750px...
tenendo conto i questo valore ho impostato margin-left:375px;
la metà della larghezza della finestra...sembra che vada...comunque grazie mille...

Vale2 · 4 Giu 2012

Ciao,

se va che dire,

comunque per averla al centro l'allineamento e posizione sinistra 50% - la larghezza della finestra.

Cento left e top

left: 50%; top: 50%; - w -h

se ci sono un paio di pixel in meno da una o l'altra parte inpercettibile,

Valeria.

carter · 5 Giu 2012

buongiorno ragazzi...
son sempre io...
volevo chiedervi l'ennesima info su questa finestra a tempo...
in pratica nella finestra ci sono due righe di testo...
io volevo sapere se oltre al movimento della finestra si poteva dare lo stesso effetto al testo nella finestra
(quando parlo di finestra mi riferisco al div "messaggio" dell'esempio postato qui...in cui c'è proprio scritto Finestra a tempo...)
quindi la mia domanda è questa...volendo mettere "Finestra" in una riga e "a tempo" nella riga dopo...si può dare l'effetto comparsa a queste due righe di testo?...so che vi sto assillando con questa cosa ma se poteste essermi d'aiuto ve ne sarei davvero grato

criric · 6 Giu 2012

Piu o meno potrebbe essere uguale a quello gia scritto

PHP:

<html>
    <head>
        <title>Finestra a tempo</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript">
            var h = -150;
            var t = 0;
            function scroll_testo(){
                t++;
                document.getElementById("testo").style.marginTop=t + "px";
                if(t==60) {
                   clearInterval(s);
                }
            }
            function scroll(){
                h++;
                document.getElementById("messaggio").style.top=h + "px";
                if(h==0) {
                    clearInterval(interval);
                    s = setInterval("scroll_testo()",20);
                }
            }
            
            function nascondi() {
                document.getElementById("messaggio").style.display="none";
            }
            interval = setInterval("scroll()",1);
            setTimeout("nascondi()", 10000);
        </script>
        <style type="text/css">
            div#messaggio {
                position: absolute;
                left:30%;
                top:-150px;
                width:250px;
                height:150px;
                border: 3px solid red;
                background-color: yellow;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div id="messaggio"><div id="testo">Finestra a tempo</div></div>
    </body>
</html>

carter · 7 Giu 2012

Buongiorno...innanzitutto grazie per la pazienza che avete nei miei confronti...
in realtà la cosa però non era quella...ho scritto male io e non mi sono corretto...scusate
forse come cosa è ancora più semplice...comunque a me servirebbe che, dopo che la finestra si è fermata nella posizione indicata compaia il testo (magari con un fadein)...che fra l'altro è in due righe...quindi prima dovrebbe apparire la prima riga e poi dopo tot tempo la seconda...
grazie e scusate ancora...

criric · 12 Giu 2012

Potresti provare a buttar giu qualcosa ... :book: e poi lo posti

alla fine le funzioni sono sempre quelle

altrimenti ti cerchi qulacosa su misura in rete magari in jquery ( ore e ore di ricerca ) :fonzie:

carter · 12 Giu 2012

grazie mille criric per la pazienza...
se dovessi riuscire a mettere a posto la cosa ti farò sicuramente sapere
buona serata

Cerca

Cerca

Finestra a tempo

carter

Utente Attivo

criric

Super Moderatore

carter

Utente Attivo

criric

Super Moderatore

carter

Utente Attivo

carter

Utente Attivo

Vale2

Utente Attivo

carter

Utente Attivo

Vale2

Utente Attivo

carter

Utente Attivo

Vale2

Utente Attivo

carter

Utente Attivo

criric

Super Moderatore

carter

Utente Attivo

criric

Super Moderatore

carter

Utente Attivo

Discussioni simili