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

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!

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 ↗

---

Slice & Dice: https://slicendice.it ↗

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

AlterEgo ↗
Scopri AlterEgo GdR: un incredibile universo narrativo in stile medievale fantasy che cresce, muta e vive giorno dopo giorno grazie ai suoi giocatori!

quota

de1980

SCRIVI

30/06/2015 10:08:58

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

Crossout ↗
Tuffati nel mondo di Crossout, il gioco MMO d'azione post apocalittico! Costruisci le tue speciali macchine da combattimento!

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 ↗

---

Slice & Dice: https://slicendice.it ↗

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.

War Thunder ↗
Aviazione, veicoli corazzati e flotte militari della seconda guerra mondiale. Parteciperai a tutte le principali battaglie!

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

The Coven ↗
Negli scorci di luce delle paludi della Louisiana fioriscono nuove ombre. Estend e la Congrega ti aspettano per vivere emozionanti avventure!

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 ↗

---

Slice & Dice: https://slicendice.it ↗

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>