jquery événement écouter changé de position

J'ai besoin d'écouter un des éléments de la position relative. Ceci est particulièrement utile pour la dynamique layouting questions. Il n'y a pas d'option pour écouter les styles CSS de la même position() ou offset() attributs.

Pourquoi:
La position relative peut changer si un frère ou une sœur modifier ses dimensions à l'intérieur des boîtes de dialogue ou des formes de (re-mise en page). Donc pour les formulaires interactifs cela peut aider à utiliser c'est à dire le maximum de la hauteur ou la largeur de la mère ou quelque chose comme ça.

  • Ce qui peut rendre vos éléments changé de position? Le redimensionnement de la fenêtre? Il y a un événement pour celui-ci
  • Pas que votre plugin est incorrect, mais je me demande dans quelle situation souhaitez-vous l'utiliser? Que feriez-vous dans le gestionnaire d'événement?
InformationsquelleAutor mschmoock | 2013-09-11
  1. 10

    Cette coutume jquery extension est à l'écoute de position de l'objet par minuterie sondage. I. m.o. il n'y a aucune façon de résoudre ce problème sans une minuterie, parce que la position peut être modifiée sans jquery être invoquée à tous (c'est à dire re-layouting éléments frères). Cette solution montres les éléments .position() et .offset() les valeurs. Il peut être facilement améliorée à regarder .css (styles ou d'autres choses qui ne sont pas couverts par jQuery événements.

    jQuery extension:

    jQuery.fn.onPositionChanged = function (trigger, millis) {
if (millis == null) millis = 100;
var o = $(this[0]); //our jquery object
if (o.length < 1) return o;
var lastPos = null;
var lastOff = null;
setInterval(function () {
if (o == null || o.length < 1) return o; //abort if element is non existend eny more
if (lastPos == null) lastPos = o.position();
if (lastOff == null) lastOff = o.offset();
var newPos = o.position();
var newOff = o.offset();
if (lastPos.top != newPos.top || lastPos.left != newPos.left) {
$(this).trigger('onPositionChanged', { lastPos: lastPos, newPos: newPos });
if (typeof (trigger) == "function") trigger(lastPos, newPos);
lastPos = o.position();
}
if (lastOff.top != newOff.top || lastOff.left != newOff.left) {
$(this).trigger('onOffsetChanged', { lastOff: lastOff, newOff: newOff});
if (typeof (trigger) == "function") trigger(lastOff, newOff);
lastOff= o.offset();
}
}, millis);
return o;
};

    L'appeler par:

    $("#<SOME_ID>").onPositionChanged(function(){alert("foobar")});
    • c'est vraiment exagéré
    • BTW: $(this[0]) est le même que this qui se réfère à l'ensemble des éléments. this est déjà un objet jq
    • ouais, mais vous ne pouvez pas exec this.position() donc je la garder comme elle est.
    • Ce qui m'a sauvé. J'ai lié cela comme une réponse à ma question, la voici: stackoverflow.com/questions/33096188/...
    • J'ai ajouté l'extension du script à l'un des généraux du code JS en utilisant <script> tag, et quand j'utilise le onPositionChanged() rien ne se passe. le .onPositionChanged() montre que undefined. S'il vous plaît aider.
    • Oh ... ça fonctionne maintenant. Je viens de remarquer que la bibliothèque jQuery est chargé à deux reprises. C'est pourquoi le plugin a été supprimé.

    InformationsquelleAutor mschmoock
  2. 0

    C'est ma solution qui est basée sur willsteel solution. J'ai eu à suivre l'évolution de la width et offsetWidth. Cela va déclencher la fonction, même si l'élément est devenu invisible/visible pour une raison quelconque.

    Voir mise à jour du code ci-dessous:

    jQuery.fn.onPositionChanged = function (trigger, millis) {
if (millis == null) millis = 100;
var o = $(this[0]); //our jquery object
if (o.length < 1) return o;
var lastPos = null;
var lastOff = null;
var lastWidth = null;
var lastOffWidth = null;
setInterval(function () {
if (o == null || o.length < 1) return o; //abort if element is non existend eny more
if (lastPos == null) lastPos = o.position();
if (lastOff == null) lastOff = o.offset();
if (lastWidth == null) lastWidth = o.width();
if (lastOffWidth == null) lastOffWidth = o[0].offsetWidth;
var newPos = o.position();
var newOff = o.offset();
var newWidth = o.width();
var newOffWidth = o[0].offsetWidth;
if (lastPos.top != newPos.top || lastPos.left != newPos.left) {
$(this).trigger('onPositionChanged', { lastPos: lastPos, newPos: newPos });
if (typeof (trigger) == "function") trigger(lastPos, newPos);
lastPos = o.position();
}
if (lastOff.top != newOff.top || lastOff.left != newOff.left) {
$(this).trigger('onPositionChanged', { lastOff: lastOff, newOff: newOff});
if (typeof (trigger) == "function") trigger(lastOff, newOff);
lastOff= o.offset();
}
if (lastWidth != newWidth) {
$(this).trigger('onPositionChanged', { lastWidth: lastWidth, newWidth: newWidth});
if (typeof (trigger) == "function") trigger(lastWidth, newWidth);
lastWidth= o.width();
}
if (lastOffWidth != newOffWidth) {
$(this).trigger('onPositionChanged', { lastOffWidth: lastOffWidth, newOffWidth: newOffWidth});
if (typeof (trigger) == "function") trigger(lastOffWidth, newOffWidth);
lastWidth= o.width();
}
}, millis);
return o;
};
    InformationsquelleAutor tarekahf
  3. 0

    Ma variante de code ci-dessus qui vont travailler sur plusieurs objets et basé sur n'importe quel sélecteur, mais il ne fonctionne pas avec jQuery exactement.

    var onPositionChanged = function (selector,trigger, millis) {
if (millis == null) millis = 200;
setInterval(function(){
var o_s = jQuery(selector); //our jquery object
if (o_s.length < 1) return o_s;
for(var i = 0; i<o_s.length; i++)
{
var o = o_s.eq(i);
var lastPos = jQuery(o).attr("lastPos");
var lastOff = jQuery(o).attr("lastOff");
lastPos = ((lastPos == "" || lastPos == undefined) ? null : JSON.parse(lastPos));
lastOff = ((lastOff == "" || lastOff == undefined) ? null : JSON.parse(lastOff));
setTimeout(function (o) {
if (o == null || o.length < 1) return o; //abort if element is non existend eny more
if (lastPos == null) lastPos = o.position();
if (lastOff == null) lastOff = o.offset();
var newPos = o.position();
var newOff = o.offset();
if (lastPos.top != newPos.top || lastPos.left != newPos.left) {
jQuery(this).trigger('onPositionChanged', { lastPos: lastPos, newPos: newPos });
if (typeof (trigger) == "function") trigger(o,lastPos, newPos);
lastPos = o.position();
jQuery(o).attr("lastPos",JSON.stringify(lastPos));
}
if (lastOff.top != newOff.top || lastOff.left != newOff.left) {
jQuery(this).trigger('onOffsetChanged', { lastOff: lastOff, newOff: newOff});
if (typeof (trigger) == "function") trigger(o,lastOff, newOff);
lastOff= o.offset();
jQuery(o).attr("lastOff",JSON.stringify(lastOff));
}
}, millis,o);
}
},millis);

    };

    Exemple d'utilisation:

    jQuery(document).ready(function(){
onPositionChanged(".grid-item:not(.d-none)",function(object){
var left_percentage = parseInt(jQuery(object).position().left / jQuery(object).parent().width() * 100);
var parent_width = jQuery(object).parent().width();
var percentage_of_parent = parseInt(jQuery(object).width() / parent_width * 100);
if(left_percentage > 74 && percentage_of_parent >= 25
|| left_percentage > 66 && percentage_of_parent >= 33
|| left_percentage > 49 && percentage_of_parent >= 50)
{
jQuery(object).find(".card").css("margin-right","0px");
jQuery(object).parent().masonry('layout');
}
if(left_percentage < 1)
{
jQuery(object).find(".card").css("margin-left","0px");
jQuery(object).parent().masonry('layout');
}
});

    });

    InformationsquelleAutor Dmtriy Proskurin