jQuery Outils Repositionnement après ajax load

Question

Je crée une superposition d'outils jquery et je charge du contenu sur beforeLoad qui modifie la largeur de la superposition. Une fois que je charge le contenu, la largeur augmente mais la position gauche ne change pas. Je veux être en mesure de changer la position afin qu'elle soit maintenant centrée au lieu d'être plus vers le côté droit de l'écran. Des pensées?

MISE À JOUR: Voici mon code ci-dessous. Je suis d'abord en train d'essayer d'obtenir la largeur à enregistrer puis je peux utiliser la fonction fournie ci-dessous pour ajuster la position. le code ci-dessous renvoie une largeur de 470 qui est la largeur initiale de la superposition. Après que je charge le contenu, la largeur réelle est de 740 mais cette alerte dit toujours 470

<div class="simple_overlay" id="test-overlay"> 
<div class="details"> 
    <div id="overlayLoadingImg"><img id="overlayAnimatedGif" src="loading.gif" alt="Loading" /></div> 
</div> 
<a id="overlayClose" class="close">Close</a>   
</div> 
<script type="text/javascript"> 
    $(document).ready(function() { 

     // if the function argument is given to overlay, 
     // it is assumed to be the onBeforeLoad event listener 
     $("a.overlay").live("click", function(){ 

      $(this).overlay({ 
       mask: {color: '#000',opacity: 0.5}, 
       top: "25%", 
       effect: 'apple', 
       load: true, 
       closeOnClick: false, 
       onBeforeLoad: function() { 

        //IE7 fix for z-index. 
         this.getOverlay().insertAfter('#exposeMask'); 
        // grab wrapper element inside content 
        var wrap = this.getOverlay().find(".details"); 

        //check the datatype first. If iframe then load an iframe. If ajax then call the url via ajax call. 
        var dataurl = "http://someurl.com/path"; 


        // load the page specified in the trigger 
        $.ajax({ 
          url: dataurl, 
          success: function(data){ 
          $(wrap).html(""); 
          $(wrap).append(data); 

          $(".closeOverlay").click(function(){ 
           $("#overlayClose").click(); 
          }); 

          alert($("#test-overlay").width()); 

          }, 
          error: function (jqXHR, textStatus, errorThrown) { 

          }, 
          complete: function(data){ 

          } 
         }); 



       } 

      }); 



    }); 
}); 

Merci

Answer 1

Écrivez une fonction qui définit la propriété left CSS de votre élément de recouvrement en fonction de la largeur de l'écran et la largeur de l'élément, puis appelez cela après avoir défini le contenu dans votre callback AJAX.

Peut-être quelque chose comme ceci:

function setLeft(id) { 
    var overlay = $('#' + id); 
    var screenWidth = screen.width; 
    var overlayWidth = overlay.width(); 
    var left = (screenWidth/2 - overlayWidth/2); 
    overlay.css({left : left}); 
} 

jsFiddle example