Question

I’ve got a spinning wheel working when I click a link in jQuery UI Tabs. However the wheel appears next to the link. I want it to appear at the top of the div container in the tabs.

My jQuery in application.js:

$(function() {
    $( "#tabs" ).tabs({
        ajaxOptions: {
            error: function( xhr, status, index, anchor ) {
                $( anchor.hash ).html(
                    "There was an error loading this tab. Please try again." );
            }
        },
        spinner: '<img src="../images/spin2.gif">'
    });
});

In my show.html.erb:

<div id="tabs">
  <ul id="infoContainer">
    <li><a href="#tabs-1">About</a></li>
    <li><%= link_to '/profiles/profile_messages/', :id => 'qs', :remote => true do %>Messages<span>&nbsp;</span><% end %></li>
  </ul>
  <div id="tabs-1">
  </div>
</div>

My profile_messsages layout:

<div id="tabs-2">
#where I'd like the spinner to load
<% for message in @user.messages %>
<% end %>
</div>

Currently the spinner loads inside the <span> tags within the link. I would like the wheel to show inside the div container while the second tab loads. How can I do that?

Answer 1

You could try adding position: relative to your tab <li> elements and then absolutely position the spinner below the tab.

Some CSS to start:

#infoContainer li {
    position: relative;
}
.tabSpinner {
    position: absolute;
    left: 0;
    bottom: -50px; /* Or whatever pushes your spinner down low enough */
}

and then your spinner:

spinner: '<img src="../images/spin2.gif" class="tabSpinner">'