Progress bar con pagina in secondo piano

**rainbow.pino** · 03-10-2009, 09:05

Salve a tutti

spesso ho visto che alcune pagine durante la transizione o durante una elaborazione
fanno comparire una barra di progressione o una gif con la rotellina che ruota
mettendo la pagina attuale in trasparenza come sfondo
e proteggendo la stessa.

Forse è una cosa banale, ma pur essendomi letto tutte le lezioni di css
non so come fare.
mi date una mano?
grazie
Pino

**Mich_** · 05-10-2009, 09:08

Con i CSS da soli non si puo` fare. E` necessario un minimo di JS, che deve gestire gli eventi.

In quel tipo di effetti i CSS gestiscono le singole successioni in forma statica (cioe` se ci sono due situazioni, ci saranno due CSS (o due definizioni nello stesso CSS), mentre JS attribuisce l'una o l'altra agli stessi oggetti.

Per esempio.
Se vuoi che tutto diventi scuro, con una finestra chiara sovrapposta alla pagina, ci sara` una cosa del genere:

codice:

HTML:
<body>
  <div id="tutto_il_contenuto">
    ... qui la tua pagina normale ...
  </div>
  <div id="oscuramento">
    <div id="messaggio">
      

qui il testo del messaggio...</p>
    </div>
  </div>
</body>

CSS:
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#tutto_il_contenuto {
  position: absolute;
  z-index: 10;
  top:0; left:0;
  overflow: auto;
}
#oscuramento {
  position: absolute;
  z-index: 20;
  top:0; left:0;
  width: 100%
  height: 100%;
  display: none;
  background: url(sfondogrigio.png) repeat;   /* lo sfondo e` semitrasparente */
}
#messaggio {
  width: 400px;
  height: 300px;
  background: white;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -200px;
  margin-top: -150px;
}

A questo punto e` compito del JS dare i due comandi:
document.getElementById('oscuramento').style.displ ay = 'block'; // viusalizza copertura oscura
document.getElementById('oscuramento').style.displ ay = 'none'; // elimina copertura oscura

**rainbow.pino** · 05-10-2009, 09:13

Originariamente inviato da Mich_
Con i CSS da soli non si puo` fare. E` necessario un minimo di JS, che deve gestire gli eventi.

grazie ora provo

**rainbow.pino** · 05-10-2009, 10:04

Originariamente inviato da Mich_
A questo punto e` compito del JS dare i due comandi:
document.getElementById('oscuramento').style.displ ay = 'block'; // viusalizza copertura oscura
document.getElementById('oscuramento').style.displ ay = 'none'; // elimina copertura oscura

ho provato ma non mi funge
evidentemente non so ben integrare le due righe di js.
Io ho fatto così (proprio perchè non so integrare js):
Pagina 1

codice:

<html>
<head>
<title>CSS -  Test oscuramento pagina Step 1</title>
<style type="text/css">

... css da te suggerito ..

</style>

<SCRIPT Language="Javascript">
document.getElementById('oscuramento').style.display = 'block'; // viusalizza copertura oscura
</SCRIPT>

</head>

<body>
  <div id="tutto_il_contenuto">
    Step 1... qui la tua pagina normale ...

	chiama pagina 2
  </div>
  <div id="oscuramento">
    <div id="messaggio">
      

qui il testo del messaggio...</p>
    </div>
  </div>
</body>
</html>

Pagina 2

codice:

<html> 
<head> 
<title>CSS -  Test oscuramento pagina Step 2</title> 
<style type="text/css">
... ho ripetuto il medesimo css...
</style> 

<SCRIPT Language="Javascript"> 
document.getElementById('oscuramento').style.display = 'none'; // elimina copertura oscura </SCRIPT> 
</head>  
<body>
  <div id="tutto_il_contenuto">
    Step 2... qui la tua pagina normale ...

  </div>
  <div id="oscuramento">
    <div id="messaggio">
      

qui il testo del messaggio...</p>
      	chiama pagina 1
    </div>
  </div>
</body>
</html>

Perchè secondo te non funge?
Come si può integrare js in un unica pagina?
Nell'immagine sfondogrigio.png a quanto è consigliabile impostare l'opacità?
grazie
Pino
qui il mio test

**Mich_** · 05-10-2009, 10:23

