creazione progress bar contatore iscritti

[Tonybho]

Ciao a tutti, questo è il progetto:
Gestione visiva delle iscrizioni ad un evento.

Praticamente, dato un determinato evento (festa, riunione, ecc...) mi viene data la possibilità di iscrivermi.

Il mio problema è che devo rappresentare graficamente l'avanzamento delle iscrizioni attraverso una progress bar.
In più devo visualizzare un messaggio se si è raggiunto un determinato numero di iscrizioni...

Bel casino eh?
Mi sapete consigliare da dove partire??

Spero di essere stato chiaro...

Grazie
Tony

[LuckySevenRoX]

potresti realizzare una progress bar fatta in casa tramite css o immagini.. esempio:

il massimo (100%) equivale a 200 persone iscritte all'evento.

crei un div base (la barra "vuota) di (sempre per esempio) 300px di larghezza.. colore grigio.
al suo interno crei 1 altro div di 1 altro colore.. inizialmente dovrai impostare la sua larghezza a 0px, la quale aumenterà (magari tramite il metodo jquery .css, impari in 2 secondi) a seconda del numero di iscritti, semplicemente calcolando la percentuale di iscritti raggiunta leggendo le info dal database

se hai 30 iscritti (su 200) fai 200:100=30:x > 100*30/200 > 15%
una volta ottenuta la percentuale la "riporti" graficamente con i div.. se 300px equivalgono al 100%, fai la proporzione 300:100=x:15 > 45px, la larghezza che avrà il div colorato.

un'altra soluzione potrebbe esser quella di sfruttare immagini che formano una barra (o una sola immagine che segue lo stesso ragionamento del div con la percentuale di larghezza).. dipende tutto da quello che vuoi fare.. l'idea del div comunque la trovo abbastanza carina.

spero di averti dato uno spunto decente

[Tonybho]

Ciao, sto provando la strada dei div...

echo '<div id="progress_vuota" width="300" align="center" style="background-color: #D2D2D2;border:5px ridge">';
echo    '<div id="progress_contenuto" width="30" style="background-color: #FFBF00"></div>';
echo    '[b]' . $nr  . '[/b]';
echo '</div>';
echo '<div align="center" style="margin-bottom:10px"> già ' . $iscrittoi . '!</div>'; 

Quello che sto cercando di fare è questo: visualizzare dentro la barra il numero di iscritti.
Se il div è vuoto all'aumentare del width non si colora progressivamente e se scrivo qualcosa nel div interno, me lo colora tutto...

Mi sa che sto facendo confusione...

P.S. non ho usato css per comodità di programmazione, quando funzionerà tutto lo implementerò..

[LuckySevenRoX]

ciao, al momento non ho la possibilità di provare ciò che sto per dirti, cerco di non dire cavolate (casomai stasera la provo e ti mando il codice per bene)

realizza un terzo div subito sotto quello "colorato" (praticamente il div grigio ne contiene due)

<div>
  <div></div>
  <div></div>
</div>

ora, questo div deve avere impostata la proprietà "float: left;", "margin:auto" e imposta la sua width, per esempio, al 70%.

ora inserendo il testo dentro questo div dovresti averlo centrato senza dover allargare per forza la barra colorata

se non dovesse funzionare a primo colpo prova a fare qualche modifica, come ti ho già detto adesso non posso provare quindi potrei aver sbagliato qualcosa

EDIT: ah comunque il "width" mettilo come proprietà del css e non direttamente sul div, segnalando anche i "px" (width:300px

[homerbit]

Originariamente inviato da Tonybho
Ciao, sto provando la strada dei div...

echo '<div id="progress_vuota" width="300" align="center" style="background-color: #D2D2D2;border:5px ridge">';
echo    '<div id="progress_contenuto" width="30" style="background-color: #FFBF00"></div>';
echo    '[b]' . $nr  . '[/b]';
echo '</div>';
echo '<div align="center" style="margin-bottom:10px"> già ' . $iscrittoi . '!</div>'; 

Quello che sto cercando di fare è questo: visualizzare dentro la barra il numero di iscritti.
Se il div è vuoto all'aumentare del width non si colora progressivamente e se scrivo qualcosa nel div interno, me lo colora tutto...

Mi sa che sto facendo confusione...

P.S. non ho usato css per comodità di programmazione, quando funzionerà tutto lo implementerò..

Il width del DIV va nello style ed è espresso in px