salve a tutti,
premetto che è la mia prima volta che scrivo qui, quindi non so se ho postato nella sezione giusta...
Il mio problema è il seguente. Ho una semplice pagina web la quale al suo interno ha due bottoni e una progress bar. di default è attivato solo il primo bottone, mentre il secondo è disabilitato. quando si preme sul primo bottone la progress bar va al 50%, si disattiva il primo bottone e si attiva il secondo. Quando premo il bottone numero due la progress bar arriva al 100% e anche il bottone due si disattiva.
il problema rimane quando io premo il bottone uno, si attiva il bottone due e si disattiva il primo ma se eseguo il refresh della pagina, tutto torna di default, con il primo bottone attivato e il secondo attivato. Vorrei che quando premo sul primo bottone (e quindi quest'ultimo si disattiva mentre si attiva il secondo) e aggiorno la pagina mi rimanesse così com'è, con il primo bottone disattivato e il secondo attivato.
Spero di essere stato chiaro, vi lascio il codice..
Grazie in anticipo
premetto che è la mia prima volta che scrivo qui, quindi non so se ho postato nella sezione giusta...
Il mio problema è il seguente. Ho una semplice pagina web la quale al suo interno ha due bottoni e una progress bar. di default è attivato solo il primo bottone, mentre il secondo è disabilitato. quando si preme sul primo bottone la progress bar va al 50%, si disattiva il primo bottone e si attiva il secondo. Quando premo il bottone numero due la progress bar arriva al 100% e anche il bottone due si disattiva.
il problema rimane quando io premo il bottone uno, si attiva il bottone due e si disattiva il primo ma se eseguo il refresh della pagina, tutto torna di default, con il primo bottone attivato e il secondo attivato. Vorrei che quando premo sul primo bottone (e quindi quest'ultimo si disattiva mentre si attiva il secondo) e aggiorno la pagina mi rimanesse così com'è, con il primo bottone disattivato e il secondo attivato.
Spero di essere stato chiaro, vi lascio il codice..
Grazie in anticipo
HTML:
<!DOCTYPE html>
<html>
<title>Esempio!</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body>
<div class="w3-container" style="padding:128px 16px" id="work">
<br><br>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="col-sm-8" id="giorno1">
<div class="w3-container w3-light-grey w3-padding-64">
<div class="w3-row-padding">
<div class="col-sm-6">
<center><button id="bottonegiorno1" class="w3-btn w3-grey w3-round" onclick="move()"> 1</button></center>
</div>
<div class="col-sm-6">
<center><button id="bottonegiorno2" class="w3-btn w3-grey w3-round" onclick="move2()" disabled> 2</button></center>
</div>
</div>
</div>
<br>
<br>
<br>
</div>
<div class="col-sm-4" >
<p class="w3-wide"><span class="glyphicons glyphicons-dumbbell"></span>Completamento</p>
<div class="w3-grey">
<div id="myBar1" class="w3-container w3-dark-grey w3-center" style="width:0%">0%</div>
</div>
</div>
<br>
<br>
<br>
<br>
</div>
</div>
</div>
</div>
<script>
// COOKIE PER LA PROGRESS BAR QUANDO AGGIORNI LA PAGINA RIMANE IL VALORE CHE C'è E POI QUANDO ARRIVI AL 100 SI FERMA + IL FATTO CHE QUANDO ARRIVI AL 100% TI VIENE FUORI LA SCRITTA
var cookie = leggiCookie("barrapetto1");
if(cookie != ""){
var elem = document.getElementById("myBar1");
elem.style.width = cookie + '%';
elem.innerHTML = cookie * 1 + '%';
}
function leggiCookie(nomeCookie){
if (document.cookie.length > 0)
{
var inizio = document.cookie.indexOf(nomeCookie + "=");
if (inizio != -1)
{
inizio = inizio + nomeCookie.length + 1;
var fine = document.cookie.indexOf(";",inizio);
if (fine == -1) fine = document.cookie.length;
return unescape(document.cookie.substring(inizio,fine));
}
else{
return "";
}
}
return "";
}
function scriviCookie(nomeCookie,valoreCookie,durataCookie){
var scadenza = new Date();
var adesso = new Date();
scadenza.setTime(adesso.getTime() + (parseInt(durataCookie) * 60000));
document.cookie = nomeCookie + '=' + escape(valoreCookie) + '; expires=' + scadenza.toGMTString() + '; path=/';
}
// 1*******************************************************************
function move()
{
var elem = document.getElementById("myBar1");
var id = setInterval(frame, 10);//velocità
var x = parseInt(elem.textContent.substring(0, elem.textContent.length - 1)); //recupera percentuale barra
var width = x;
function frame() {
if (width >= x+50 || width >= 50 ) //quando arrivi a 50 ti fermi
{
clearInterval(id);
scriviCookie("barrapetto1", width, 30);
document.getElementById("bottonegiorno1").disabled=true; //disabilita il bottone 1
document.getElementById("bottonegiorno2").disabled=false; //attiva il bottone 2
}
else
{
width++;
elem.style.width = width + '%';
elem.innerHTML = width * 1 + '%';
}
}
}
// 2*******************************************************************
function move2()
{
var elem = document.getElementById("myBar1");
var id = setInterval(frame, 10);//velocità
var x = parseInt(elem.textContent.substring(0, elem.textContent.length - 1)); //recupera percentuale barra
var width = x;
function frame() {
if (width >= x+50 || width >= 100 ) //quando arrivi a 100 ti fermi
{
clearInterval(id);
scriviCookie("barrapetto1", width, 30);
document.getElementById("bottonegiorno2").disabled=true; //disabilita il bottone 1
}
else
{
width++;
elem.style.width = width + '%';
elem.innerHTML = width * 1 + '%';
}
}
}
</script>
</body>
</html>
