how to use php variable in css


Tags: php,css

Problem :

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?



Solution :

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>


    CSS Howto..

    How to Show the Related Content in another Div when an Image Clicked

    How can i dynamically change title of input type file?

    how to display div one by one using css

    How to I make a button clickable with HTML/CSS? It needs to be centered along with a title over an image

    How to Prefix this Input element, using CSS

    How to determine the exact 'font-family' CSS value of an uploaded TrueType font?

    How to create slideshow in css without having to make more than one class?

    How to change css property of the particular selection text in a input field using javascript

    How to make a function set css width with a JavaScript variable?

    How to use display:flex in CSS to create a mix of fixed with and dynamic proportional width columns?

    How to center div the whole screen page using css

    How to make a colorful gradient glow around your input-box?

    How do I avoid gap when using z-index in CSS?

    How to arrange dissimilar
    elements to flow inline inside an
    element

    How to select the last div in css

    In CSS, how to compute the percentage height within a `height:auto` parent?

    How to add a style only to certain elements of a list via CSS

    How can I change the image folder name in css files dynamically?

    How can I eliminate all space between block divs?

    How do I completely remove all references to application.js and application.css in a Rails app?

    How to include .otf in css?

    How can I prevent wild scrolling when a fixed position text input form field gains focus?

    How do I select every other div class element using just CSS (no js)

    how can assign left of div to left of screen when margin set to auto?

    How to create slanted tabs with a border in CSS? [duplicate]

    How to get arrows appear on carousel only on hover

    How to change font-awesome icon color when it is active

    CSS: How to use Transform property on a bootstrap grid class

    How would I make this CSS / jQuery dropdown menu multilevel?

    How do I use jQuery to change the value of a css selector value?