JavaScript/Jquery Détection de collision pour popup

Question

J'écris une application web qui doit fonctionner à la fois sur l'iPad et sur le navigateur de bureau.

J'ai une section filtres avec une popup venant du côté (la popup est absolument positionnée par rapport au filtre). <li> ) :

Tout se passe bien sur le bureau, mais sur un Ipad en mode paysage, le bas de la popup est coupé puisqu'il dépasse la fenêtre de visualisation.

J'ai essayé de résoudre le problème en utilisant position de l'interface utilisateur :

$('.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 
});

mais cela ne fonctionne que si la fenêtre contextuelle se heurte au côté gauche de l'écran et non au bas de l'écran.

Je dois également m'assurer que le triangle se déplace en conséquence, car il doit toujours pointer vers le bon filtre.

Est-ce que j'utilise mal la position de JqueryUI ? Existe-t-il une meilleure solution ?

Voici un violon très simplifié

Answer 1

D'accord, il semble que le plus gros problème soit que "flip fit" n'est pas une valeur valide pour collision . (Je pense qu'il est traité comme "flip" .) Vous recherchez probablement "flipfit" (sans espace), ou simplement "fit" . Vous devez également veiller à aligner les droit de la fenêtre contextuelle avec le côté gauche de l'écran. li - l'alignement de la gauche sur la gauche les fait se chevaucher, puis il s'est inversé parce qu'il n'y avait pas assez de place. J'ai modifié votre code et cela fonctionne mieux (mais pas encore parfaitement ; vous devrez le modifier).

$('.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) ne semblait pas fonctionner dans le of Je l'ai donc remplacé.

Vous ne devez pas non plus définir l'option right de la fenêtre contextuelle, puisque .position définit le left et le réglage des deux permet de réduire la taille de la fenêtre contextuelle.

Quant à la flèche, pourquoi ne pas la positionner séparément ? Si le popup doit se déplacer un peu, il chevauchera un peu la flèche, mais cela ne fera que rendre la flèche plus petite.