ho provato ma non mi funge
evidentemente non so ben integrare le due righe di js.
Io ho fatto così (proprio perchè non so integrare js):

Infatti. Non e` che il JS si puo` inventare. senza un minimo di basi non puoi arrivare a qualcosa di ragionevole.

Il mio consiglio e` di studiare un corso di JS, ad esempio quello su HTML.it.

Comunque ora diventa un problema prettamente di script, per cui sposto nel forum JS

**rainbow.pino** · 05-10-2009, 10:37

Originariamente inviato da Mich_
Infatti. Non e` che il JS si puo` inventare. senza un minimo di basi non puoi arrivare a qualcosa di ragionevole.

Il mio consiglio e` di studiare un corso di JS, ad esempio quello su HTML.it.

Comunque ora diventa un problema prettamente di script, per cui sposto nel forum JS

Infatti sono alla 8° lezione...
Anche se non sono del tutto asciutto di js... per cui un ulteriore suggerimento non risulterebbe per me incomprensibile.
grazie ancora
Pino

aneddoto: ultimamente, per implementare un cms che ho scritto in asp qualche tempo fa, mi sono trovato a studiare diverse tecnologie o metodi o linguaggi e più studiavo più mi accorgevo che era difficile provare (per provare una cosa devi conoscerla almeno un pò) e poi il dubbio è meglio usare questa o quella...
sabato mia moglie mi manda a comprare una "crema alle erbe"... arrivo ... guardo lo scaffale... ben 20 tipi di creme alle erbe !!!
Viviamo in un mondo in cui sta diventando complicato conoscere e scegliere ! ;-)

**rainbow.pino** · 07-10-2009, 09:12

Originariamente inviato da Mich_
...E` necessario un minimo di JS, che deve gestire gli eventi...
A questo punto e` compito del JS dare i due comandi:
document.getElementById('oscuramento').style.displ ay = 'block'; // viusalizza copertura oscura
document.getElementById('oscuramento').style.displ ay = 'none'; // elimina copertura oscura

Sto continuando a leggere il corso js (lezione 22...)
ma tra la teoria e la pratica ne passa ...

qualcuno sarebbe così gentile da dirmi come posso integrare queste due righe js?

Lo scopo come dicevo all'inizio è quello di portare in secondo piano la pagina attuale e
avere in primo piano una progress bar o qualcosa che indichi che l'elaborazione è in corso.
grazie

**Mich_** · 07-10-2009, 09:35

qualcuno sarebbe così gentile da dirmi come posso integrare queste due righe js?

Non e` possibile dare una risposta semplice.

Il capitolo sugli eventi lo hai gia` studiato?
Nel tuo caso le "due righe" vanno inserite ciascuna in un evento. Potrebbero essere due link ad esempio:

codice:

oscura
rischiara

Tieni pero` presente che il primo va inserito nella pagina, il secondo nel pezzo "visibile" del livello oscurante.

Questo e` un piccolo passo verso quello che vuoi, ma non e` ancora la soluzione completa, che necessita di altre conoscenze, che esulano anche dal JS, ma coinvolgono il progetto completo.

**rainbow.pino** · 07-10-2009, 09:58

Originariamente inviato da Mich_
Non e` possibile dare una risposta semplice.

...è il bello della vita...

Il capitolo sugli eventi lo hai gia` studiato?

sì e diciamo che ogni tanto li uso...

Questo e` un piccolo passo verso quello che vuoi, ma non e` ancora la soluzione completa, che necessita di altre conoscenze, che esulano anche dal JS, ma coinvolgono il progetto completo.

vediamo se riesco a fare qualche piccolo passo avanti..

Ti chiedevo prima:
Nell'immagine sfondogrigio.png a quanto è consigliabile impostare l'opacità?
grazie ancora
Pino

**Mich_** · 07-10-2009, 10:49

Nell'immagine sfondogrigio.png a quanto è consigliabile impostare l'opacità?

Ritengo sia una questione di gusto personale.
A mio parere e` ragionevole un valore tra 0.5 e 0.8, ma dovresti fare alcune prove.

Discussione: Progress bar con pagina in secondo piano

Strumenti discussione

Ricerca discussione

Visualizza

Progress bar con pagina in secondo piano

Permessi di invio