Определение изменения позиции элемента HTML

РЕДАКТИРОВАТЬ: см. обновление!

У меня есть следующий html:

<body>
  <span id="milestone1">
  </span>   
  <img id="image1" src="blabla.jpeg" style="width:400px;height:200px;" />
  <div id="divOverlayOverImage1" style="position:absolute; top:100px; left:40px; width:400px;height:200px;" onclick="DoFunkyStuff();"><div>
</body>

Сначала divOverlayOverImage1 располагается над Image1, покрывая его, но если я запустил код ниже, элемент #divOverlayOverImage1 больше не будет закрывать элемент #image1.

$("#milestone1").after('<div style="width:500px; height:500px; background-color:blue;">');

Я хочу иметь событие, которое уведомляет меня, когда #image1 изменяет свою позицию, поэтому я могу обновить позицию #divOverlayOverImage1.

ПРИМЕЧАНИЕ: У меня нет полного контроля над dom. команда $("#milestone1").after('<div style="width:500px; height:500px; background-color:blue;">'); запускается третьей стороной.

UPDATE: У меня нет полного контроля над DOM, поэтому я не могу поместить обратный вызов в функцию добавления элементов, так как это не я делаю этот вызов. Кроме того, я не могу изменить HTML как сумасшедший. Я просто прихожу к набору веб-сайтов, добавляю и накладываюсь на конкретный образ, обрабатывающий JavaScript и его. Существуют и другие конкуренты, которые также меняют HTML.

Ответ 1

Если у вас есть полный контроль над DOM, и я предполагаю, что у вас есть, вы можете добавить вызов для каждого изменения, которое вы делаете в DOM, которое повлияет на это <span>.

function yourFunction() {
    $("#milestone1").after('<div style="width:500px; height:500px; background-color:blue;">');
    updateMyOverlayPosition();
}

Если это не работает, вы можете попробовать следующее: Обнаружить изменения в DOM

Изменить

если вам нужны события:

$('#image').on('adjustOverlay',function(e) {
    // adjust the position of the overlay
}

$("#milestone1").after('<div style="width:500px; height:500px; background-color:blue;">');
$('#image').trigger('adjustOverlay', {extra: "info", some: "parameters"});

edit2

Поскольку у вас нет полного контроля над изменениями в DOM, и вы можете удивиться, вы можете либо пойти со ссылкой, которую я уже предоставил выше, либо проверить интервал, если наложение все еще там, где оно должно быть. Это не решает проблему так, как вы этого хотите, но в DOM-изменениях нет никакого родного события, поэтому вам придется придерживаться какой-то работы.

var checkTime = 100; //100 ms interval
var check = setInterval(function() {
    // adjust overlay position
}, checkTime);

Edit3

следующее возможное решение: если вы знаете, как вставлять код в DOM, вы можете попытаться изменить этот метод, чтобы он всегда запускал ваш adjustOverlayPosition() или запускал событие, если вам нравятся события. Пример: если он вставлен в jQuery .after(), вы можете изменить эту функцию:

jQuery.fn.extend({
    // since the .after() function already exists, this will
    // actually overwrite the original function. Therefore you need
    // the exact code that was originally used to recreate it.
    after: function() {
        return this.domManip( arguments, function( elem ) {
        if ( this.parentNode ) {
            this.parentNode.insertBefore( elem, this.nextSibling );
        }
        // call the function directly
        adjustOverlayPosition();
        // or call an event
        $('#image').trigger('adjustOverlay', {extra: "info", some: "parameters"});
    }
});

Недостаток: это решение может быть рискованным и работать, только если вы знаете код, который используется первоначально. Таким образом, это также будет зависеть от версии jQuery.

Ответ 2

Одним из способов решения проблемы является реорганизация вашего макета. Оберните свое изображение и наложите на div. Таким образом, они всегда будут оставаться таковыми.

<div id="wrap">
    <img id="i1" src="..." />
    <div id="overlay" />
</div>

#wrap {
    position: relative;
    width: 400px;
    height: 200px;
}

#overlay {
    position: absolute;
    top: 100px; 
    left: 40px; 
    width: 400px;
    height: 200px;
}

Ответ 3

Если обертывание img с ovelay является только вашим требованием, я думаю, вы можете пойти с чистым css-решением.

Попробуйте демонстрацию

HTML

<p id="milestone1">
First Overlay
</p>   
<div class="img-overlay-container" style="width:400px;height:200px;">
 <img id="image1" src="blabla.jpeg"/>
 <div id="overlay1" onclick="alert('clicked');">
 </div>
</div>  
<p id="milestone2">
Second Overlay
</p>       
<div class="img-overlay-container" style="width:100px;height:400px;">
 <img id="image2" src="blabla.jpeg"/>
 <div id="overlay2" onclick="alert('clicked');">
 </div>
</div>

CSS

.img-overlay-container{
  position: relative;
  display:inline-block;
}
.img-overlay-container > img{

}

.img-overlay-container > div{
  position:absolute; 
  top:0px; 
  left:0px; 
  width:100%;
  height:100%; 
  background: rgba(3,3,3,.1);
}

Ответ 4

function changePosition(callback) {
  $("#milestone1").after('<div style="width:500px; height:500px; background-color:blue;">');
 callback();
}

Затем вы можете вызвать changePosition(function() {// Add your event handler function}).

Надеюсь, это поможет вам!