Modifier dynamiquement l'emplacement de la liste en fonction d'où il affiche

J'aimerais changer dynamiquement la liste de placement (gauche/droite, haut/bas) en fonction de l'endroit où se trouve l'élément sur l'écran.

//get_popover_placement(dom_el) returns 'left', 'right', 'top', or 'bottom'
    function set_popover(dom_el) {
    var the_placement = get_popover_placement(dom_el);
    $(dom_el).popover({
        offset: 10,
        placement: the_placement
    }).popover('show');
}

//set the placement on every hover
$('a[data-rel=popover]').hover(function(){
        set_popover(this);
    }, function(){});

Il fonctionne de la première heure, mais si la position de l'élément change (lorsque la fenêtre est redimensionnée, par exemple), le placement n'est pas mis à jour avec les appels suivants à set_popover.

J'ai ajouté un peu de code pour get_popover_placement qui ajoute une couleur différente de la frontière de l'élément, selon le placement. La couleur de la bordure est mis à jour chaque fois, en indiquant le code est appelé et les calculs sont effectués correctement, mais que le placement ne sont pas mises à jour.

Il apparaît que si l'option de placement ne peut être définie qu'une seule fois. Comment puis-je contourner cette limitation? Est-il une variable quelque part qui peut être désactivée pour réinitialiser popovers?

Ma réponse à une question similaire peut être utile: stackoverflow.com/questions/10238089/...

OriginalL'auteur jeremiahs | 2012-01-12

  1. 17

    Essayez ce changement, en utilisant le .sur la fonction de() en jQuery pour attacher un écouteur d'événement:

    Changé cette réponse par la mise à jour de Kevin Ansfield - ajouté le code pour la fonction de placement.

        $('a[data-rel=popover]').popover({
      placement: get_popover_placement
    });

    function get_popover_placement(pop, dom_el) {
      var width = window.innerWidth;
      if (width<500) return 'bottom';
      var left_pos = $(dom_el).offset().left;
      if (width - left_pos > 400) return 'right';
      return 'left';
    }
    Le résultat est le même que jeremiahs code original. La seule différence est qu'il est l'aide de l' .hover() la fonction raccourci.
    Vous avez raison, après le test j'ai mis à jour le code pour le même que le vôtre, l'ajout d'un scénario d'utilisation de la fonction de placement. Merci.
    J'ai modifié un peu, car il était à éclater au-dessous de la partie inférieure de la fenêtre. function get_popover_placement(pop, dom_el) { var width = window.innerWidth; var height = window.innerHeight; var top_pos = $(dom_el).offset().top; if (height - top_pos < 400) { return 'top'; } if (width < 500) { return 'bottom'; } var left_pos = $(dom_el).offset().left; if (width - left_pos > 400) { return 'left'; } return 'left'; }
    J'ai utilisé celui-ci, mais avec le "droit" de l'option choisie par "si (left_pos < largeur / 2) le retour de "droite";". De cette manière, il tend à la liste vers le milieu de la page, ou vers le bas si c'est étroit. De l'Excellent travail.

    OriginalL'auteur Calle

  2. 6

    Je viens de vérifier le fichier de bootstrap source de nouveau et se rendit compte que les fonctions passé à la propriété de placement d'obtenir des arguments passés. J'ai réussi à obtenir quelque chose de similaire à ce que vous essayez, essayez ce qui suit et voyez si cela fonctionne pour vous:

    $('a[data-rel=popover]').popover({
  offset: 10,
  placement: get_popover_placement
});

function get_popover_placement(pop, dom_el) {
  //your placement function code here
}
    Vous venez d'enregistrer ma journée! Bien que le placement est documenté nulle part, surtout le fait qu'il reçoit des arguments...

    OriginalL'auteur Kevin Ansfield