Window edge detect

[daemonhunt]

Hi, please suggest a way I can get this implementation of window edge detection to play nice with .hoverIntent turned on. Many thanks!

[cdevroe]

@daemonhunt Did you ever get edge detection for windows working with Hover Intent?

[daemonhunt]

No sorry, I didn't. I still haven't heard back from the developer, and still haven't figured it out myself. I have it running as is on my production site as is:

http://www.wananga.ac.nz

On 7/05/2014, at 2:40 am, Colin Devroe [email protected] wrote:

@daemonhunt Did you ever get edge detection for windows working with Hover Intent?

— Reply to this email directly or view it on GitHub.

[cdevroe]

@daemonhunt I believe I have a solution. Essentially, you were trying to get the width of an unordered list that was still invisible, so it would essentially return 0 all the time. See line 49: https://github.com/daemonhunt/flexnav/commit/0c17b50ec21bb1ed407a2818b2da60d647fa2413#diff-139b575467aa22281fca8dfc0974fcbdR49

So, rather than running this outside of showMenu I decided to run this inside showMenu but on the parent UL. So, as you hover over an element with a class of "item-with-ul" the script would determine if the subsequent menu will show up off stage and add a class.

So, my showMenu looks something like this:

showMenu = function() {
      if ($nav.hasClass('lg-screen') === true && settings.hover === true) {
        /* Edge Detect */
        if (settings.detectEdges === true) {    
          var elm = $(this);
          var off = elm.offset();
          var l = off.left;
          var w = elm.width();
          var docW = $(window).width();
          var isEntirelyVisible = (l + 320 <= docW);

          if (!isEntirelyVisible) {
              var edgeDetectClass = ' edge';
          } else {
              var edgeDetectClass = '';
          }
        }

        if (settings.transitionOpacity === true) {
          return $(this).find('>ul').addClass('flexnav-show '+edgeDetectClass).stop(true, true).animate({
            height: ["toggle", "swing"],
            opacity: "toggle"
          }, settings.animationSpeed);
        } else {
          return $(this).find('>ul').addClass('flexnav-show '+edgeDetectClass).stop(true, true).animate({
            height: ["toggle", "swing"]
          }, settings.animationSpeed);
        }
      }
    };

Since we're setting a min-width on LIs the 320 you see (rather than width) is the width of two L Is. It is a bit hacky and I hope to make it better and make a pull request in the future.