Support » Plugin: Tabby Responsive Tabs » on page load content flickers and first tab not opening automatically

  • Resolved newbee_sue

    (@newbee_sue)


    Hi
    Thank you very much for this tab plugin. It is overall super helpful for my site. I am just bumping into a few snags:
    1. On http://www.deracheha.org/tabs/
    the first tab does not open automatically. I do not want to put in the open=yes code [tabby title=”My Tab” open=”yes”][tabby title=”My Tab” open=”yes”] because when I do that then that tab remains open when I use the sidebar that only relates to items in the second time – it gets messed up. I do have a div tag before and after the tabby tags and I have facebook comments below the tabs as well. However in testing – I removed these items and it did not resolve the issue

    2. when the page loads esp. in chrome there is a bit of a flicker of the first tab content before the page fully loads. How can I remove that?
    3. Any thought on How I can set up links on my automated toc + sidebar that would go directly to the second tab?
    Thanks again for the plugin and your assistance

    • This topic was modified 1 year, 4 months ago by  newbee_sue.
Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author cubecolour

    (@numeeja)

    It looks like additional CSS rules have been added to override the default tab styles. I do not believe this would caused the issue, but the recommended method to change the tab styles require the default tabby stylesheet to be replaced by a complete edited set of styles. This is outlined in the plugin’s documentation.

    I am not sure why the first tab is not showing as open. Please paste the content of the text editor for the page into a pastebin so I can see how the shortcodes have been formed.

    Ensure the div tags you are using before and after the tab shortcode are correctly nested. The entite tab group can be within a div, and a div can exist within the tab content, however opening a tag before a tabby shortcode and closing it after can result in incorrectly nested html.

    I am not seeing the ficker you have described, however this is likely to be due to your connection speed and the overall weight of the page. Checking the page on gtmetrix.com showed that the page took 8.2s to load, the total page size was 1.75MB and there were 98 requests. Some appropriate optimization of the site should help with improving this.

    Lastly, there is an optional add-on plugin called ‘tabby link to tab‘ which provides shortcodes to create links to open specific tabs on the same page.

    thanks for your detailed reply. I just added the css for the change in the color frame now. I didn’t edit the whole tabby style sheet and add it to mine as it was another 200 lines in my stylesheet. And I was only changing about 20 lines -so I just wrote those in my stylesheet. But if what you recommend is the better way to go I can make that change.

    The pasted code is at https://pastebin.com/8emSV2Nq there is an open div before and a close div after the tabby short code
    Thanks – yes – there is a lot of text and plugins working here – I will look into better optimization
    I sent you an email from your site regarding the add on – you said that I need to figure out how it can work with toc+ – so that conversation is ongoing as well.
    thanks again for your assistance. Let me know results of your review of the pastebin

    Plugin Author cubecolour

    (@numeeja)

    The first thing to check is whether the added CSS is causing the tab to not be active on page load. This test can be achieved by temporarily removing the added lines.

    I’ve tried the content of the pastebin on a page of one of my local test sites and the issue does not occur there, so it appears that the issue is specific to something on your site. There could be a conflict where something in your theme or another plugin isn’t playing well with the tabs – you should be able to investigate this by using the healthcheck plugin: https://make.wordpress.org/support/handbook/appendix/troubleshooting-using-the-health-check/

    Thank you. I will check this out – and let you know the results. Probably around tuesday. Have a good weekend. Much appreciate your assistance.

    I disabled cache enabler – which seemed to be preventing tabby from opening the first tab. I then tested the health of the site and the only issue was outdated php – which I upgraded to 7.2/ In order to optimize the site, I have autoptimize and super cache running. And I am now in the process of running wp-smush – So I have taken down the load time from 7 seconds to 3.94 s according to pingdom. So things are moving faster -but the initial load of the page shows the first section “In Brief” without the tabs for a fraction of a second before the tabs load. Any other suggestions for that would be much appreciated. I also think that I want to purchase the tabby link to tab – I just don’t know how it will work with toc+ and since not all my pages have tabs – but they all have toc+ I need to see how to implement it. So please let me know what your money back guarantee is – thanks again. Link to site is http://www.deracheha.org/tabs/

    Plugin Author cubecolour

    (@numeeja)

    The delay will probably be due to the javascript and/or css being loaded, however it seems to load OK for me (on Firefox 61.0 MacOS) with the tabs being rendered with the rest of the page.

    As your question about TOC+ is in relation to an optional paid add-on rather than the Tabby Responsive Tabs Plugin, it is not approporiate to discuss this due to the forum rules, so I will reply to the email you sent me previously.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘on page load content flickers and first tab not opening automatically’ is closed to new replies.