Despite going through the JS tutorial, I still struggle with it and need some assistance.
I believe using a jsfiddle would be helpful.
I am attempting to use JS to create a small box that changes color from green to empty based on the fullness of a "water container." When the container is full (1000), the box should be completely green. When it's half-full (500), the box should be half-green. And when it's empty (0), the box should be grey or transparent. The values for this are generated by PHP based on real-life container fullness readings ranging from 0 to 1000.
The challenge lies in translating these PHP values into visual representations on the GUI using JS. How can I draw a box that changes its fill level dynamically as PHP updates the fullness value from 0 to 1000?
Here is an example image illustrating what I'm trying to achieve: https://i.sstatic.net/j6642.png
The goal is to have three divs with varying green backgrounds: http://jsfiddle.net/AAVT4/1/
My approach involves placing these three divs inside a larger container and adjusting their heights based on the PHP-provided values to simulate changing water levels. However, I've been struggling to get the CSS right for this layout.
HTML
</cite>
<div class="hold"><div class="contain">
<div class="mpd1">This is box 1.</div>
<div class="mpd2">This is box 2.</div>
<div class="mpd3">This is box 3.</div></div></div>
<div class="corner"></div>
<div class="mpd"><a href="http://www.myspaceprodesigns.com"><img src="http://www.myspaceprodesigns.com/images/MPD.jpg" alt="myspace div generator" title="myspace div generator"></a></div>
<div class="comments">
<table><tr><td>
<table><tr><td>
CSS
<cite style="display:none">
</cite>
<style type="text/css">
.DivOverlayLayouts.com-div-generator{display:none}
body {
background-color:FFFFFF
}
.contain div {
background-color:76EE00;
color:FFFFFF;
font: 10pt Arial,Helvetica,sans-serif;
overflow:auto
}
a:link, a:active, a:visited, a.navbar:link, a.navbar:active, a.navbar:visited, a.man:link, a.man:active, a.man:visited, a:hover, a.navbar:hover, a.man:hover {
color:000000;
font: 10pt Arial,Helvetica,sans-serif
}
.mpd1{width:225px;height:600px;top:0;left:50px;position:absolute}
.mpd2{width:225px;height:600px;top:0;left:285px;position:absolute}
.mpd3{width:225px;height:600px;top:0;left:520px;position:absolute}.hold{background-color:transparent}
.contain{left:50%;margin-left:-400px;top:150px;position:absolute;z-index:0;background-color:transparent;visibility:visible}
.corner{left:0;top:0;position:absolute;z-index:9;visibility:visible !important}
.mpd{left:50%;margin-left:-400px;top:0;position:absolute;z-index:9;visibility:visible !important}
.comments{display:none}
.contacttable,.profileinfo,.latestBlogEntry,.interestsAndDetails,.extendedNetwork,.orangetext15{display:none}
.bodyContent div div form{display:inline}
.bodyContent table table table{visibility:hidden}
a img{border:none}
td,form{margin:0;padding:0}
table,tr,td{background:transparent}
DivOverlayLayouts.com-additional-coding{display:none}
</style>