Well suppose I have a progress bar in html and I have a script that clicks on a certain object the value of progress increases by +1, as I would for when that value reached 10 the maximum value of the bar increased to 100?
<progress id="pg" value="0" max="10" ></progress>
$('#store').click(function () {
click++;
document.getElementById('pg').value = click;
});
Given that you want to increase the max attribute, then I put a label to inform the value of it, the "size" of the bar in html will be kept the same right? I will consider it yes, then an example below follows.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><!DOCTYPEhtml><html><head><title>Exemploutilizandosocket.io</title><metacharset="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="js/js_1.9/jquery-1.8.2.js"></script>
<script type="text/javascript" src="js/js_1.9/jquery-ui-1.9.1.custom.min.js"></script>
<style type="text/css"> h2 { color: #439; font-size: 120%;} </style>
</head>
<body>
<progress id="pg" value="0" max="10" ></progress>
<label id="max">max: 10</label>
<button id="store">+</button>
</body>
<script>
$('#store').click(function () {
var valor = parseInt( $('#pg').val() );
valor++;
console.log('valor=' + valor);
$('#pg').val( valor );
if( valor == $('#pg').attr('max') ){
$('#pg').attr('max','100');
$('#max').text('Max: 100');
}
});
</script>
</html>