Event listener for text container size

[ronpat]

Hi, good morning, Pullo. (It’s 7am here.)

Yes, very much so.

[James_Hibbard]

I’m at work right now (middle of the day here), but if no one beats me to it, I’ll have a look at this tonight

[ronpat]

That works for me. I haven’t slept yet. Am about due to crawl under the covers. My cats think so, too
I appreciate your help.

[PaulOB]

Hi Ron,

Is this just an exercise in JS or is this something that can’t be done in CSS?

It seems similar to this old technique but I may be missing something important

[ronpat]

Hi, Paul. The concept is a carryover from a vB poster whose menu I found interesting. He hasn’t been back, and I don’t believe that he has repaired any of the other major issues with his site, so this is mostly an interesting JavaScript exercise. I had intended to nudge the OP toward the equally distributed menu method back on vB, but didn’t know how to make the distributed menu work with his floating bubble. What I came up with is adequate (not great)… but a good JS exercise for me.

[James_Hibbard]

Hi Ron,

You can write the jQuery function in plain JS like so:

function getStyle(el){
  return el.currentStyle || window.getComputedStyle(el);
}

function getWidth(el){
  return parseInt(getStyle(el).width);
}

function fitMenu() {
  var buttons = document.querySelectorAll('.buttonBox a');
  var margins = parseInt(getStyle(buttons[1]).marginRight);
  var menuBox = Math.floor(getWidth(document.getElementById("menuBox")));
  var navWidth = Math.floor(getWidth(document.getElementById("myList")));
  var drift = 2 * buttons.length;
  var diff = (menuBox - navWidth);

  if (diff < 0 || diff >= drift) {
    correction = Math.floor(diff/drift);
    margins = margins + correction;
    for (i = 0; i < buttons.length; i++) {
      buttons[i].style.marginLeft = margins + "px";
      buttons[i].style.marginRight = margins + "px";
    };
  };
};

The function could do with some refactoring, but to begin with at least, I wanted to keep it relatively analogue to yours, so that it is easier to understand and experiment with.

HTH

[ronpat]

Hi, Pullo,

This is perfect for me because it allows me to compare apples to apples. Thank you very much for taking the time to write this.