JavaScript / jQuery conflict detection for popups

Question

I am writing a web application that should work on both the iPad and the desktop.

I have a filter section with a pop-up menu coming from the side (the pop-up is absolutely positioned relative to the <li> ):

Everything looks beautiful and a dandy on the desktop, but on the iPad in landscape mode, the bottom of the pop-up window is cut out, since it goes beyond the viewing area.

I tried to solve it using the 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 this only works if the pop-up is facing the left side of the screen, not the bottom.

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

Am I using the JqueryUI position incorrectly? is there a better solution?

Here is a very simplified fiddle

Answer 1

Well, it seems the biggest problem is that the "flip fit" is not really a valid value for collision . (I think this is considered "flip" .) You are probably looking for "flipfit" (without a space) or maybe just "fit" . You also need to make sure that you align the right side of the popup on the left side li - left alignment, left alignment - then overlap and then flipped because there was not enough space. I changed your code and improved its work (but still not quite, you have to configure 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 work in the of argument, so I replaced it.

You also do not need to set the right value for the popup, since .position sets left , and setting both compresses the popup.

As for the arrow, why don't you just put them separately? If the popup needs to move a bit, it will overlap the arrow, but that will simply reduce the arrow.