Javascript to work with CSS units

**RobG** · Jul 23 '05, 06:10 PM

Re: Javascript to work with CSS units

Nick Goloborodko wrote:[color=blue]
> 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
>
>
>[/color]

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.getEle mentById(b);

// Zilla stuff
if (window.getComp utedStyle) {
var h = document.defaul tView.getComput edStyle(a,
'').getProperty Value('height') ;
var w = document.defaul tView.getComput edStyle(a,
'').getProperty Value('width');
msg += 'getComputedSty le (h,w): ' + h + ', ' + w;

// IE stuff
} else if (a.currentStyle ) {
var h = eval('a.current Style.height');
var w = eval('a.current Style.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.getEle mentById('div0' ).innerHTML = msg;
}

function slideOut(el) {
if (el.timer) window.clearTim eout(el.timer);
var h0 = 0, // Current height
w0 = 0, // Current width
hu, wu; // Height & width units
if (window.getComp utedStyle) {
var h = document.defaul tView.getComput edStyle(el,
'').getProperty Value('height') ;
var w = document.defaul tView.getComput edStyle(el,
'').getProperty Value('width');
} else if (el.currentStyl e) {
var h = eval('el.curren tStyle.height') ;
var w = eval('el.curren tStyle.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.displa y = '';

el.timer = window.setInter val(function() { // Start timer

h0 += hi;
w0 += wi;
if ( h0 > h) {
h0 = h;
w0 = w;
window.clearTim eout(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="sameSi ze(this,'div1') ;">
This is div0,click on me to make div1 the same size</div>
<div id="div1" class="div1" onclick="slideO ut(this);">div1 </div>

</body>
</html>

Javascript to work with CSS units

Javascript to work with CSS units

Comment