Comment repositionner un élément HTML dynamique sur le côté droit d'une fenêtre de navigateur?

Question

J'utilise jQuery pour effectuer les opérations suivantes en une seule fonction:

initialement j'ai un DIV positionné de manière abso- lue; J'ai mis le HTML interne de la DIV à un texte/HTML nécessaire; alors je montre l'élément à certaines coordonnées en utilisant css ({top: initialTop, left: initialLeft}). Tout fonctionne bien à l'intérieur de la zone gauche et au centre de la page - je vois le DIV avec coin topleft aux coordonnées demandées. Lorsque je veux afficher l'élément sur le côté droit de la page, je dois garder le DIV 100% visible, donc je dois montrer son angle droit aux coordonnées demandées (au lieu du coin du topleft). Je peux obtenir la largeur de la fenêtre et faire défiler les offsets sans problèmes et je peux calculer le décalage à soustraire du coin supérieur de la DIV pour faire son coin droit - je prends juste la largeur DIVs et soustrais les coordonnées.

Le problème est - cette approche ne fonctionne que la deuxième fois après que je modifie le contenu de la DIV. La première fois que j'appelle myDiv.width(), il conserve la valeur précédente - la largeur de la DIV avec l'ancien texte. La deuxième fois que j'appelle la même fonction pour le même élément, tout fonctionne bien.

J'ai entendu parler de retard de rendu - il semble que ça se passe dans mon cas; le navigateur ne rend pas le DIV avec le texte mis à jour jusqu'à ce que la fonction se termine, donc je ne peux pas obtenir la bonne largeur.

va ici le code simplifié:

// 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 :(
} 

est-il un autre moyen d'obtenir le coin topright de la DIV où je besoin d'être dans la même fonction où je change le contenu de la DIV (mais seulement si la DIV dépasse la fenêtre de droite)? Peut-être qu'il y a une autre astuce en plus d'utiliser la largeur DIVs pour l'obtenir correctement même après rendu différé?

Answer 1

Il semble, j'ai trouvé une solution temporaire étrange. La largeur de la division dépend également de l'emplacement de la fenêtre du navigateur. Je ne comprends pas, pourquoi la même DIV avec le même texte est large de 200px quand elle est sur, disons x = 100, y = 200 mais quand je la mets à x = 800, y = 200, elle devient soudainement 120px de large. Il semble que le navigateur prenne également en compte où l'élément est positionné, et bien qu'il permette de déborder la fenêtre, il réduit automatiquement la largeur automatiquement. Donc, mon code ressemble maintenant à ceci:

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}); 
} 

Cela fonctionne pour un test si je redimensionnez la fenêtre du navigateur si les coordonnées sont sur le bord - j'obtenir la largeur que ce serait si je mets la division à ceux coordonnées. Bien sûr, il y a un problème - si la largeur est grande et que je la pousse vers la gauche, alors le navigateur pourrait décider de redimensionner le DIV, comme il le faisait avant de le dessiner sur le bord. J'espère que cela n'arrivera pas trop souvent. Toujours pas de meilleure solution :(

Answer 2

Je ne sais pas exactement ce que vous demandez, mais il est impossible de définir

left:auto; 
right:someCoordinate; 

Je me sens comme ça devrait le placer sur le côté droit, quelle que soit la largeur.