I have a php variable that contains a value of used diskspace available in a folder.
$UsedSpace = $total/20000000*100;
Now i want to use the value of $UsedSpace for a status bar like this: http://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_progressbar_2
So the width: 1%; in this example should now contain the value of the variable. How can i achieve this?
review code bellow, this will help, read comment in html section
$(document).ready(function(){
$width=$("#myBar").data('width');
$("#myBar").css("width",$width+"%");
});#myProgress {
position: relative;
width: 100%;
height: 30px;
background-color: #ddd;
}
#myBar {
position: absolute;
height: 100%;
background-color: #4CAF50;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<h1>My First JavaScript Progress Bar</h1>
<div id="myProgress">
<div id="myBar" data-width="11"></div>
<!--
for php: set data-width like bellow
<div id="myBar" data-width="<?php echo '11'; ?>"></div>
-->
</div>
</body></div>
Put your variable in HTML/CSS like this : <?php echo $variable; ?>
You can also achieve this using JQuery.
<script>
var UsedSpace = <?php echo $UsedSpace; ?>;
$('#myBar').css('width', UsedSpace);
</script>
calculate $UsedSpace and use it like this :
<div id="myProgress">
<div id="myBar"></div>
</div>
<?php $UsedSpace = 500; ?>
<style>
#myProgress {
position: relative;
width: 100%; /*total memory size width */
height: 30px;
background-color: #ddd;
}
#myBar {
position: absolute;
width: <?php echo $UsedSpace ; ?>; /*UsedSpace width that is highlighted*/
height: 100%;
background-color: #4CAF50;
}
</style>