By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
460,044 Members | 1,377 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 460,044 IT Pros & Developers. It's quick & easy.

Javascript to work with CSS units

P: n/a
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

Jul 23 '05 #1
Share this Question
Share on Google+
1 Reply


P: n/a
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>
Jul 23 '05 #2

This discussion thread is closed

Replies have been disabled for this discussion.