Align left, unless you need to align right!

 function checkMenuLeft(thisMenu) {
  console.log(thisMenu);
  var menuX = thisMenu.find(">.fsNavPageInfo").css('left');
  // var menuWidth = thisMenu.outerWidth();
  // var winWidth = $(window).width();

  // if ( menuWidth + menuX >  winWidth ) {
  //   menuX = winWidth - menuWidth;
  //  thisMenu.find(">.fsNavPageInfo").css({'left':menuX });
  // }
}
$(".navigation.main .fsNavLevel1 > li").hover(function() {
  checkMenuLeft(this);
})

htt p://wb ais.red esig n.fi nal site.c om/

I’m trying to determine (dynamically) if the dropdown will go off screen. If it is, the dropdown will align to the right of the list item (right:0) instead of on the left. However, I’m getting an error just with this code here (never mind figuring out the logic for the problem).

Uncaught TypeError: thisMenu.find is not a function

Why is this? Console logging shows the correct <li> element, so why can’t it find the dropdown div?

Ok so the .find() error was due to me using “this” instead of $(this) (first was a DOM element, not a jQuery object)
http://stackoverflow.com/questions/24300762/jquery-throws-an-error-that-element-find-is-not-a-function

I was just going to say you forgot the dollar.:slight_smile:

Sweet, all done!

function checkMenuLeft(thisMenu) {
      var menuX = thisMenu.offset().left;
      var menuWidth = thisMenu.outerWidth();
      var winWidth = $(window).width();
      if ( menuWidth + menuX >  winWidth ) {
        thisMenu.addClass("right");
      }
      //no need to add an else removing the class because natural composer JS removes all other classes.
    }
    $(".navigation.main .fsNavLevel1 > li").hover(function() {
        checkMenuLeft($(this).find(">.fsNavPageInfo"));
    })

</thread>

Can someone help me out with this last bit? Somtimes putting it off to the right is bringing it off screen too. So I’m trying to give logic for it. I can’t seem to quite pinpoint it.

function checkMenuLeft(thisMenu) {
      var parentLIWidth=thisMenu.parents("li").width();
      var menuXLeft = thisMenu.offset().left;
      var menuWidth = thisMenu.outerWidth();
      var winWidth = $(window).width();
      console.log(menuXLeft+" "+menuWidth+" "+winWidth);
      if (menuWidth + menuXLeft > winWidth && menuWidth + (menuXLeft-parentLIWidth) > winWidth) {
        thisMenu.addClass("center");
//366 550 882 shoulda been center
      }
      else if (menuWidth + menuXLeft > winWidth && menuWidth + (menuXLeft-parentLIWidth) < winWidth){
        thisMenu.addClass("right");
      }
    }
    $(".navigation.main .fsNavLevel1 > li").hover(function() {
        checkMenuLeft($(this).find(">.fsNavPageInfo"));
    })
    $(".navigation.main .fsNavLevel1 > li").mouseleave(function() {
        checkMenuLeft($(this).find(">.fsNavPageInfo").removeClass("center").removeClass("right"));
    })

Nevermind, I have it. It was just hard to get my brain working in that manner.

 function checkMenuLeft(thisMenu) {
      var parentLIWidth=thisMenu.parents("li").width();
      var menuXLeft = thisMenu.offset().left;
      var menuWidth = thisMenu.outerWidth();
      var winWidth = $(window).width();
      console.log(menuXLeft-menuWidth+parentLIWidth) ;
      if (menuWidth + menuXLeft > winWidth && (menuXLeft-menuWidth+parentLIWidth) < 0) {
        thisMenu.addClass("center");
      }
      else if (menuWidth + menuXLeft > winWidth && (menuXLeft-menuWidth+parentLIWidth) > 0){
        thisMenu.addClass("right");
      }
    }
    $(".navigation.main .fsNavLevel1 > li").hover(function() {
        checkMenuLeft($(this).find(">.fsNavPageInfo"));
    })
    $(".navigation.main .fsNavLevel1 > li").mouseleave(function() {
        checkMenuLeft($(this).find(">.fsNavPageInfo").removeClass("center").removeClass("right"));
    })

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.