This is for vertical superfish menus. In supposition.js, when displaying a child menu and the menuHeight is greater than the offsetTop and offsetTop plus menuHeight is greater than baseline, then expandUp is false and the menu display gets cut off on the bottom of the screen.

Here is my fix, not sure if it works in all cases.

       var expandUp = ((offsetTop + menuHeight > baseline) && (offsetTop > menuHeight)), centerMenu = (offsetTop < menuHeight);
        if (expandUp) {
          $u.css('bottom', menuParentHeight + 'px');
          $u.css('top', 'auto');
        }
        if (centerMenu) {
          $u.css('bottom', (menuHeight/2 - offsetTop) + 'px');
          $u.css('top', 'auto');
        }

Since this is for the Superfish for Drupal library do you want a patch here, or a pull request on github?

Comments

vwX’s picture

vwX commented

This didn't work in all instances, specifically when the parent menu is near the top of the screen.

So below is better fix to supposition.js:

        var windowHeight = $w.height(),
        offsetTop = $u.offset().top - $w.scrollTop(),
        menuParentShadow = ($u.closest('.sf-menu').hasClass('sf-shadow') && $u.css('padding-bottom').length > 0) ? parseInt($u.css('padding-bottom').slice(0,-2)) : 0,
        menuParentHeight = ($u.closest('.sf-menu').hasClass('sf-vertical')) ? '-' + menuParentShadow : $u.parent().outerHeight(true) - menuParentShadow,
        menuHeight = $u.height(),
        baseline = window.innerHeight;
       var expandUp = ((offsetTop + menuHeight > baseline) && (offsetTop > menuHeight)), centerMenu = ((offsetTop + menuHeight > baseline) && (offsetTop < menuHeight));

        if (expandUp) {
          $u.css('bottom', menuParentHeight + 'px');
          $u.css('top', 'auto');
        }
        if (centerMenu) {
          $u.css('bottom', (menuHeight/2 - offsetTop) + 'px');
          $u.css('top', 'auto');
        }
mehrpadin’s picture

mehrpadin commented
Category: bug » feature

Hey there,

Apologies for missing this! will give it a try right now...

Ok, tried it, it's nice indeed but it does not do something important: when the menuHeight is bigger than the offsetTop the supposition should not do anything actually, the sub-menu hence drops down and the user scrolls down for the rest of the menu items and so on and so forth. With your (offsetTop < menuHeight) this doesn't happen, instead it sends the sub-menus way too much to the top and hence (partially) off-screen :) I believe this should be fairly simple to solve but I can't spend time on this, too busy.

Thanks a lot, I really do appreciate it.

Changing this to a "feature request" since the issue was intentional and not a bug.

mehrpadin’s picture

mehrpadin commented
Issue summary: View changes

wrong name for the javascript file corrected.

rooby’s picture

rooby commented
Title: the superposition.js library does not position long child menus in certain instances. » the supposition.js library does not position long child menus in certain instances.
Issue summary: View changes
ivnish’s picture

ivnish
he/him
commented
Status: Active » Closed (outdated)