asked on

Javascript addition from element's styles

I am trying to create a little equation by grabbing the 'top' and 'height' styles of an element and adding them together.

I'm not sure how to do this. I need to grab the 'top' and the 'height' of #innerElement and set the result to be the height of #theWrapper.

The reason is because I have an absolute element that is within a div and the absolute element sits below the specified height of the container meaning in sits outside its boundaries. So if I grab its position from the top and its height and add that together that should be the height of the container.

Here is the script I have come up with.

<script type="text/javascript">
var grabInnerElement = document.getElementById('innerElement');
function initHeight() {
var overallHeight = parseInt(grabInnerElement.style.top) + parseInt(grabInnerElement.style.height);
document.getElementById('theWrapper').style.height=overallHeight;
}
</script>

Open in new window

abel

I have an easier solution for you, perhaps: if the #theWrapper is given a position other than static (i.e., relative) than the top right of the #theWrapper element becomes the zero-point for the #innerElement. That means: less calculation, less troubles and you can just set the properties of the #innerElement relative to the #theWrapper.

Furtheron: the bottom of #theWrapper can also be reached by using bottom: 0 (do not use top) and a margin-top that is equal to the height of #innerElement. This will literally push it below the bottom of the #theWrapper:

#theWrapper {
position:relative;
}

#innerElement {
bottom: 0;
margin-top 100px;
height: 100px;
}

alien109

unless you set those styles specifically, they will return null/empty

try the properties offsetTop and offsetWidth (which are not members of the style object, fyi)

abel

sorry, typo, that should be

margin-top: 100px;

of course (colon missing in first post)

Shaye Larsen

ASKER

Thank you for your responses!

The position of #innerElement is set by top and left by our users in a UI. They drag the element and the coordinate is set. It is saved into a database via java and is then pulled into the template via javabeans. Therefore I do not know the height of that element or the top position. I cannot change top to offsetTop because the UI / WYSIWYG editor dynamically creates the top attribute. However, in the end, the code is static in the HTML page.

I see the problem is that the value returned by top is not actually an integer. How can I parse the given value to remove px and return the value as an integer?

abel

There are many ways, i.e., you can do this:

var intPix = strPix.replace(/px/, "");

alien109

top = parseInt(element.offsetTop);
height = parseInt(element.offestHeight);

sorry - typed offsetWidth earlier!

abel

However, if you would use addition now, it would still be recognized as a number. You can use parseInt for that.

var intPix = parseInt(strPix.replace(/px/, ""));

abel

what intrigues me, btw, is that parseInt should always try to read it as a number and will read up until it finds something not a number. Maybe alien109 is correct in that the top does not contain a value? The offsetTop is automatically set, so you should be able to use that...

Note: if you use offsetTop or offsetHeight, it is already an integer and you do not need to use parseInt anymore.

alien109

this might/might not be of interest to you all
http://robertnyman.com/2006/04/24/get-the-rendered-style-of-an-element/

Shaye Larsen

ASKER

@alien109 Thanks that was helpful.

The css styles are inline.

Still not working. Here is what I have now:

Let me know if you need the HTML markup

<script type="text/javascript">
var grabInnerElement = document.getElementById('innerElement');
function initHeight() {
var elementTop = grabInnerElement.offsetTop;
var elementHeight = grabInnerElement.offsetHeight;
 
var overallHeight = eval(elementTop) + eval(elementHeight);
 
document.getElementById('theWrapper').style.height=overallHeight;
}
</script>
 
</head>
<body onLoad="initHeight();">

Open in new window

abel

I think I see what you are missing. Change the last line:

document.getElementById('theWrapper').style.height=overallHeight + "px";

Badotz

<$.02>
Regarding [parseInt]: One should specify the radix for the conversion, rather than relying on default values. Thus

var intPix = parseInt(strPix.replace(/px/, ""));

becomes

var intPix = parseInt(strPix.replace(/px/, ""), 10);

Clarity above all else...
</$.02>

Shaye Larsen

ASKER

@abel -- thanks for your help.

For some reason it still doesn't work. Here is a similar example page you can check it at:
http://fabuso.com/div-test.php

Has anyone tried writing this out themselves and got it working?

Here is what I have right now:

<script type="text/javascript">
var grabInnerElement = document.getElementById('innerElement');
function initHeight() {
var elementTop = grabInnerElement.offsetTop;
var elementHeight = grabInnerElement.offsetHeight;
 
var overallHeight = eval(elementTop) + eval(elementHeight);
 
document.getElementById('theWrapper').style.height=overallHeight + "px";
 
}
 
</script>
 
</head>
<body onLoad="initHeight();">

Open in new window

abel

> Has anyone tried writing this out themselves and got it working?
for a long time now I do these things with JQuery or Prototype (depending on my client) because it is so much hassle to get it correct...

I'll check your page.

Shaye Larsen

ASKER

I use a lot of jQuery too. Got anything for this? I'll do a search too.

ASKER CERTIFIED SOLUTION

abel

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

abel

On the part of jquery, you can check the position/size etc properties: http://docs.jquery.com/CSS which make this kind of manipulation easier.

Shaye Larsen

ASKER

Thank you!

abel

You're welcome!

-- Abel --