Nick Goloborodko wrote:
Hi,
I've got the following problem: i need to build a "progress bar" with
JavaScript. So far i have the following configuration: i've got a DIV
inside of a DIV. Each DIV has a style attribute that defines its width and
other style information.
I need to calculate the size of the incremental block based on various
factor like Width of the outside DIV, incremental interval and number of
increments. My original solution was to assume that all of the units are in
'px' so i could just deal with integers. However now i hit a brick wall,
when i realised that this is anything but scalable.
So what i need to do now is to obtain a width of the DIV from its style
attribute (had it hard coded before), do the calculation, and then use the
result to increment the size of the inner DIV (width element in the style
attribute)
I had a brief look on google and failed to locate anything appropriate. So
i'm hoping that someone can point me in the right direction
Kind regards,
Nick Goloborodko
I posted code for this about 2 days ago. Here's another version,
it is lightly commented and should do what you wish.
--
Rob.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> Resize element </title>
<meta http-equiv="Content-Type"
content="text/html; charset=ISO-8859-1">
<style type="text/css">
..div0 {border: 1px solid red; width: 10em; height: 15em;}
..div1 {border: 1px solid blue;}
</style>
<script type="text/javascript">
function sameSize(a,b){
var msg = '';
b = document.getElementById(b);
// Zilla stuff
if (window.getComputedStyle) {
var h = document.defaultView.getComputedStyle(a,
'').getPropertyValue('height');
var w = document.defaultView.getComputedStyle(a,
'').getPropertyValue('width');
msg += 'getComputedStyle (h,w): ' + h + ', ' + w;
// IE stuff
} else if (a.currentStyle) {
var h = eval('a.currentStyle.height');
var w = eval('a.currentStyle.width');
msg += 'currentStyle (h,w): ' + h + ', ' + w;
}
// Split off numbers and units
hu = h.replace(/[\d|.]/g,'');
//h = h.replace(/[^\d|.]/g,'');
h = h.replace(hu,'');
wu = w.replace(/[\d|.]/g,'');
//w = w.replace(/[^\d|.]/g,'');
w = w.replace(wu,'');
// Apply to the target element
if (b.style) {
msg += '<br>Setting ' + b.id + ' to (h,w):'
+ h + hu + ', ' + w + wu;
b.style.height = h + hu;
b.style.width = w + wu;
}
document.getElementById('div0').innerHTML = msg;
}
function slideOut(el) {
if (el.timer) window.clearTimeout(el.timer);
var h0 = 0, // Current height
w0 = 0, // Current width
hu, wu; // Height & width units
if (window.getComputedStyle) {
var h = document.defaultView.getComputedStyle(el,
'').getPropertyValue('height');
var w = document.defaultView.getComputedStyle(el,
'').getPropertyValue('width');
} else if (el.currentStyle) {
var h = eval('el.currentStyle.height');
var w = eval('el.currentStyle.width');
}
hu = h.replace(/[\d|.]/g,'');
h = h.replace(hu,'');
wu = w.replace(/[\d|.]/g,'');
w = w.replace(wu,'');
var d = 10; // Delay between increments
var inc = 200; // Number of increments
var hi = h/inc; // Height increments
var wi = w/inc; // Width increments
el.style.height = h0 + hu;
el.style.width = w0 + wu;
el.style.display = '';
el.timer = window.setInterval(function() { // Start timer
h0 += hi;
w0 += wi;
if ( h0 > h) {
h0 = h;
w0 = w;
window.clearTimeout(el.timer); // Stop timer
el.timer = null; // Clear timer
}
el.style.height = h0 + hu;
el.style.width = w0 + wu;
}, d); // End timer code
}
</script>
</head>
<body>
<div id="div0" class="div0" onclick="sameSize(this,'div1');">
This is div0,click on me to make div1 the same size</div>
<div id="div1" class="div1" onclick="slideOut(this);">div1</div>
</body>
</html>
