Home/ Questions/Q 8826533
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T07:09:38+00:00

i try to absolutize previously relative DOM element, and everytime i try it, a

  • 0

i try to “absolutize” previously relative DOM element, and everytime i try it, a strang “jump” occures, and i just don’t know what i’m doing wrong or how to solve this.

ok, the JS_fidle can be found here http://jsfiddle.net/rhqy3/3/

this is the dummy HTML

<html>
<body>
    <br><br><h1>one</h1><br><br><br><br>
    <h2>two</h2>
</body>
</html>​

this is the javascript (using jquery)

jQuery.fn.absolutize = function()
{
  return this.each(function()
  {
    var element = jQuery(this);
    if (element.css('position') == 'absolute')
    {
      return element;
    }
    alert('now a jump happens, that should not happen')
    element.css("position", "absolute");
    element.css(element.offset());
    return element;

  });
}


$(document).ready(function() {
            window.setTimeout(function(){$("h1, h2").absolutize()}, 2000)
        });

​
ok, well, after two seconds, when i want to set the elements to their absolute equivalents, there is a …. jump?!? and i don’t know why. i tried $(element).position() instead of offset(), didn’t work out.

update: clarification – the h1 stays where it is, the h2 makes the jump. i tested in to google chrome latest, firefox latest on mac os x lion.

my goal is to set elements (vie the absolutize jquery plugin) to their real (not jumping) equivalent css-absolute position, how to do it? thx, i really appreciate it, thx for your time.

update 2: heureka, i’ve identified the problem (still missing the solution)! the problem: the DOM is too fast. what does this script do: it gets the h1-element, says: take this out of the relative context (the normal rendering flow) and set it to “absolute”, in this moment a browser reflow happens – as the H1 is no longer there, everything moves up. the jump occurs. this is so fast that we don’t see it. now the jquery function goes to the h2 and says “absolute” but in this moment the h2-element has already the “new” relative positioning, the jump did already happen. that’s the reason not everybody sees it, it’s a racing condition. if the browser is to slow triggering the reflow, the DOM still holds the old values. ok
,what to do: we have to collect the postion values of all elements (save them somewhere), then, after all postion values were collected, we update one element after the other. not quite sure how to do this in the context of a jquery plugin, but i will get to it (tonight, now back to work).

update 3: the answer below it the right answer to this issue. thx a lot. one thing that this doesn’t solve (because i didn’t ask for it) is the issue that the other elements, that might depend on the relative positioned elements then do some reflow dance (as the suddenly absolutized elements went missing), this little jquery plugin solves this https://gist.github.com/4051578, it’s a jquery plugin called jquery.bodysnatch.js as it’s purpose is “jquery plugin that replaces elements with absolute positioned clones of themselves, while hiding & silencing the originals” have fun.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Here you go!

    http://jsfiddle.net/rhqy3/9/

        (function($){
        $.fn.absolutize = function() {
            var elems = [];
            this.each(function() {
                var element = $(this);

                if (element.css('position') == 'absolute') return;

                var offset = element.offset();
                elems.push({
                    el: element,
                    newRules: {
                        position: 'absolute',
                        top: offset.top,
                        left: offset.left
                    }
                });
            });

            $.each(elems, function(i, obj){
                obj.el.css( obj.newRules );
            });
        };

        $(document).ready(function() {
            window.setTimeout(function(){
                $("h1, h2").absolutize()
            }, 2000);
        });

    })(jQuery);​

    The problem was, it was going through each element passed in to absolutize() one at a time, taking the offset, and applying it. By the time the it was asking for the offset of the h2, the h1 had already been removed from the flow of the document.

    There may be a better way to code this, but the idea is, cache the elements’ offsets before changing each of their positions.

    • 0