Ridimensionare barra avanzamento in base alla dimensione del monitor

de1980

Ridimensionare barra avanzamento in base alla dimensione del monitor postato il 29/06/2015 17:45:32 nel forum programmazione, gdrcd, open source, hosting

Buonasera a tutti, ho un problema, che spero di riuscire a spiegare in modo corretto:
Premetto che non ho usato i file di GDRCD, lo script è fatto da me.
Ho una barra di avanzamento (progressbar) che aumenta in base a un valore che passo attraverso un calcolo di php. Avrei bisogno di capire come poter far redimensionare questa barra in base alla risoluzione dello schermo, la barra della dimensione normale è troppo grande se il dispositivo che si usa è un tablet per esempio.

Questo è il codice che ho usato:

<?php
list($Salute, $Energia, $Fame ) = select_Salute_Energia_Fame($idvar);
$Salute_px = ($Salute * ($valore_punti * 2)) . "px";
$Energia_px = ($Energia * ($valore_punti * 2)) . "px";
$Fame_px = ($Fame * ($valore_punti * 2)) . "px";
$Salute_perc = ceil($Salute * ($valore_punti * 1)) . "%";
$Energia_perc = ceil($Energia * ($valore_punti * 1)) . "%";
$Fame_perc = ceil($Fame * ($valore_punti * 1)) . "%";

echo "<div class='progress' id='giallo' style='width:$Salute_px'>"; //width massimo 200px a barra piena al 100%
echo "<div class='progress-bar progress-bar-info' role='progressbar' aria-valuenow='60' aria-valuemin='0' aria-valuemax='100'>";
echo "<span>Salute$Salute_perc<span>";
echo "</div>";
echo "</div>";
echo "<div class='progress' id='rosso' style='width:$Energia_px'>"; //width massimo 200px a barra piena al 100%
echo " <div class='progress-bar progress-bar-warning' role='progressbar' aria-valuenow='60' aria-valuemin='0' aria-valuemax='100'>";
echo "<span>Energia$Energia_perc<span>";
echo "</div>";
echo "</div>";
echo "<div class='progress' id='blue' style='width:$Fame_px'>"; //width massimo 200px a barra piena al 100%
echo " <div class='progress-bar progress-bar-danger' role='progressbar' aria-valuenow='60' aria-valuemin='0' aria-valuemax='100'>";
echo "<span>Fame$Fame_perc <span>";
echo "</div>";
echo "</div>";
?>

Il css è:

.progress{
position:relative;
font-size:12px;
margin:3px;
padding:4px 5px;
color: #ffffff;
text-align:left;
font-weight:bold;
background-color:#428bca;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
-webkit-box-shadow:inset 0 -3px 0 rgba(0, 0, 0, 0.15);
box-shadow:inset 0 -3px 0 rgba(0, 0, 0, 0.15);
-webkit-transition:width 0.6s ease;
transition:width 0.6s ease;
z-index:100;
}
#giallo{
background-color:orange;
top:-545px;
left:20px;
}
#rosso{
background-color:red;
top:-545px;
left:20px;
}
#blue{
background-color:#3D6BE1;
top:-545px;
left:20px;
}

CRSED: F.O.A.D. ↗
Brutale sparatutto MMO in cui vince l'ultimo giocatore che resta in vita nell'arena! Ogni giocatore sarà accompagnato da armi realistiche e magie!

quota

Pagine → 1

kasa

SCRIVI

MODERATORE

29/06/2015 17:56:24

Ti propongo questo tentativo:
Al posto di assegnare il valore effettivo al "width" della Progressbar, prova ad assegnare il valore percentuale. In questo modo, dovrebbe anche questi ridimensionarsi in basse alle dimensioni della barra.

Kasa.

GitHub: https://github.com/GDRCD/GDRCD
Discord: https://discord.com/invite/K2eWXpvu4M
GdR-O: https://www.gdr-online.com/readforum.asp?id=250579

quota

gdr-online.com

SCRIVI

ADMIN

29/06/2015 18:48:23

E' ora possibile anche utilizzare una soluzione HTML 5: http://www.w3schools.com/tags/tag_progress.asp http://www.w3schools.com/tags/tag_progress.asp

