Getting a Value from an inline style 1

[Deltran]

I feel bad for asking such a simple question... but I will anyway

I'm having trouble finding the syntax to get the value of something from a style of a div, such as the height. The following is a snippit of what I have now:

<script>
...
var divHeight = document.getElementById(divBox).style.height;
...
</script>

<div id="divBox" style="width:100;height:100">
Hi! I'm a box, and I love you!
</div>

How would I get the height of the div? Any adivce would be welcome. Thx for taking the time to read this.

 

[BabyJeffy]

It looks like you are mostly there. Try adding some quotes:

var divHeight = document.getElementById([COLOR=red][b]"[/b][/color]divBox[COLOR=red][b]"[/b][/color]).style.height;

Oh... you should put some units on the inline style for the div as well...

<div id="divBox" style="width:100[COLOR=red][b]px[/b][/color];height:100[COLOR=red][b]px[/b][/color]">

Since it returns a string (containing the units) you might use parseInt to turn it into a number:

divHeight = parseInt(divHeight,10);

And remember to append the unit back if you are setting the width/height etc again:

divHeight = divHeight + 'px';

Cheers,
Jeff

 

[Deltran]

Thank you for your reply, BabyJeffy, however my problem does not seem to be solved. The parseInt tells me that the value I'm getting is Not a Number :/

I'll show what my code resembles now:

<script>
var divBoxNumber = 1;
...
var mover = "divBox" + divBoxNumber;
...
var divHeight = document.getElementById(mover).style.height;
divHeight = parseInt(divHeight,10);
divHeight = divHeight + "px";
alert(divHeight);
...
</script>

<div id="divBox1" style="position:absolute;left:0px;top:30px;z-index:95;overflow:hidden;height:30px;width:260px">



I'm glad I posted all of that - I found a small typo However my problem still persists :/

The alert(divHeight) will produce a result of 'NaNpx'

 

[BillyRayPreachersSon]

You seem to be calling the code before the document has loaded. Try calling the code as part of a function from the onload event of the body.

Hope this helps,
Dan


[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]

 

[Deltran]

The code is not called until an onClick action is recieved by another div.

To unravel some mystery, I'm making a drop down div menu system for my website.

I got it working, however now I'm trying to thin it down so that I can add PHP to it easier (so it can pull the section titles and the links out of my db instead of me typing them in). When I click on a particular div (the heading for the list of links) I want the height of the div to change (among other things, but they'll fall in place if I could just get that number).

Hope this helps some,

------------------------------
Thanks you for heling me not be so dumb,
Deltran

 

[Deltran]

Here is a link to what I want the code to evenutallly do:

http://www.patricksrealm.com/slidemenu2.php

The version in that file is very static. I'm looking to make it more dynamic so that I can have it connect (via php) to my database and pull out the menu categories and associated links. This problem of not getting the correct value is my only holdup. :/

It performs better in FireFox - I have not a clue why, though. The clicks seem to be more responsive. *shrug*

Once again, thx for the help give sofar, and thx for any more help,

------------------------------
Thanks you for helping me not be so dumb,
Deltran

 

[BillyRayPreachersSon]

It looks fine for me in both Firefox and IE6. What is the problem you are now having?

Dan



[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]

 

[Deltran]

I'm sorry, let me try this again.

slidemenu2.php is fine, working wise.
I did a very brute force approach to programming that page. It WILL NOT BE EASY to move it to another site. My goal is to make a page THAT IS EASY TO MOVE to any other website.

To get to this goal, I need to be able to read the height of a div on the fly in javascript. That is my issue - I can not get a value for a div's height. slidemenu2.php has a work-around: in javascript I give it a variable that tells me what the height is:
var divHeight = 30;
Instead, I want to do something like this:
var divHeight = document.getElementById('divID').style.height;

http://www.patricksrealm.com/slidemenu3.php

is what I'm working on now. At the momoent, all it SHOULD do is present the user with several alert boxes with values - but the second and thrid boxes are empty. If I can get a value passed to these alert boxes, then I know I will be able to use the same value as the height of the div.

http://www.patricksrealm.com/slidemenu3.txt

is the source file for that page - sorry it's so oddly formated: didn't expect to show this copy to anyone.

I hope I elaborated enough on my problem. If not, I can just deal w/ the work-around (although it makes for a horrible piece of code).


------------------------------
Thanks you for helping me not be so dumb,
Deltran

 

[Deltran]

I guess it would have been good of me to point out where the problem is, so you don't have to go though all of my code :/ Sorry for the double-post.

There is a function towards the top of the page called openMenu(). It takesd one parameter. The alert boxes that

http://www.patricksrealm.com/slidemenu3.php

produce come from there. The div that it uses has an id of mover2. That is located towards the bottom of the page.

------------------------------
Thanks you for helping me not be so dumb,
Deltran

 

[Deltran]

Hey, guess what.
It's working the way it should.

I need to thank BabyJeffy again - his solution was what I needed.

So thank you everyone for reading this, and sorry for bothering you guys with this so much. I do appreciate it!

------------------------------
Thanks you for helping me not be so dumb,
Deltran