I have a link to a jQuery UI tab, which needs to show the tab, then scroll it into view. My first instinct was to use the basic $('selector').tabs('option','active',1) to show it, then bind a callback to the tabsactivate event to animate the body element's scrollTop to the offset of the tabs container. Should be simple, right? But when I click the link, the page doesn't scroll unless the tab is already active.
After much poking around, I discovered the problem: there's a 150 millisecond fade-in animation on the tab, and tabsactivate fires before the animation has completed. So when I try to grab its offset, it's 0, because the tab hasn't actually been shown yet. I'm pretty sure this is the cause, because if I remove the show/hide animations it works as expected.
So in a nutshell, my question is, is it possible to bind a callback to the built in tabs "show" animation so that it won't fire until the animation is finished?
If not, what would be a good workaround?
Edit: The problem may not have been what I thought after all... posting code below.
Code (extremely messy and not very optimized)
<script>
$(function() {
$('.select-tab').click(function(e){
var $target = $('#'+this.href.split("#")[1]),
tabindex = $target.index('.ui-tabs-panel'),
$tabParent = $target.parents('.ui-tabs-container');
$tabParent.tabs('option','active',tabindex);
e.preventDefault();
});
$(".scroll").each(function(){
var $this = $(this),
$target = $('#'+this.href.split("#")[1]),
$tabParent = $target.parents('.ui-tabs-container'),
clickHandler;
function clickHandler(){
$('html,body').animate({"scrollTop":$target.offset().top},500,'easeOutCubic');
}
if( $this.hasClass('select-tab') && $target.hasClass('ui-tabs-panel') ){
$this.click(function(e){
if( $target.index('.ui-tabs-panel') == $tabParent.tabs('option','active') ){
clickHandler();
} else{
$(document).one('tabsactivate',$tabParent,function(e,ui){
clickHandler();
});
}
});
} else{
$this.click(clickHandler);
}
});
});
</script>
<a class="select-tab scroll" href="#ProductReviews">
Read all 36 Reviews
</a>
<div class="ui-tabs-container ui-tabs ui-widget ui-widget-content ui-corner-all">
<ul id="product_tabs" 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-active ui-state-active">
<a href="#RelatedProducts">Related Products</a>
</li>
<li class="ui-state-default ui-corner-top">
<a href="#ProductReviews">Product Reviews</a>
</li>
<li class="ui-state-default ui-corner-top">
<a href="#OrderWithConfidence">Order With Confidence</a>
</li>
</ul>
<div id="RelatedProducts" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
<!-- Stuff Here -->
</div>
<div id="ProductReviews" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-helper-hidden">
<!-- Stuff Here -->
</div>
<div id="OrderWithConfidence" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-helper-hidden">
<!-- Stuff Here -->
</div>