Solved

Javascript addition from element's styles

Posted on 2009-05-08
19
642 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:the_hero
  • 10
  • 5
  • 3
  • +1
19 Comments
 
LVL 39

Expert Comment

by:abel
Comment Utility
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
Comment Utility
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
Comment Utility
sorry, typo, that should be

margin-top: 100px;
of course (colon missing in first post)
0
 
LVL 1

Author Comment

by:the_hero
Comment Utility
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
Comment Utility
There are many ways, i.e., you can do this:
var intPix = strPix.replace(/px/, "");
0
 
LVL 12

Expert Comment

by:alien109
Comment Utility
top = parseInt(element.offsetTop);
height = parseInt(element.offestHeight);

sorry - typed offsetWidth earlier!
0
 
LVL 39

Expert Comment

by:abel
Comment Utility
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
Comment Utility
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
Comment Utility
this might/might not be of interest to you all
http://robertnyman.com/2006/04/24/get-the-rendered-style-of-an-element/
0
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

 
LVL 1

Author Comment

by:the_hero
Comment Utility
@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
Comment Utility
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
Comment Utility
<$.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:the_hero
Comment Utility
@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
Comment Utility
> 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:the_hero
Comment Utility
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 500 total points
Comment Utility
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
Comment Utility
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:the_hero
Comment Utility
Thank you!
0
 
LVL 39

Expert Comment

by:abel
Comment Utility
You're welcome!

-- Abel --
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

763 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

Need Help in Real-Time?

Connect with top rated Experts

8 Experts available now in Live!

Get 1:1 Help Now