incrementing height of a div

[jamescover]

This works:


<div id="oDiv" style="width:300;height:100;background-color:#000000;"></div>

<a href="#" onclick="getHght('exp');">Expand</a>
<a href="#" onclick="getHght('con');">Contract</a>

<script type="text/javascript">
<!--

function getHght(act){
var doc = document.getElementById("oDiv");
if (act == "exp"){
doc.style.height = 300;
} else if (act == "con"){
doc.style.height = 100;
}
}

//-->
</script>


This is exhibits the desired functionality, but it doesn't work:


<div id="oDiv" style="width:300;height:100;background-color:#000000;"></div>

<a href="#" onclick="getHght('exp');">Expand</a>
<a href="#" onclick="getHght('con');">Contract</a>

<script type="text/javascript">
<!--

function getHght(act){
var doc = document.getElementById("oDiv");
if (act == "exp"){
doc.style.height += 30;
} else if (act == "con"){
doc.style.height -= 30;
}
}

//-->
</script>


IE give an "invalid argument" error. No error in FF.

I had the same [failed] result using .getAttribute(), and .setAttribute(). How should I approach this?



-james

[hemebond]

The values you assign to these style properties are strings, not numbers. Assigning 300 may work, but that's because the browser is helping you out by assuming you mean pixels.

If you doalert(doc.style.height)it should return a string of "300px". You can't increment that. You need to use something likevar number = Number(String(doc.style.height).slice(0,-2))to get the number, and then adjust and reassign it usingdoc.style.height = number + "px";

[glenngv]

or simply use parseInt()

doc.style.height = parseInt(doc.style.height) + 30 + "px";

[jamescover]

Hey, guys:

Thanks, for responding.

Unfortunately, I'm still not having any luck...

I know typeof doc.style.height, returns type: "string," and I've successfully converted it to a number, but I'm still not having any success using the += operator. I want to animate the div on the vertical axis, by incrementing the height by a few pixels per iteration. Any Ideas? (To be honest, in this instance, I'm not sure why js doesn't perform an automatic numerical conversion.)


-james

[glenngv]

You can't do += because style.height is a string and expects a numerical value appended with unit like "px". If you do this:

doc.style.height += 30;

and the current height of the div is 100px, it would essentially mean:

doc.style.height = "100px" + 30;

that will result to invalid argument error because the output would be:

doc.style.height = "100px30";


You need to do as what hemebond and I suggested.

doc.style.height = parseInt(doc.style.height) + 30 + "px";

[jamescover]

You can't do += because style.height is a string and expects a numerical value appended with unit like "px". If you do this:

doc.style.height += 30;

and the current height of the div is 100px, it would essentially mean:

doc.style.height = "100px" + 30;

that will result to invalid argument error because the output would be:

doc.style.height = "100px30";


You need to do as what hemebond and I suggested.

doc.style.height = parseInt(doc.style.height) + 30 + "px";


...that works. If someone would have said I can't use +=, I would not have pursued it...I get that Action Script, which does the conversion for you....


Thanks!

-james

[glenngv]

...that works. If someone would have said I can't use +=, I would not have pursued it...I get that Action Script, which does the conversion for you....
-james
hemebond said you can't.

If you do

alert(doc.style.height)

it should return a string of "300px". You can't increment that. You need to use something like

var number = Number(String(doc.style.height).slice(0,-2))

[Kor]

If someone would have said I can't use +=,

No one would have said it because you can actually use +=, but only after the string is converted as a number

h=parseInt(doc.style.height);
h+=30;
doc.style.height=h+'px';

[jamescover]

No one would have said it because you can actually use +=, but only after the string is converted as a number
h=parseInt(doc.style.height)+30+"px";
h+=30;
doc.style.height=h+'px';

too verbose for my liking...just brings us back to:

doc.style.height = parseInt(doc.style.height) + 30 + "px";

thanks.

hemebond said you can't.

it should return a string of "300px". You can't increment that. You need to use something like

I understood his meaning to be I couldn't increment a string...it would be concatenated, like, 300px+300px=300px300px. That i understood.

thanks, for your all of your help.



-james

[NoRule23]

Use the offsetHeight attribute... like this...

<div id="oDiv" style="width: 300; height: 100; background-color: #000000;"></div>

<a href="#" onclick=getHght('exp');">Expand</a>
<a href="#" onclick=getHght('con');">Contract</a>

<script type="text/javascript">
<!--

function getHght(act) {
// gets the height of the div
var doc = document.getElementById("oDiv");

// gets the offset height of the div (which is an integer, rather than a string)
var doch = doc.offsetHeight;

if(act == "exp") {
// adds thirty to the variable representing the offset height
doch += 30;

// sets the height to its offset height plus the 30 we added to it,
// plus the 'px' to make make it a valid string so the browswer can process it
doc.style.height = doch + 'px';
} else {
doch -= 30;

// you should probably know what this does
doc.style.height = doch + 'px';
}
}

//-->
</script>