Are you curious about the viability of using Javascript to create fluid website layouts? While it is possible, how does it compare in terms of performance and complexity when compared to other methods like CSS3/HTML5? Take a look at the function below that demonstrates this concept. By utilizing Javascript to find element dimensions and position elements accordingly, it showcases the flexibility of this approach. To see it in action, visit this link.
function onPageResize() {
//center the header
var headerWidth = document.getElementById('header').offsetWidth;
var insideHeaderWidth = (document.getElementsByClassName('header')[0].offsetWidth + document.getElementsByClassName('header')[1].offsetWidth + document.getElementById('logoHeader').offsetWidth);
document.getElementsByClassName('header')[0].style.marginLeft = ((headerWidth - insideHeaderWidth) / 2) + "px";
//justify alignment of textboxes
var subtitleWidth = document.getElementsByClassName('subtitle');
var inputForm = document.getElementsByClassName('inputForm');
for (i = 0; i < inputForm.length; i++) {
inputForm[i].style.marginLeft = (subtitleWidth[4].offsetWidth - subtitleWidth[i].offsetWidth) + "px";
}
//place footer on absolute bottom of page
if (window.innerHeight >= 910) {
var totalHeight = 0;
var bodyBlockHeight = document.getElementsByClassName('bodyBlock');
for (i = 0; i < bodyBlockHeight.length; i++) {
totalHeight += bodyBlockHeight[i].offsetHeight;
}
totalHeight += document.getElementById('header').offsetHeight;
document.getElementById('footer').style.marginTop = (window.innerHeight - totalHeight) - document.getElementById('footer').offsetHeight + "px";
} else {
document.getElementById('footer').style.marginTop = "20px"
}
}You can see the above function in action by visiting this link.
We appreciate any insights or opinions you may have on this matter!