0

I'm in need of some specific help with my Wordpress webshop of the Blaszok MPC theme. The website can be found at http://testsite.vansompel.be

The problem is situated when scrolling down to the tab 'Promoties' and clicking on the nested tabs 'Motoren', 'Tuinmachines' and 'Fietsen'. Only the first product slider (MPC product slider included in my theme) seems to show up correctly on page load. When clicking on the other tabs, the other product sliders don't seem to load. They do popup however when I resize the browser.

When looking in developer tools, I found that the class .caroufredsel_wrapper shows the following css code:

.caroufredsel_wrapper { text-align: start; float: none; position: relative; top: auto; right: auto; bottom: auto; left: auto; z-index: auto; width: 0px; height: 0px; margin: 0px 0px 0px -5px; overflow: hidden; display: block; }

Here the width and height properties only change from 0 to width: 1108px and height: 331px when I resize the screen. Also the post thumbnails go from width: 0px to width: 237px.

I also tried a WooCommerce product listing on the 'Nieuwkomers' tab for reference and there they all seem to load correctly, however those or not product sliders like I want them to be.

Is there any way to have all the sliders on the different tabs load correctly?

Much appreciated!

Improve this question

1 Answer 1

Reset to default
0

This isn't the best approach but you could force a resize event, essentially forcing the tabs to show.

$(window).trigger('resize');

You may want to do this after the page completely loads.

$(window).load(function(){
    $(window).trigger('resize');
});
Improve this answer
5
  • I'm trying something like this: $("ul#myTab_671 li a").click(function(){ $(window).trigger('resize'); }); But so far it doesn't seem to be working, any tips?
    – Sam
    Commented Sep 17, 2018 at 13:48
  • Don't add it inside an onclick event, just copy my second code snippet as is and put it directly inside the script tag
    – RiddleMeThis
    Commented Sep 17, 2018 at 14:08
  • Thanks a lot but your second code snippet doesn't seem to do anything. I've now added <script type="text/javascript"> jQuery(function($) { $("ul#myTab_671 li a").click(function(){ $(window).trigger('resize'); }); }); </script> (also it seems that the jQuery(function) code was necessary because else I had an Uncaught TypeError: $ is not a function. Now they do pop up, but at only half the size it seems. You can check at testsite.vansompel.be
    – Sam
    Commented Sep 17, 2018 at 14:51
  • Now I just added a larger height and everything seems to work fine! Maybe not the cleanest way to solve this indeed, but I'll accept this as an answer! Thanks a lot for your help. Cheers!
    – Sam
    Commented Sep 17, 2018 at 17:00
  • No Problem. Good luck.
    – RiddleMeThis
    Commented Sep 17, 2018 at 17:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.