iframe-resizer icon indicating copy to clipboard operation
iframe-resizer copied to clipboard

lowerElement is good but lowerVisibleElement is much better.

Open qnodesign opened this issue 8 years ago • 2 comments

Hi, I would like to highlight that the lower element could be enhanced with the lower visible element option so if I have eg. a scrollable list with hundreds of elements, but the UL only 300px the resize will measure the last LI instead of the UL.

In my case the taggedElement would be a big overhead as I show and hide content and would be much complicated instead of checking the last visible element lowest position.

qnodesign avatar Aug 08 '17 07:08 qnodesign

Would welcome a PR. Someone else tried this once and ran into problems making it work.

You can tag more than one element on a page and it will then pick the lowest of the tagged elements of that is any help.

davidjbradshaw avatar Aug 08 '17 08:08 davidjbradshaw

For the pseudo-code:

var walker = document.createTreeWalker(body, ...),
      bottom = body.height + padding;

while(node) {
   var node = walker.next();

   if (node.style.display != "none") {
      bottom = Math.max(bottom, node.getBoundingClientRect().bottom);
      if (node != body &&  node.style.overflow == "hidden") {
         node = walker.nextSibling();
      } else {
         node = walker.next();
      }
   }
}

It probably wants splitting up into a filter for the overflow and normal .next for the loop to take a little overhead off it. Also (obviously I hope), window.getComputedStyle (cache it, and case insensitive).

Not got enough spare time to do proper code and a PR myself here, but hopefully it's helpful (and there'll be more feedback) - and if nobody else has done one when I do get time then I'll happily PR :-)

Logic for ignoring the overflow on the body is simply because a lot of pages hide the overflow on it to prevent scrolling, but actually want to grow to fit so there's no need for scrolling.

Rycochet avatar Aug 18 '17 08:08 Rycochet

Added :not(option):not(optgroup) to querySelectorAll('body *') in v5.0.0

davidjbradshaw avatar Feb 04 '24 11:02 davidjbradshaw