After stumbling upon the window.onresize function, I was able to solve my issue. I'm curious if there is comprehensive documentation in JavaScript or browsers that outlines all the available methods and properties. Trying to learn through guesswork and Google searches has been a bit slow for me so far.
window.onload = init;
var dayObjTemplate;
var containerRef;
var objCount = 0;
function init() {
dayObjTemplate = document.getElementById("obj0");
containerRef = dayObjTemplate.parentNode;
dayObjTemplate.parentNode.removeChild(dayObjTemplate);
for(var i = 0; i < 1; i++) addNewDayObject(11, 8, 2015)
window.onresize = function updateNewContainerWidth(argument) {
var conWdt = containerRef.offsetWidth;
while(objCount < Math.floor(conWdt / (250+5))) {
addNewDayObject(11, 8, 2015);
}
while(objCount > 1 && objCount > Math.floor(conWdt/(250+5))) {
removeLastDayObject();
}
}
}
function removeLastDayObject() {
containerRef.removeChild(document.getElementById("obj"+objCount));
objCount--;
}
function addNewDayObject(day, month, year) {
var d = new Date(year, month, day);
var dayNames=['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
objCount++;
var clone = dayObjTemplate.cloneNode(true);
clone.id = "obj" + objCount;
clone.getElementsByClassName("dayObjDayLabel")[0].innerHTML = dayNames[d.getDay() - 1];
clone.getElementsByClassName("dayObjNumLabel")[0].innerHTML = day;
clone.getElementsByClassName("dayObjMYLabel")[0].innerHTML = month + ", " + year
document.getElementById("dayObjContainer").appendChild(clone);
}
Apologies for the messy code, but hopefully, this snippet can be helpful to others facing similar challenges like mine.