Viewing 21 posts - 1 through 21 (of 21 total)
  • Author
    Posts
  • March 17, 2015 at 6:52 am #412786
    wcathro

    Hi,
    Having searched the forum on the topic of tab behaviour on mobile, I realize you are familiar with the issue I am having.

    On my mobile phone, when I tap on a tab heading, the content jumps to a seemingly “random” position instead of the top of the chosen tab.

    I know it’s not actually random, but affected by the content of the other tabs, etc, however the point is that it does not go to the the desirable position, which would be the top of the chosen tab.

    I read that this issue was in the pipeline to be fixed in a future update. Is this on the horizon?

    In the meantime, can you suggest a fix I might be able to implement?

    Thanks

    March 18, 2015 at 7:20 am #413427
    Ismael

    Hey wcathro!

    Thank you for using Enfold.

    The tab should scroll up if the tab title is not in viewport. Please provide a link to the page with the issue. Make sure that you’re running Enfold 3.1 on WordPress 4.1.1.

    Best regards,
    Ismael

    March 19, 2015 at 4:52 am #414147
    wcathro
    This reply has been marked as private.
    March 20, 2015 at 6:42 am #415057
    Ismael

    Hi!

    It is working fine on our installation. Please edit shortcode.js, find this code on line 2623:

    if(win.scrollTop() > el_offset)
				{
					$('html:not(:animated),body:not(:animated)').scrollTop(scoll_target);
				}

    Replace it with:

    if(win.scrollTop() > el_offset)
				{
					$('html:not(:animated),body:not(:animated)').animate({scrollTop: scoll_target},200);
				}

    Remove browser cache then reload the page.

    Regards,
    Ismael

    March 20, 2015 at 7:20 am #415069
    wcathro

    Hi Ismael,

    Thanks for this, however it’s still not working for me. In my shortcodes.js file, this code was at line 2652. I made the edit as you recommended but the tabs are still not going to the right position on my phone.

    Earlier you mentioned a typo. Should “scoll_target” be “scroll_target”?

    Thanks,
    Warren

    March 20, 2015 at 7:41 am #415080
    wcathro

    Not sure if this will help with the troubleshooting – I was having the same issue with accordions. But with the accordions I could set the option to allow them to stay open when another one is tapped, so there was no scrolling. While not the most ideal solution, at least it would prevent the content from jumping too far.

    If there is any way to set this option for tabs on mobile, that could be a temporary solution.

    March 21, 2015 at 5:32 pm #415762
    wcathro

    Hi, just checking in to see if you’re still looking in to this.

    Thanks

    March 23, 2015 at 3:24 pm #416405
    Ismael

    Hey!

    Sorry for the delay. I was wrong about the typo, please ignore it. The tab seems to be working fine on our installation. The tab scrolls back to the tab title when it’s not in viewport. Please provide a temporary ftp credentials. We would like to inspect it.

    Regards,
    Ismael

    March 25, 2015 at 3:10 am #417525
    wcathro

    Hey, that’s ok. I’m having issues with the ftp accounts with my webhost. I’ll post back as soon as I have one ready. Thanks

    March 25, 2015 at 4:14 am #417533
    wcathro
    This reply has been marked as private.
    March 28, 2015 at 6:24 am #419762
    Ismael

    Hi!

    Sorry for the delay. Please post the WP login details here as well. We need to deactivate the minify settings because any changes we do in the shortcodes.js file will not take any effect.

    Regards,
    Ismael

    March 28, 2015 at 8:03 pm #419894
    wcathro
    This reply has been marked as private.
    March 30, 2015 at 8:13 am #420245
    Rikard

    Hi!

    Admin access to WordPress would be great, you can post the details here as a private reply.

    Best regards,
    Rikard

    March 30, 2015 at 3:25 pm #420505
    wcathro
    This reply has been marked as private.
    March 31, 2015 at 6:57 pm #421461
    Ismael

    Hi!

    I’m sorry but I failed to correct the issue on your installation. The “scoll_target” produces a negative value and the win.scrollTop() is always lesser than the el_offset value. I’ll ask Kriesi to take a look.

    Regards,
    Ismael

    April 27, 2015 at 6:35 pm #435509
    wcathro
    This reply has been marked as private.
    April 28, 2015 at 6:52 am #435803
    Ismael

    Hey!

    I tested this again on our installation and the tabs scroll are now working with the latest version of the theme. It does scroll up whenever the tab title is not in viewport. I noticed that you have created custom columns inside the tabs. Can you please create a test page with only text as content? Let us know if the scroll target works there.

    Cheers!
    Ismael

    May 6, 2015 at 5:24 pm #440494
    wcathro
    This reply has been marked as private.
    May 7, 2015 at 3:57 am #440718
    Ismael

    Hi!

    I think I know now why the tab scroll target isn’t working. There is an extra scrollbar on your installation but I can’t find where it’s coming from. I didn’t notice it before. Did you add any css overflow property to any containers?

    Best regards,
    Ismael

    May 7, 2015 at 4:35 pm #441052
    wcathro

    Hi, yes there is an overflow property set here, which I think you found and commented out:

    /* -- REDUCE TAB AND ACCORDION PADDING ON MOBILE -- 
@media only screen and (max-width:660px) {
.tab_content { padding:0 8px!important; }
.toggle_content { padding:8px!important; overflow:scroll; }
}
*/

    This hasn’t changed the scrolling behaviour though. I’m going to uncomment it, as it effects my layout.

    That scroll bar looks like it’s on a higher level container. How did it appear? I’ve never seen it before.

    Thanks

    May 8, 2015 at 8:49 am #441441
    Ismael

    Hey!

    Yes, but it’s not the code responsible for the scrollbar. Create a backup of the css modifications then remove all of it. Check if the scrollbar is still there. If not then you have to inspect the custom css codes. What is this code for?

    // CALL JQUERY EQUAL HEIGHTS SCRIPT
// Enqueue scripts
add_action( 'wp_enqueue_scripts', 'sk_enqueue_scripts' );
function sk_enqueue_scripts() {

	wp_enqueue_script( 'equalheights', get_bloginfo( 'stylesheet_directory' ) . '/js/jquery.equalheights.min.js', array( 'jquery' ), '', true );
	wp_enqueue_script( 'equalheights-init',  get_stylesheet_directory_uri() . '/js/equalheights-init.js', array( 'equalheights' ), '1.0.0', true );

}

    Please remove it temporarily then test the site again.

    Regards,
    Ismael

  • Author
    Posts
Viewing 21 posts - 1 through 21 (of 21 total)
  • The topic ‘Tabs on mobile’ is closed to new replies.