Expanding Divs (The basics)
After reading some of the good literature about JavaScript, I am definitively certain that I still have a lot to learn on the subject. However, I am sure peers, beginner programmers, and colleagues alike would appreciate having this article and expand on it (no pun intended).
A Quick Overview of the Method
I found, first of all, that outside declaration of variables works best. These variables will become objects referencing HTML elements. Otherwise, IE sees some errors.
Second, I created 3 functions, that save us some code writing in the long run. The first function returns a reference to the CSS properties of an HTML element by passing its id as a string. The second, returns its height value. The third, returns the its top CSS value.
Then, using an onload function, these references are created after the page is loaded. Then, the new height for the container is calculated, and the footer positioned and displayed.
The Final Code
var banner;
var text;
var container;
var footer;
// defining value variables
var bannerT;
var bannerH;
var textH;
var footerH;
function getStyle(id) {
return document.getElementById(id).style;
}
function getHeight(id) {
return document.getElementById(id).offsetHeight;
}
function getTop(id) {
return document.getElementById(id).offsetTop;
}
onload=function() {
bannerT = getTop(’banner’);
bannerH = getHeight(’banner’);
textH = getHeight(’text’);
footerH = getHeight(’footer’);
container = getS(’container’);
container.height = bannerT + bannerH + textH + footerH + ‘px’;
footer.top = bannerT + bannerH + textH + ‘px’;
footer.display = ‘block’;
}
Conclusion
The more elements you need to position, the longer the onload function gets, but the concept is always the same:
1. Define all the variables.
2. Define the functions: getTop(); getHeight(); and getStyle(); as shown in the example.
3. Use getTop('lastElem'); to get the top location of the variable element on the page (text in most cases), and store it in a variable.
4. Use getHeight('lastElem'); to get the height of the variable element on the page, and store it in a variable.
5. Use getStyle(); to create a reference to the object that you want to reposition.
6. Use this sintax to change the top value and display the bottom elements:
myElem.top = var1 + var2 + ... + 'px';
myElem.display = 'block';
That’s it. I hope that made any sense.