I wrote a quick and dirty function yesterday that resized a div to the height of it's parent. I hardcoded the div ID in to the function, grabbed the height, grabbed the parent ID and its height, calculated the difference then added some padding on to the original div.
It worked perfectly for what I needed at the time.
Here is the original function
This morning I thought that I should abstract it a little.
But the function no longer works.
Here is the new code
If I pass the ID of the original div to the function it grabs the element OK but fails on the next line.
I'm guessing that I've made a real fundamental error here but don't understand how the function worked with a hardcoded element id and not when I pass one to it as a function parameter.
<honk>*:O)</honk>
Designease Ltd. - polyprop folders, ring binders and creative presentation ideas
Earl & Thompson Marketing - Marketing Agency Services in Gloucestershire
It worked perfectly for what I needed at the time.
Here is the original function
Code:
function balanceBox(){
//get the height of the div
var sportBox = document.getElementById('sportRelief');
sportBoxHeight = sportBox.clientHeight;
//get the height of the parent div
var parentBox = sportBox.parentNode;
parentBoxHeight = parentBox.clientHeight;
var additionalPadding = parentBoxHeight - sportBoxHeight;
sportBox.setAttribute('style','padding-bottom:' + additionalPadding + 'px;');
}
This morning I thought that I should abstract it a little.
But the function no longer works.
Here is the new code
Code:
function balanceBox(element){
//get the height of the div
var thisBox = document.getElementById(element);
var thisBoxHeight = thisBox.clientHeight;
//get the height of the parent div
var parentBox = thisBox.parentNode;
parentBoxHeight = document.parentBox.clientHeight;
//work out hw much extra padding to add
var additionalPadding = parentBoxHeight - thisBoxHeight;
thisBox.setAttribute('style','padding-bottom:' + additionalPadding + 'px;');
}
If I pass the ID of the original div to the function it grabs the element OK but fails on the next line.
I'm guessing that I've made a real fundamental error here but don't understand how the function worked with a hardcoded element id and not when I pass one to it as a function parameter.
<honk>*:O)</honk>
Designease Ltd. - polyprop folders, ring binders and creative presentation ideas
Earl & Thompson Marketing - Marketing Agency Services in Gloucestershire