title: Centering a div with a "Loading..." spinner.gif using jQuery and Ajax.BeginForm
body: <h2>The Setup</h2>
  
  <p>I have designed a very easy to use MVC wizard.  The cherry on the cake is a spinner gif that will appear when I change wizard step.  I want it to center on the page, regardless of the size of the browser window.</p>
  
  <p>You can see an example of this at:</p>
  
  <p><a href="http://register.encephalitis.info/membership/form" rel="nofollow">Sample Wizard</a></p>
  
  <p>PLEASE DON'T COMPLETE THE WIZARD, UNLESS YOU HAVE ENCEPHALITIS...</p>
  
  <h2>The Problem</h2>
  
  <p>Problem is, I have a centered CSS layout, controlled with the following rule:</p>
  
  <pre><code>#PageContainer
  {
      position:relative;
      width:800px;
      left:50%;   
      margin:0px 0px 0px -400px;
      text-align:left;
  }
  </code></pre>
  
  <p>And this rule seems to interact badly with the jquery code that centers the div with the spinner gif.  Ie, it doesn't center.</p>
  
  <h2>The Code</h2>
  
  <p>My MVC form code is:</p>
  
  <pre><code>    @using (Ajax.BeginForm(Model.Step.ActionName, 
               null, 
               new AjaxOptions { UpdateTargetId = "wizardStep", OnBegin="isValid", LoadingElementId="PleaseWait" }, 
               new {@name="wizardForm", @id="wizardForm" } ))
          { 
          @* do ajax stuff, see my "Loading... panel below *@
  
          &lt;div id="PleaseWait" style="display:none;"&gt;
              Please Wait...
          &lt;/div&gt;
          } 
  </code></pre>
  
  <p>jQuery code is:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
          jQuery.fn.center = function () {
              this.css("position", "absolute");
              this.css("top", ($(window).height() - this.height())/ 2 + $(window).scrollTop() + "px");
              this.css("left", ($(window).width() - this.width()) / 2 + $(window).scrollLeft() + "px");
              return this;
          }
          });
          function isValid() {
              $('#PleaseWait').center();
              if (true) // In case i whant to return true
              {
                  return true;
              }
              else // I whant to return false
              {
                  $('#PleaseWait').hide(); // Manually hide the LoadingElementId
                  return false;
              }
          }   
  &lt;/script&gt;
  </code></pre>
  
  <h2>My Analysis</h2>
  
  <p>As the jQuery code sets up the div panel to have an absolute position, it therefore has an absolute position relative to the first parent item that does not have position static (the default).</p>
  
  <p>Therefore, as a result of the margin hack used to center the page, there is something creeping into the jQuery calculation that upsets the apple cart.</p>
  
  <p>Ie:</p>
  
  <p>The jQuery calculation is based on the size of the window, but the position of the #PleaseWait panel is positioned with respect to the #PageContainer div (this div is part of the layout).  Obviously, these are two very different things.  I therefore thought I would get away with figuring out the constant values to subtract from the top and left calculations for the #PleaseWait div.</p>
  
  <p>However, the results are unpredictable and I am now too befuddled to figure it out.  Help!</p>
  
  <p>Any help much appreciated.</p>
  
  <h2>JOB DONE!:</h2>
  
  <p>Problem sorted.  See Jim's accepted answer for the ideas, my follow up answer for full the implementation.</p>