How to get and track a div height in a innerHTML string? Is that possible?-CodePudding

So with each iteration, the div, "activityItems" is getting bigger. What I'm trying to do is track the height of the div and make sure it doesn't exceed the page height(PDF). Based on the height of the div I want to put a page-break when it exceeds specified height limit. I know the PDF is going to be a height of 792 px. However, I want to put a page-break a little bit before that. Anyway, my question is how do I get and track the height of the div through each iteration from an innerHTML string? The following is a code snippet. Also, if there is a jQuery solution, I will accept that too.

var html = ''
var webElement = document.createElement('div');
webElement.id = 'items';


for (i=1; i< checlboxes.length; i  )
{
    if (checkboxes[i].checked)
    {
        var OfficeName = row.cells[4].innerHTML;
        var Summary = row.cells[8].innerHTML;
        var Activities = row.cells[10].innerHTML;   

    

        html  = '<br/>';
        html  = '<div ><div  style="display:inline-block; font-weight:bold">'   SummaryTitle   ' FROM '   OfficeName   ':    </div></div>'
        html  = '<div ><div  style="display:inline-block; text-align:justify">'   ActivityDetails   '</div></div>'
        html  = '<br/>'

        webElement.innerHTML  = '<div id="activityItems">'   html   '</div>';
    
    }

}

CodePudding user response：

Yes, it's definitely possible to track and get a div height. First of all, you can get the height of the div by using attributes of dom element like the following.

clientHeight : just includes the padding of the div
offsetHeight : just includes the padding and border of the div

And you can also use getBoundingClientRect function of the element like this.

const ele = document.getElementById("myDiv")
let rect = ele.getBoundingClientRect()
console.log("height: "   rect.height)

That's it and in terms of track, you can use just a kind of timer or thread. may setTimeOut function in javascript.

CodePudding user response：

"...how do I get and track the height of the div through each iteration..."

Track individual element mutations with MutationObserver. It allows you to track when the various changes are made to an element.

The below code sets up an observer on your div and reports the height as it grows. You can replace the console log with a function call that builds in your page break at that point.

EDIT: I realized that multiple elements rendered in a list will not fire the observer due to the async nature of the event. So I added a timeout in order to allow the observer to fire between each mutation. I also added more than one checkbox for clarity.

Then, you can either stop the observer (with .disconnect()) or allow it to continue listening for more changes.

var html = '';
var webElement = document.getElementById('items');
var checkboxes = document.querySelectorAll('[type=checkbox]');
const observer = new MutationObserver(callback);
observer.observe(webElement, {
  attributes: true,
  childList: true,
  subtree: true
});

checkboxes.forEach(cb => {
  setTimeout(() => {
    html = '';
    if (cb.checked) {
      var OfficeName = "office name";
      var SummaryTitle = "summary";
      var Activities = "acvities";
      html  = '<br/>';
      html  = '<div ><div  style="display:inline-block; font-weight:bold">'   SummaryTitle   ' FROM '   OfficeName   ':    </div></div>'
      html  = '<div ><div  style="display:inline-block; text-align:justify">'   Activities   '</div></div>'
      html  = '<br/>'
      webElement.innerHTML  = '<div id="activityItems">'   html   '</div>';
    }
  }, 0);
});

function callback(mutationsList, observer) {
  for (const mutation of mutationsList) {
    if (mutation.type === 'childList') {
      console.log('Item div height: ', mutation.target.getBoundingClientRect().height);
    }
  }

};

<input type="checkbox" checked>
<input type="checkbox" checked>
<div id="items"></div>