Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Javascript addition from element's styles

Posted on 2009-05-08
19
Medium Priority
?
658 Views
Last Modified: 2012-05-06
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

0
Comment
Question by:Shaye Larsen
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 10
  • 5
  • 3
  • +1
19 Comments
 
LVL 39

Expert Comment

by:abel
ID: 24340045
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;
}
0
 
LVL 12

Expert Comment

by:alien109
ID: 24340067
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)
0
 
LVL 39

Expert Comment

by:abel
ID: 24340068
sorry, typo, that should be

margin-top: 100px;
of course (colon missing in first post)
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 1

Author Comment

by:Shaye Larsen
ID: 24340155
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?
0
 
LVL 39

Expert Comment

by:abel
ID: 24340188
There are many ways, i.e., you can do this:
var intPix = strPix.replace(/px/, "");
0
 
LVL 12

Expert Comment

by:alien109
ID: 24340193
top = parseInt(element.offsetTop);
height = parseInt(element.offestHeight);

sorry - typed offsetWidth earlier!
0
 
LVL 39

Expert Comment

by:abel
ID: 24340213
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/, ""));
0
 
LVL 39

Expert Comment

by:abel
ID: 24340240
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.
0
 
LVL 12

Expert Comment

by:alien109
ID: 24340403
this might/might not be of interest to you all
http://robertnyman.com/2006/04/24/get-the-rendered-style-of-an-element/
0
 
LVL 1

Author Comment

by:Shaye Larsen
ID: 24340622
@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

0
 
LVL 39

Expert Comment

by:abel
ID: 24340682
I think I see what you are missing. Change the last line:

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

0
 
LVL 29

Expert Comment

by:Badotz
ID: 24340866
<$.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>
0
 
LVL 1

Author Comment

by:Shaye Larsen
ID: 24341009
@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

0
 
LVL 39

Expert Comment

by:abel
ID: 24341188
> 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.
0
 
LVL 1

Author Comment

by:Shaye Larsen
ID: 24341197
I use a lot of jQuery too. Got anything for this? I'll do a search too.
0
 
LVL 39

Accepted Solution

by:
abel earned 2000 total points
ID: 24341314
I believe you forgot to mention that your javascript has errors... which is why it is not run at all... And we forgot to ask about any errors.

I'm not sure if the behavior is what you want (you seem to try to make the outermost div element higher, but the effect is zero) but the code below will at least work without errors. I removed the getElementById which was outside of the function, where it could not possibly work (causing the errors), and I removed the <script> in the middle of the page, which couldn't work either because it referenced variables that were not yet available.

I added an additional + 150 to make sure you have a visual effect of the code.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Div Auto-sizing Test</title>
 
<style type="text/css">
.wrapper {
    background:url(http://fabuso.com/SiteTemplatePSDs/0105/images/bg.jpg) repeat;
    position:relative;
    width:900px;
    height:100%;
    float:left;
}
.level1 {
    width:100%;
    height:100%;
    float:left;
    background:url(http://fabuso.com/SiteTemplatePSDs/0105/images/index2_02.jpg) no-repeat top;
}
.level2 {
    width:100%;
    height:100%;
    float:left;
    background:url(http://fabuso.com/SiteTemplatePSDs/0105/images/index2_03.jpg) no-repeat bottom;
}
.child {
position:relative;
width:100%;
height:100%;
}
.inner1 {
width:300px;
height:100%;
float:left;
}
.inner2 {
width:300px;
height:100%;
float:left;
}
.inner3 {
width:300px;
height:100%;
float:left;
}
</style>
<script type="text/javascript">
function initHeight() {
    var grabInnerElement = document.getElementById('innerElement');
    var elementTop = grabInnerElement.offsetTop;
    var elementHeight = grabInnerElement.offsetHeight;
    var overallHeight = elementTop + elementHeight + 150;
    
    document.getElementById('theWrapper').style.height=overallHeight + "px";
}
 
</script>
 
</head>
<body onLoad="initHeight();">
 
<div id="theWrapper" class="wrapper">
  <div class="level1">
 
   <div class="level2">
    <div class="child1" id="childOne">
        <div class="inner1">Content 1 <img id="innerElement" style="position:absolute; top:300px; left:10px; height:50px; width:150px;" src="http://www.dalelarsen.com/images/logo_250.jpg">
        Content 1 I need to fill this with contentContent 1 I need to fill this with contentContent 1 I need to fill this with contentContent 1 I need to fill this with contentContent 1 I need to fill this with contentContent 1 I need to fill this with content
        Content 1 I need to fill this with contentContent 1 I need to fill this with contentContent 1 I need to fill this with contentContent 1 I need to fill this with contentContent 1 I need to fill this with contentContent 1 I need to fill this with content
        Content 1 I need to fill this with contentContent 1 I need to fill this with contentContent 1 I need to fill this with contentContent 1 I need to fil
        </div>
        <div class="inner2">Content 2 --
         --</div>
        <div class="inner3">Content 3</div>
 
    </div>
  </div>
 </div>
</div>
 
</body>
</html>

Open in new window

0
 
LVL 39

Expert Comment

by:abel
ID: 24341315
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.
0
 
LVL 1

Author Closing Comment

by:Shaye Larsen
ID: 31579634
Thank you!
0
 
LVL 39

Expert Comment

by:abel
ID: 24356296
You're welcome!

-- Abel --
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
This article discusses how to implement server side field validation and display customized error messages to the client.
In this fifth video of the Xpdf series, we discuss and demonstrate the PDFdetach utility, which is able to list and, more importantly, extract attachments that are embedded in PDF files. It does this via a command line interface, making it suitable …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

604 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question