CODEWITHSUNDEEP
jqueryhtmlcssmobile-safarijquery-animate
eric.itzhak
eric.itzhak

Reputation: 16062

animate not working well in mobile safari on iPhone

Hey i am creating tabbed content with a vertical tab list. I'm doing this by changing the background position. It's working fine in IE/CHROME but when browsing through safari on mobile device, the animation works well the first time and the other times the background position drops down too much.

I'm adding alot of code, but i assume the problem is not with the HTML as this works in other browsers, i just published the code for refferance.

This is my animation code :

<!-- This part is responsible for tabbed content -->

    var $tabbed_area = jQuery('#side-tabs-tab ul'),
        $tab_content = jQuery('.tab-content-tab');





                    if ($tabbed_area.length) {

            var animating = false,
                divAnimated = false;
            jQuery('body.home #main-area-tab').css('backgroundImage','none');
            $tab_content.hide().filter(':first').show();
            $tabbed_area.css( {backgroundPosition: "0px 0px"} );
            var isFirstUse = true;
            $tabbed_area.find('li a').click(function(){
                this_element = jQuery(this);

                tab_order = this_element.parent('li').prevAll().length;
                previouslyActiveTab = jQuery('.tab-content-tab').filter(':visible').prevAll('.tab-content-tab').length;

                if ( (tab_order != previouslyActiveTab) && !animating ) {
                    $tabbed_area.find('li a.activeTab').removeClass('activeTab');
                    var marginDelimeter = 177;


                    if( parseInt(jQuery.browser.version, 10) == 7){
                        marginDelimeter = 177;
                    }

                    activeTop = this_element.position().top - marginDelimeter;
                        if( navigator.userAgent.match(/iPhone/i)){
                        //marginDelimeter = 213;

                        }
                    animating = true;
                    var $visibleDiv = $tab_content.filter(':visible'),
                        $divToAnimate = $tab_content.filter(':eq('+tab_order+')');


                    $visibleDiv.fadeOut(500,function(){
                       $visibleDiv.css({opacity:0});
                       $divToAnimate.css({opacity:1}).fadeIn(500,function(){if (jQuery.browser.msie) this.style.removeAttribute('filter');});
                       divAnimated = true;
                    });

                    $tabbed_area.stop().animate({backgroundPosition:"(0px "+activeTop+"px)"}, 500,function(){
                        this_element.addClass('activeTab');
                        if (divAnimated) { 
                            animating = false;
                            divAnimated = false;
                        } else {
                            var wait = setInterval(function() {
                                if (divAnimated) { 
                                    animating = false;
                                    divAnimated = false;
                                    clearInterval(wait);
                                };
                            }, 100);
                        };
                    });
                };

                return false;
            });
        };
<!-- End of tabbed content -->

This is the HTML :

   <div id="side-tabs-tab">
    <ul style='padding:0px; padding-bottom: 20px;'>
        <?php for ($i = 1; $i <= $featured_num; $i++) { ?>
            <?php if ($arr[$i]["tabtitle"] == '') $arr[$i]["tabtitle"] = 'Tab Custom field'; ?>
            <li class="clearfix"><a href="#" <?php if ($i == 1) echo(' class="activeTab"'); ?>><?php if($arr[$i]["thumb"] <> '') echo('<img src="'.esc_url( $arr[$i]["thumb"] ).'" alt="" width="36" height="37" />'); ?><span><?php echo( esc_html( $arr[$i]["tabtitle"] ) ); ?></span></a></li>
        <?php }; ?>
    </ul>   
</div> <!-- end #side-tabs -->


<div id="main-area-tab">
    <?php for ($i = 1; $i <= $featured_num; $i++) { ?>
        <div class="tab-content-tab<?php if ($i == 1) echo(' active'); ?>">
            <h2 class="title-tab"><?php echo(esc_html($arr[$i]["title"])); ?></h2>
            <?php echo($arr[$i]["content"]); ?>
            <!--<a href="<?php echo esc_url($arr[$i]["permalink"]); ?>" class="readmore-tab"><span><?php esc_html_e('Read More','MyAppTheme'); ?></span></a> -->
        </div> <!-- end .tab-content -->
    <?php }; ?>
</div> <!-- end #main-area -->

It's a bit messy with all the PHP involved, but assume this outputs everything well.

and finally CSS :

   #side-tabs-tab {background:url(images/tabs-shadow-tab.png) no-repeat scroll 116px 0 transparent; float: left; width: 205px; height: 353px; margin-top: -3px; }
    #side-tabs-tab ul {list-style: none; margin-top: 43px; margin-left: 12px; font-size: 16px; background:url(images/arrow-tab.png) no-repeat; padding-bottom: 20px; }
                #side-tabs-tab ul li { margin-bottom: 10px; height: 40px; }
                    #side-tabs-tab ul li a {text-decoration: none; color: #202d37; text-shadow: 1px 1px 0px #e7eff2; display: block}
                        #side-tabs-tab ul li a img {padding-top: 3px; padding-left: 4px; float: left;}
                        #side-tabs-tab ul li a span {padding-left: 14px; float: left; display: block; padding-top: 12px;}
                    #side-tabs-tab ul li a.activeTab  {width: 191px; color: #ffffff; text-shadow: 1px 1px 0px #3a515a; }

        #main-area-tab {float: left; margin-top: 50px; margin-left: 29px; width:483px;} 
            #main-area-tab p { line-height: 18px; }
            #main-area-tab .tab-content-tab {width: 424px;padding-right:45px;}
                #main-area-tab .tab-content-tab h2.title-tab {font-weight: bold; font-size: 20px; margin-bottom: 20px; }
                #main-area-tab .tab-content-tab p.post {line-height: 18px; padding-bottom: 23px; padding-top: 20px;}

                blockquote {background: url(images/blockquote-tab.png) no-repeat; border: none; margin: 0px; padding-left: 55px;line-height: 18px; color: #202d37; text-shadow: 1px 1px 0px #e7ecee; padding-top: 12px; padding-bottom: 22px; background-position: 0px 15px; }

                #main-area-tab a.readmore-tab { background: url(images/readmore-left-tab.png) no-repeat top right; display: block; height: 33px; padding-right: 18px; line-height: 35px; float: right; font-weight: bold; text-shadow: 1px 1px 0px #2d3a40; font-size: 11px; margin-bottom: 26px; margin-right: -36px; float: right; color: #c0cfd5;}
                    #main-area-tab a.readmore-tab span { display: block; background: url(images/readmore-right-tab.png) no-repeat; padding:0 6px 0 13px; height:33px; }

Can someone tell me what am i doing wrong?

If you fail to understand what i mean, you can view it live in Here, go in and click on development services.

Upvotes: 1

Views: 4504

Answers (2)

Jan
Jan

Reputation: 5815

You've hardcoded the position of the animated element. Calculate the end position using the position of the clicked button instead.

Example: http://jsbin.com/oteleh/3/edit#javascript,html

Upvotes: 1

Jens Andersson
Jens Andersson

Reputation: 170

What you want to use is CSS3 transform and transition instead of jQuery animations. This way you can get hardware-accelerated performace on mobile devices, like iOS and Android. To move an element use transform3d (even for 2d transforms) then you will get the optimal performance.

http://www.quora.com/Are-CSS3-transitions-in-WebKit-browsers-hardware-accelerated

Upvotes: 0

Related Questions