Finestra a tempo

carter

Utente Attivo
15 Feb 2012
68
0
0
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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
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

Utente Attivo
15 Feb 2012
68
0
0
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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
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

Utente Attivo
15 Feb 2012
68
0
0
Grazie mille davvero criric,
per ora va benissimo così...
poi lo perfezionerò...
Grazie infinite
 

carter

Utente Attivo
15 Feb 2012
68
0
0
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

Utente Attivo
28 Mag 2006
446
0
0
Livorno
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

Utente Attivo
15 Feb 2012
68
0
0
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

Utente Attivo
28 Mag 2006
446
0
0
Livorno
Ciao,

cambia

left:30%;

con

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

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


Valeria.
 

carter

Utente Attivo
15 Feb 2012
68
0
0
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

Utente Attivo
28 Mag 2006
446
0
0
Livorno
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

Utente Attivo
15 Feb 2012
68
0
0
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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
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

Utente Attivo
15 Feb 2012
68
0
0
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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
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

Utente Attivo
15 Feb 2012
68
0
0
grazie mille criric per la pazienza...
se dovessi riuscire a mettere a posto la cosa ti farò sicuramente sapere
buona serata
 
Discussioni simili
Autore Titolo Forum Risposte Data
E Finestra estensioni sparita Photoshop 0
M Come nascondere la finestra di dialogo di conferma? HTML e CSS 1
G Finestra di dialogo che non si apre - programma NUENDO Windows e Software 0
F Passare variabile a pulsante in finestra modale PHP 2
L Audio in finestra modale ed interruzione alla chiusura jQuery 9
B Vorrei inserire una finestra con messaggio ad un history.back PHP 16
C finestra popup dopo login PHP 2
L Visualizzare tabella all'interno finestra modal PHP 4
S [PHP] Finestra poupup dentro IF PHP 17
R Bootstrap 4 - creare una finestra di testo responsive sopra un Carousel jQuery 1
W [Javascript] Finestra modale Javascript 0
AMONRA75 [PHP] passare una variabile in una finestra MODAL PHP 1
romeocharly in win 10 mi si apre una finestra di configuraziuone di parametri di una cam errata Windows e Software 2
Y Finestra dialogo CSS Modal HTML e CSS 6
K [Javascript] Finestra menu Javascript 1
J [HTML] Finestra su pagina htm, HTML e CSS 5
T [PHP] passare una variabile in una finestra MODAL di bootstrap PHP 3
Antonio Nervi [Javascript] Nuova finestra Javascript 8
G [RISOLTO][Javascript] aggiungere elemento ad array definito nella finestra madre da popup Javascript 4
Monital [HTML] le inpuit text non si rimpiccioliscono se si diminuisce la finestra del browser HTML e CSS 4
A chiusura finestra dialog Popu jQuery 3
R [HTML] La finestra del browser non si autoadatta al mio sito HTML e CSS 3
CoyotesSon [PHP] Help! Creazione di una finestra PHP 5
Shyson Aprire finestra popup con Safari Javascript 6
P chi mi aiuta per costruire una finestra overlay ???? Javascript 1
T Finestra di dialogo. PHP 1
L mailto: apre la finestra di posta in background HTML e CSS 2
R finestra di dialogo personalizzata con jquery ui jQuery 2
E Realizzare una finestra overlay con caricamento pagina html HTML e CSS 3
J Programmazione di un finestra tipo popup CMS (Content Management System) 1
T Ritardare apertura finestra con Javascript Javascript 4
marino51 non riesco a caricare un allegato percgè non riesco a ridimensionare la finestra Supporto Mr.Webmaster 0
P Dopo il caricamento ajax non viene aperta finestra modale Ajax 9
A [JQUERY] Passare dati stessa finestra (Nyromodal) jQuery 0
A Apertura finestra modale al submit Ajax 0
felino Jquery UI Dialog Confirm: errore sulla chiusura della finestra jQuery 3
novello88 Problema finestra di conferma (che non appare) Javascript 1
M ASP.NET Response.Redirect che si apre in una nuova finestra ASP.NET 1
E Centrare finestra popup Javascript 7
R La finestra padre non si aggiorna con Chrome Javascript 1
A Problema con finestra modale jQuery 0
F Problema finestra popup jQuery 4
A Finestra overlay con id record mysql Javascript 5
S rimuovere pulsante chiusura (X) da una finestra Javascript 3
M messaggio visualizzato in una finestra Javascript 4
T apertura pagina elaborazione form in altra finestra Javascript 1
A Finestra di conferma Javascript 2
Z Cambiare colore alla finestra degli avvisi CMS (Content Management System) 1
V risultato di un vettore in una finestra Java 5
Sevenjeak [Java] JDialog che si minimizza e ripristina con la finestra principale Java 2

Discussioni simili