I am trying to:
I added tabs to a page using css and inserted a different view in each one. One of the views shows images from chid posts. It is conditional to show one or multiple images based on if there is one or more than one image present in the child post. For some reason, the image slider doesn't show its images until I resize my browser window.
You can log in here:
hidden link
Then go to :
hidden link
and click the "Contributions" tab. You will see the image slider doesn't show the images. Do you know what might be the issue here and how to fix it?
Link to a page where the issue can be seen:
I expected to see:
Instead, I got:
Hi, the slider probably can't calculate the available space immediately because of something in the tab CSS, or it could be related to the JavaScript error I see in the console:
Uncaught TypeError: Cannot read property 'addEventListener' of null
at owpSidrDropdown (main.min.js?ver=1.9.0:1)
at HTMLDocument.<anonymous> (main.min.js?ver=1.9.0:1)
Hard to tell offhand. It seems the JavaScript from the theme's main.min.js file is expecting an element with the CSS class "mobile-menu" to exist in the DOM, but not finding it on this page. That triggers a JavaScript error, which could be causing a cascading issue where the slider is not initialized properly until the window resizes. As a test, you could try adding some empty span or div with the CSS class "mobile-menu", confirm the JavaScript error is no longer shown in the console, then test the tab/slider once again.
Or, upon clicking a tab that contains a slider, you can try triggering a window resize event programmatically:
// add this in some click event handler for your tabs
var evt = window.document.createEvent('UIEvents');
evt.initUIEvent('resize', true, false, window, 0);
window.dispatchEvent(evt);
How you implement that depends on how your tabs are programmed.
Right now I am just using css to show and hide specific tab containers when one is clicked. I don't think I'm well-versed enough in javascript to implement this.
Okay it looks like you're using radio input 'checked' state in your CSS selectors to determine which tab is visible. You can use jQuery's input 'change' event handler to trigger code based on those radio input change events like this:
jQuery(document).ready(function(e){
var evt = window.document.createEvent('UIEvents');
evt.initUIEvent('resize', true, false, window, 0);
window.dispatchEvent(evt);
jQuery(document).on('change', 'input[name="tabs"]', function(e){
window.dispatchEvent(evt);
});
});
Try adding that JavaScript snippet to the page once, either in the post Content Template's JS editor or in a JS file enqueued in your theme.
However, you may need help from your theme developers to solve the other JavaScript error I mentioned. That issue does not seem to be related to Toolset as far as I can tell.
Works perfectly! Thank you for your help!