Questo articolo ti può aiutare: http://www.hongkiat.com/blog/html5-progress-bar/ http://www.hongkiat.com/blog/html5-progress-bar/

Ikariam ↗
Su una piccola isola, in qualche parte del Mediterraneo, sorge un`antica civiltà. Sotto la tua guida inizia un`era di ricchezza e di scoperte!

quota

de1980

SCRIVI

30/06/2015 10:08:58

Ho risolto mettendo il valore in percentuale, grazie infinite ^^

Hero Wars ↗
Costruisci la tua squadra di eroi leggendari e domina il campo di battaglia! Strategia, tattica e potenza si scontrano in questo RPG ricco di azione!

quota

kasa

SCRIVI

MODERATORE

30/06/2015 10:09:52 e modificato da kasa il 30/06/2015 10:11:25

Prego.
Ti consiglio, comunque, di dare un'occhiata al materiale fornito da GdR-Online. Dopo averlo letto, qualcosa di interessante vi è.

In bocca al lupo.

Kasa.

GitHub: https://github.com/GDRCD/GDRCD
Discord: https://discord.com/invite/K2eWXpvu4M
GdR-O: https://www.gdr-online.com/readforum.asp?id=250579

quota

de1980

SCRIVI

30/06/2015 12:39:09

Grazie Kasa, non ho voluto prendere il materiale proposto per due motivi: per non farmi condizionare dalle idee degli altri, ma soprattutto perchè sto cercando di imparare a programmare, e faccio più fatica a mettere mano a script di altri piuttosto che farli da me, ogni tanto ho dei problemi che non riesco a superare ma in qualche modo cerco sempre di sviare il problema.

Pandora Upside Down High School ↗
La prima scuola per sovrannaturali al mondo vi attende! Scoprite il vostro cammino Ancestrale relazionandovi con i compagni e le attività dei club

quota

de1980

SCRIVI

30/06/2015 17:21:15

Ho risolto il problema precedente e ne ho trovato un altro più o meno simile:
devo sempre gestire la pagina con le varie risoluzioni dei monitor, ora dovrei riuscire a condizionare la pagina a includere un file o un altro in base alla risoluzione, ho una pagina html che include tutte le pagine php che costruiscono lo script, è possibile farlo e se si come

Metin2 ↗
Sfida i tuoi rivali a battersi con te e dimostra la tua superiorità in questo mondo fantasy!

quota

kasa

SCRIVI

MODERATORE

02/07/2015 14:56:24

Provo a riassumere la richiesta per cercare di avere maggiore chiarezza del quesito:

Tu hai bisogno di uno script che inserisca una pagina html (contenente pagine php da includere) piuttosto che un'altra in un codice in base alla risoluzione dello schermo?

Se è così...
Prova ad utilizzare questo script:

Lo script sopra esposto è stato studiato affinchè vi sia da caricare all'interno di un div un determinato file in base alla larghezza. Puoi aggiungere, se vuoi, anche l'altezza.

Non esiste in PHP una funzione simile, ma solo in Javascript.

Kasa.

GitHub: https://github.com/GDRCD/GDRCD
Discord: https://discord.com/invite/K2eWXpvu4M
GdR-O: https://www.gdr-online.com/readforum.asp?id=250579

quota

de1980

SCRIVI

22/07/2015 09:31:39 e modificato da de1980 il 22/07/2015 09:32:38

chiedo scusa per il ritardo della risposta ma sono stata impegnata.

non riesco a far funzionare il precedente suggerimento, non sono pratica di javascript

metto una pagina di esempio così qualcuno mi può aiutare a capire dove lo devo inserire:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/stile.css"/>
<title>Benvenuto</title>
</head>
<body>

<div class="countdown">
<?php include("tutte/countdown.php");?>
</div>

<div class='viaggia'>
<?php include("mondo_isola/viaggia.php");?>
</div>

<div class="chat">
<?php include("chat.php");?>
</div>

<div class="azioni">
<?php include("azioni.php");?>
</div>

<div class="mappa_mondo">
<?php include("mondo_isola/mappa_mondo.php");?>
</div>

</body>
</html>