JavaScript/Jquery Collision detection for popup

Question

I'm writing a web app that supposed to run on both iPad and Desktop Browser.

I have a filters section with popup coming from the side (the popup is absolutely positioned relative to the filter <li> tag):

It all looks nice and dandy on desktop, but on an Ipad in landscape mode, the bottom of the popup is cut since it goes beyond the viewport.

I tried solving it using queryUI position:

$('.capbIpadPopupAutoComplete').position({
    "my": "left center" ,      //  Horizontal then vertical, missing values default to center
    "at": "left top",     //  Horizontal then vertical, missing values default to center
    "of": $(this).closest('li'),     //  Element to position against 
    // "offset": "20 30" ,      //  Pixel values for offset, Horizontal then vertical, negative values OK
    "collision": "fit flip" //  What to do in case of 
});

but that only works if the popup collides with the left side of the screen and not the bottom.

I also need to make sure the triangle moves accordingly as it should always point to the correct filter.

Am I using JqueryUI position wrong? is there a better solution?

Here is a very simplified fiddle

Answer 1

Okay, it looks like the biggest problem is that "flip fit" isn't actually a valid value for collision. (I think it's being treated as "flip".) You're probably looking for "flipfit" (no space), or maybe just "fit". You should also make sure to align the right side of the popup with the left side of the li - aligning the left with the left makes them overlap, and then it flipped because there wasn't enough room. I tweaked your code and got it working better (but still not perfectly; you'll have to tweak it).

$('.capbIpadPopupAutoComplete').position({
    "my": "right top" ,      //  Horizontal then vertical, missing values default to center
    "at": "left top",     //  Horizontal then vertical, missing values default to center
    "of": $('.capbStrategicPlan'),     //  Element to position against 
    // "offset": "20 30" ,      //  Pixel values for offset, Horizontal then vertical, negative values OK
    "collision": "fit" //  What to do in case of 
});

$(this) didn't seem to be working in the of argument, so I replaced it.

You also need to not set the right value of the popup, since .position sets the left, and setting both squeezes the popup.

As for the arrow, why don't you just position them separately? If the popup has to move in a little, it'll overlap the arrow some, but that'll just make the arrow look smaller.