CODEWITHSUNDEEP
javascripthtmlcssdom
Tower
Tower

Reputation: 102945

Detecting a reflow or moving of an HTML element?

I built an UI widget that shows a floating popup beneath the actual widget. It uses absolute positioning to position itself beneath the widget. What I am concerned is that when the document layout changes a bit, the absolutely positioned element is not beneath my UI widget.

Is there a way to detect if an HTML element has moved or reflowed?

Upvotes: 3

Views: 1448

Answers (3)

Tower
Tower

Reputation: 102945

I found an acceptable solution.

Whenever the floating popup is shown, I create an interval that runs every 250 msec calculating its position again (if the position of the parent has changed). When the popup hides or closes, I end the timer.

Upvotes: 0

ErikPhipps
ErikPhipps

Reputation: 155

You could append the element to the body tag and position it on the page based on the position of the mouse. This is how jQuery UI Dialog and tooltip type scripts and such get around the z-index issue.

something like this if you have jQuery:

$('#clickelement').click(function(e){
     $('#yourlayer').appendTo('body').css({left: e.pageX + 'px',top: (e.pageY + 12) + 'px',zIndex:'10001'}).show();
});

#yourlayer{
    display:none;
    position:absolute;
    width:300px;
}

EDIT: fixed minor typo

Upvotes: 0

casablanca
casablanca

Reputation: 70731

How about using relative positioning and attaching your widget to the actual widget? That way it will always stay in the same position relative to the original widget.

Upvotes: 2

Related Questions