Home>Support>Tabs and Meta Slider

Tabs and Meta Slider

By Hjorth007, 6 years ago. Last reply by Hjorth007, 6 years ago.
Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].

Hi

I really love using the SiteOrigin Pagebuilder and the widgets to go with it and I’m using it on multiple sites. :-) However I have an issue using it together with the Meta Slider.

I have used your tab-widget and inserted a number of shortcodes for different Meta Sliders in different tabs. Only the first tab shows the sliders, the second and so on, does not. I contacted the Meta Slider support and their answer is this:

“You will have to add a callback action to trigger a resize on the window when a tab changes. This is because the slider plugin can’t determine the dimensions of the slideshow if it’s hidden behind a tab. Additionally, the slider plugin is not aware of when you switch a tab.

You’ll have to contact their plugin support to find out how to run code after a tab is switched. From there (using jQuery) you can add something like jQuery(window).trigger('resize');”

You can see my problem for yourself here: https://gege.dk/downloads-med-koder/levende-billeder/

I really hope this makes sense to you and you can help me out with this.

Thanks in advance

Henrik

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 6 years, 10 months ago Alex S
    Hi, I Work Here

    Hi Henrik,

    That’s odd – we’ve specifically designed the tabs widget to hide its content after load to avoid these sort of issues. Regardless, please try adding a Custom HTML widget to the page that has the Tabs widget and add the following JavaScript:

    <script>
jQuery( function ( $ ) {
	$( '.sow-accordion-panel:not(sow-accordion-panel-open)' ).on( 'show', function() {
		$( window ).trigger( 'resize' );
	});
} );
</script>
  2. 6 years, 10 months ago Hjorth007

    Hi Alex

    Thanks for the suggestion, but that didn’t work. I tried it out, but no.
    Could there be an error in the script ? When i tried to create the custom HTML-widget I couldnt re-open it to edit it. All I got was a white page with the time and date so I had to delete the widget again.

    Any other idea ? :-)

    Henrik

  3. 6 years, 10 months ago Alex S
    Hi, I Work Here

    Hi Henrik,

    Unfortunately, I’m unable to view gege.dk/downloads-med-koder/levende-billeder/ as it’s set to be passworded protected. Can you please temporarily publish the linked page so I can look for any potential JavaScript related reasons. That will allow me to work out why the provided JS isn’t working for you.

    The error you saw while trying to edit the Custom HTML was Wordfence blocking the script (which is purely done in the editor). Regardless, if you want to prevent Wordfence from being able to block SiteOrigin Page Builder, please navigate to WP AdminWordfenceTools and open the Live Traffic tab. Filter by Blocked by Firewall and search the request you just made, it’ll be associated with your user account and the parm will start with body: instance=%7B%22frames%22%3A%5B%7B%22content Click Whitelist param from Firewall.
    ​

  4. 6 years, 10 months ago Hjorth007

    Hi Alex

    I have removed the password from the page, so you can investigate. :-)

    Henrik

  5. 6 years, 10 months ago Alex S
    Hi, I Work Here

    Hi Henrik,

    Unfortunately, I can’t seem to find the provided JavaScript on your page. Did you remove the above JavaScript? If so, please add it back so I can run some tests. Please add the Custom HTML (which will contain the JavaScript) widget outside of the tabs widget.

  6. 6 years, 10 months ago Hjorth007

    Hi Alex

    Ooh, sorry. I have put the script back and I have whitelistet as you suggested. :-)

    Henrik

  7. 6 years, 10 months ago Alex S
    Hi, I Work Here

    Hi Henrik,

    Thanks. Please use the following JavaScript instead:

    jQuery( function ( $ ) {	$( '.sow-tabs-tab' ).on( 'show', function() {		$( window ).delay(150).trigger( 'resize' );	});} );
  8. 6 years, 10 months ago Hjorth007

    Hi Alex

    I have put the new script in the Custom HTML-widget. I’m afraid it didn’t do the trick……

  9. 6 years, 10 months ago Alex S
    Hi, I Work Here

    Hi Hjorth007,

    I’ve updated the JavaScript in my previous reply – the provided code was running too quickly. Please try that JavaScript.

  10. 6 years, 10 months ago Hjorth007

    Hi again

    Done that, but still no luck…

    Henrik

  11. 6 years, 10 months ago Alex S
    Hi, I Work Here

    Hi Henrik,

    I would try increasing the delay further (try doubling it to 300). I’m not too sure why the provided code isn’t working for you as it is for me during tests.

  12. 6 years, 10 months ago Hjorth007

    Hi

    I’ve tried different numbers up til 1200 and down to 50, still not working for me…. is it of any importance where in the pagebuilder I place the custom HTML-widget on the page ?

    Henrik

  13. 6 years, 10 months ago Alex S
    Hi, I Work Here

    Hi Henrik,

    Unfortunately, I’m unsure why the provided JavaScript isn’t working for you. It works without issue for me so I suspect something on your website is preventing it from working as intended. Unfortunately, I’m not able to assist further with this issue further – I’m sorry.

  14. 6 years, 10 months ago Hjorth007

    Hi Alex

    OK, thanks for trying. :-)

    Henrik

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More