jQuery tabs callback after show animation

0 votes

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>

Jul 29 in Web Development by gaurav
• 17,580 points
8 views

No answer to this question. Be the first to respond.

Your answer

Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.

Related Questions In Web Development

0 votes
1 answer

jQuery show() won't turn Bootstrap d-none class visible

When you not sure how your element ...READ MORE

answered Jun 27 in Web Development by rajatha
• 7,040 points
21 views
0 votes
0 answers
0 votes
0 answers
0 votes
0 answers

jQuery UI: connect sortable lists through tabs

Here is an example at jQuery UI official site, ...READ MORE

Jul 20 in Web Development by gaurav
• 17,580 points
9 views
0 votes
0 answers

jQuery .show() a flex box

I have an element with a flexbox <ul ...READ MORE

Jul 20 in Web Development by gaurav
• 17,580 points
13 views
0 votes
0 answers

jQuery .show() a flex box

I have an element with a flexbox <ul ...READ MORE

Jul 21 in Web Development by gaurav
• 17,580 points
8 views
0 votes
1 answer

jQuery - trapping tab select event

it seems the old's version's of jquery ...READ MORE

answered Jul 26 in Web Development by rajatha
• 7,040 points
12 views
0 votes
1 answer

How to use jquery with asp.net ajax?

If you weren't aware, Microsoft is planning ...READ MORE

answered Oct 15, 2018 in IoT (Internet of Things) by Annie97
• 2,160 points
190 views
0 votes
1 answer

Is 'sparkline' a method?

I suggest you to check 2 things That jquery.sparkline.js is actually ...READ MORE

answered Nov 9, 2018 in Apache Spark by Frankie
• 9,830 points
601 views
0 votes
1 answer

What is jQuery?

Hey, jQuery is a fast and concise JavaScript ...READ MORE

answered Feb 14, 2020 in JQuery by kartik
• 37,500 points
308 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP