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;
}

Crash Bandicoot Zone ↗
Caos, libertà e risate: nel GDR ambientato nell’universo di Crash Bandicoot, ogni storia è possibile… e nulla è troppo folle!

Pagine → 1

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.gg/zh69CDUf3V ↗

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/ ↗

Lineage II ↗
Entra in uno sconfinato mondo fantasy dominato da razze in contrasto tra loro. Scatena i tuoi poteri in uno dei Mmo più famosi al mondo!

quota

de1980

SCRIVI

30/06/2015 10:08:58

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

World of Warship ↗
MMO gratuito con frenetiche battaglie navali ambientate nel ventesimo secolo. Salpa con la tua nave ed affronta i nemici!

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.gg/zh69CDUf3V ↗

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.

Enlisted ↗
Guida la tua squadra di soldati in combattimenti su larga scala, con fanteria, veicoli corazzati e aerei della IIa Guerra Mondiale!

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

World of Tanks ↗
Lanciati in epiche battaglie spalla a spalla con altri giocatori. Conquista la supremazia nel mondo dei Carri Armati!

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.gg/zh69CDUf3V ↗

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>