center loading overlay div

I have the following structure, the #tabs div is a static positioned div. I would like to show the loading inner div during an ajax request and have it centered on the #tabs div (which is actually a jquery tab). But it's not getting centered with the css I have at the moment.

<div class="span-18 last" id="top_tab_container">
  <div id="loading">
    <div id="loading_inner">
      Loading...
    </div>
  </div>
  <div class="normal-pad  ui-widget-content ui-tabs ui-widget ui-corner-all" id="tabs">
    <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
      <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#tabs-1">Most Voted</a></li>
        <li class="ui-state-default ui-corner-top"><a href="#tabs2" title="tabs2"><span>Near You xxxx</span></a></li>
        <li class="ui-state-default ui-corner-top"><a href="#tabs3" title="tabs3"><span>You are Tracking</span></a></li>
      <li class="ui-state-default ui-corner-top"><a href="#tabs4" title="tabs4"><span>Most Tracked</span></a></li>
    </ul>
    <div id="tabs-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom">

    </div><div id="tabs2" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide"></div>

      <div id="tabs-2">
      </div>
      <div id="tabs3" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide">
        <div id="tracked_posts"></div>
      </div>

    <div id="tabs4" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide">
      <div id="most_tracked_"></div>
    </div>
  </div>
</div>

#loading_inner {
    background:transparent url(/images/loading_big.gif) no-repeat scroll center center;
    font-size:16px;
    font-style:normal;
    font-variant:normal;
    font-weight:normal;
    height:100px;
    left:50%;
    line-height:normal;
    margin-left:-50px;
    margin-top:-50px;
    overflow:auto;
    padding:10px;
    position:fixed;
    text-align:center;
    top:50%;
    width:100px;
    z-index:2;
}

That works in other scenarios, but what's happen here is that the jquery tabs are loaded via ajax and the tab divs are automatically populated. So the first time a tab( for example tabs-2) is clicked the loading div is not aligned correctly, because perhaps the tabs-2 doesn't exist yet. Once tabs-2 is loaded, the next time it's clicked the loading does appear correctly. Any thoughts?

badnaam 2010-08-06 18:28:33

hmmm.. if you can change the place of the loading div, i would make a container for the tabs. then place the loading div as a child of the container and use the same absolute positioning. that way the tabs can be loaded automagically and should the container center the loading div from the start.

no1cobla 2010-08-09 15:41:33

ansaurus

tags:

views:

answers:

center loading overlay div

related questions