Hey there.
I have a multi tab system for dates going on at this url:
http://lzsandbox.azurewebsites.net/winter-aspensnowmass-trip/
If you click on any other date at the top the slider shrinks. This happens all over the site. How can I fix this?
-AND-
Also when you click out of tab one to tab 2 the background reloads and changes. How can I fix this?
Thank you
N
Hello There,
Thanks for writing in! This slider action is normal. By default, the slider needs to initialize upon page loading. In your case, no initialization of the sliders because the container of the slider is inactive. The slider needs its container. The container when inactive has a height of zero and this is why the sliders cannot initialize. Upon activating the tab and its content, that’s the only time the slider will initialize. Please take notice that after it is loaded, you can now click on tabs and sliders will show up immediately.
Hope this make sense.
Hey Rue
Thanks for getting back to me. The problem is I need the slider to be full size when clicking on other tabs besides the first one. I see that the sliders are there, but they are small. Is there some CSS issue?
Also, I asked another question about the background changing when I click from the first tab to the second. Is there a way to fix that?
Best,
Nate
Hello There,
Thanks for updating in! yes the sliders were small because they weren’t able to initialize. If you want to force them to display bigger, you can make use of this code:
body .rev_slider_wrapper.fullwidthbanner-container {
min-width: 520px;
max-width: 100%;
}
Hope this helps. Please let us know how it goes.
Hey Rue
Unfortunately that did not work. I tried to add the code to custom css in the customizer and the indivdual page custom css. Is there anything else I can try?
Best
Nate
Hi again,
I checked your page and couldn’t find the CSS being added in your site, there could be a syntax error in your Customizer which is preventing the CSS to work on your site. Try adding the above code at the top of your Customizer > Custom > Global CSS
Let us know how this goes!
Hi Nabeel
Let me start with saying that I’ve asked the question about why the tabs change the background on pages. Click from tab 1 to tab 2 to see what I’m talking about on the below link. Can I get a way to fix this?
About the CSS for the sliders, I removed it because it doesn’t work and it forced 100% on other areas of the site that I don’t want videos to be 100%. Please provide another way for me to fix the problem.
I really appreciate it.
SAME URL AS ABOVE FOR BOTH ISSUES.
Hi Nate,
I am sorry for the back and forth, unfortunately I am confuse with your issue. It seems fine when I checked. See this: https://screencast-o-matic.com/watch/cbiq2vlOvu Slider is there and the tab background on the lower part of the page doesn’t change. Did I missed something here?
Try it only on the tabs at the top with the dates, then when clicking on tab 2 watch the background behind the tabs change. I need that fixed. THEN look at the sliders below within the tabs. They are small. I need that fixed as well. It’s been a week now and I really need this issue resolved.
Thank you
Nate
Background issue FIXED. But I need to have the sliders fixed in the tabs. We are launching on Monday. Please go to the provided link and click on the second date from the left WITHOUT resizing the browser window. You will see that the slider does not pop up at full size.
Thanks guys!
Hi there,
Please add this code to your global custom javascript.
var render_timeout = 0;
jQuery( document ).on('click', '.x-nav-tabs>li>a', function() {
clearTimeout ( render_timeout );
render_timeout = setTimeout ( function() { $(window).resize() ; }, 800);
} );
This should re-render the slider upon tab click.
Thanks.
Added the javascript and didnt help. It’s a head scratcher! Any more suggestions?
Hi there,
Sorry, the $ isn’t changed, please add this instead
var render_timeout = 0;
jQuery( document ).on('click', '.x-nav-tabs>li>a', function() {
clearTimeout ( render_timeout );
render_timeout = setTimeout ( function() { jQuery(window).resize() ; }, 800);
} );
Thanks!
Hey iam
Unfortunately, no, this still doesn’t work either. Please I need something that works today! We are supposed to launch today and the problem is still not fixed. I’ve been talking with you guys for a week. Please give me a real solution.
Thank you so much for your help
Nate
Hi there,
We are sorry for the back and forth but let me explain few facts regarding the tab:
It is natural that JavaScript heavy elements such as sliders accordions or any element that the height is decided by JavaScript lose their height when loaded in a tab that is hidden at the first-page load. JavaScript code of the Inner element can not calculate the correct Heights because it is completely hidden.
The usage of the tab on your page is not what the tab meant to be. Try to use very simple elements inside tabs such as images and text.
Now regarding the case my colleague tried to give you work around with regarding the tab, the elements such as sliders re-render themselves when the window size is changed that is why in cases that The Slider is showing by resizing the browser window it will re calculate the height.
The latest code tries to force through calculation on each click of the tab. Now to make sure that the code will work correctly we will need to double check the case by Adding the codes ourselves by having the URL user pass of your website which you can give us using the secure note functionality
Also, I see that you already took off other tabs and only show one tab. Please kindly duplicate this page and add proper tabs there and get back to us with the URL of that page alongside the credentials that I asked for. Then we will try to make the suggested code work.
But again this is a temporary workaround and it will not change the fact that tabs are not supposed to use this way.
Thank you for your understanding.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.