I have a (blue) div that I want to enlarge (vertically) to cover multiple divs (12 of them) of the same size.
The steps I took are to get the div height (with floating point), multiply the value by 12, then apply the new size to the div.
The resulting div doesn't fit the 12th div, and can't understand why.
I think there is something to do with the border/padding, but the variable
var theAppointCode = "10071000116";
var theAppointLength = 12;
//get the blue cell height
var appHeadHeight = $("#"+theAppointCode).getBoundingClientRect();
appHeadHeight = appHeadHeight.height;
alert("["+appHeadHeight+"] x ["+theAppointLength+"] = ["+(parseFloat(appHeadHeight)*parseFloat(theAppointLength))+"]");
//multiply the cell height by 12
document.getElementById(theAppointCode).style.height = (parseFloat(appHeadHeight)*parseFloat(theAppointLength))+"px";
An alternative approach which uses the position of the rows to calculate the correct height. This is independent from the thickness of the border.
var appointment = $("#" + theAppointCode), row = appointment.closest(".dayrow"), endRow = row.nextAll(".dayrow").eq(theAppointLength - 1); // the row after/below the appointment appointment.height((endRow.position().top - row.position().top));