How to move a dynamic HTML element on the right side of a browser window?

Question

I use jQuery to execute the following functions in a single function:

initially I have an absolutely positioned DIV; I am setting the internal HTML DIV to some necessary text / HTML; then I show the element in some specific coordinates using css ({top: initialTop, left: initialLeft}).

Everything works fine in the left and center area of ​​the page - I see a DIV with an angular angle in the requested coordinates.

When I want to show the element on the right side of the page, I have to keep the DIV 100% visible, so I have to show its vertical angle in the requested coordinates (instead of the top corner). I can get the width of the window and scroll the offsets without any problems, and I can calculate the offset to subtract from the top corner of the DIV, to make it the right corner - I just take the width of the DIV and subtract it from the coordinates.

The problem is that this approach only works a second time after changing the contents of the DIV. The first time I call myDiv.width (), it saves the previous value - the width of the DIV with the old text. The second time I call the same function for the same element, everything works fine.

I heard something about rendering delay - it seems to be happening in my case; the browser does not pass the DIV with the updated text until the function exits, so I cannot get the desired width.

Here is a simplified code:

// at the beginning I have the following style:
#myDiv
{
position: absolute;
top: 0;
left: 0;
}


function PutDivWithInPlace(text, x) {
    var $div = $('#myDiv');
    $div.html(text);

    $div.show(); // even if it worked, I would really like to keep myDiv invisible to avoid it jumping from the old position to the new one

    var width = $div.outerWidth();

    // I ignore x-scroll offset here for simplicity
    // if the right edge of div flows over the window right side, then push it to the left
    if (x + width > $(window).width()) {
        x -= width;
    }

    $div.css({
        left: x
    });

    // this does not work - the width is still from the previous call of PutDivWithInPlace, so myDiv appears at the wrong place :(
}

Is there any other way to get the right angle of the DIV where I need it to be in the same function where I change the contents of the DIV (but only if the DIV overflows the window on the right)? Maybe there is another trick besides using the width of DIVs to do it right even after rendering is delayed?

Answer 1

, - . DIV , . , DIV 200 , , , x = 100, y = 200, x = 800, y = 200, 120px . , , , , . , :

function PutDivWithInPlace(text, x)
{
var $div = $('#myDiv');
$div.html(text);

var width = $div.outerWidth();

// this is needed to recalc DIVs width because the browser has resized it depending on x
$div.css({ left: x});

// if the right edge of div flows over the window right side, then push it to the left
if(x + width > $(window).width()){      
    x -= width;
}

// and update css again with new style
$div.css({ left: x});
} 

, , - , , Div . , - , , DIV , , , . , . : (

Answer 2

, ,

left:auto;
right:someCoordinate;

, , .