-
AuthorPosts
-
December 12, 2017 at 9:29 am #887791
How can make tabs display closed on mobile devices?
Screenshot 1 – displayed now
https://www.dropbox.com/s/1wha597x74r4t2f/2017-12-12_102650.png?dl=0Screenshot 2 – need to display
https://www.dropbox.com/s/pfprrozy330vzgo/2017-12-12_102713.png?dl=0December 12, 2017 at 1:14 pm #887900Hey sckye,
Could you please give us a link to your website, we need more context to be able to help you.
Best regards,
VictoriaDecember 12, 2017 at 2:17 pm #887939Hey Victoria,
Private Content:December 12, 2017 at 4:05 pm #887982Hi sckye,
Here are some threads to consider:
https://kriesi.at/support/topic/all-tabs-closed-on-mobile-only/
https://kriesi.at/support/topic/closing-an-open-tab-in-mobile/If you need further assistance please let us know.
Best regards,
VictoriaDecember 12, 2017 at 5:16 pm #888008Hi Victoria,
User from this thread: https://kriesi.at/support/topic/closing-an-open-tab-in-mobile/
Applied the solution from here: https://kriesi.at/support/topic/responsive-tab-closing/
Tried to do the same, nothing happened.Private Content:
December 14, 2017 at 3:42 am #888716Hi,
Thank you for the update.
We modified the code in the functions.php file.
// custom script add_action('wp_footer', 'ava_custom_script'); function ava_custom_script(){ ?> <script> (function($){ // close tab on mobile view function i() { $(window).load(function() { var mobile = $('.responsive #top .av-main-nav .menu-item-avia-special').css('display'); if( mobile !== 'block' ) return; $('.active_tab').removeClass('active_tab'); $('.active_tab_content').removeClass('active_tab_content'); }); } i(); })(jQuery); </script> <?php }
Best regards,
IsmaelDecember 14, 2017 at 10:27 am #888804Thank you! Works great!
There were two questions:
1. Can I specify the width of the screen somewhere? For example, everything that is 960 or less – the tabs are closed by default.
2. Is it possible to do so:
Click on the tab – it opened, click on the tab – did it close like in an accordion?December 16, 2017 at 3:43 am #889455Hi,
1.) The script will trigger if the mobile menu is visible so you can set the Main Menu > Menu Items for mobile to the second option.
2.) I’m sorry but this will require modification that is beyond the scope of support. Please hire a freelance developer or contact our partner, Codeable.
Best regards,
IsmaelDecember 16, 2017 at 11:17 am #889512Hi,
For some reason, the contents of the tab are no longer displayed on large screens during the first page load (until you click on the tab).
Screenshot: https://www.dropbox.com/s/bj26pbyxsbm4icw/2017-12-16_120801.png?dl=0- This reply was modified 7 years ago by sckye.
December 18, 2017 at 5:25 am #889903Hi,
I checked the test page again but it’s empty. Did you move the site?
Best regards,
IsmaelDecember 18, 2017 at 9:22 am #889932No, I did not move the site. Just the page looks empty – the contents of the tabs are not displayed until you click on them. I attach two screenshots. Try to go to the page again please.
December 19, 2017 at 3:12 am #890322Hi,
No, I did not move the site. Just the page looks empty
The page is blank, just plain white. We can’t see anything. Please check it. ( see private field )
Best regards,
IsmaelDecember 19, 2017 at 6:08 am #890341This is because Under Construction plugin is enabled. To see the page you need to be logged in on the site.
December 22, 2017 at 6:18 am #891465Hi,
Thank you for the info.
We modified the script a bit. It should be working now. Please remove browser cache or hard refresh before checking the page.
Best regards,
IsmaelDecember 22, 2017 at 9:29 am #891513Cache cleared, tried in three different browsers – contents of the tab are no longer displayed on large screens during the first page load until you click on the tab. After the first time clicking on the tab on subsequent reboots of the page, the address with the anchor is always opened … / # tab-id-1 so it seems that everything is fine until you look in the address bar and make sure that the address with the anchor.
December 24, 2017 at 4:11 am #891904Hi!
My bad. I forgot to reset the tab options. It should be working now. You might notice a small delay but the script should close the tab on mobile view.
Regards,
IsmaelDecember 25, 2017 at 10:49 am #891979Hi,
The script works fine, but unfortunately for some reason there were problems after installing the UberMenu plugin (wpmegamenu.com) – contents of the tabs are not displayed until you click on them.
December 28, 2017 at 3:42 am #892287Hi,
The UberMenu plugin has known issues with Enfold according to the UberMenu knowledgebase: ubermenu-3 theme-integration enfold and this could be another issue. Unfortunately we are not able to accommodate every plugin.Best regards,
MikeJanuary 2, 2018 at 1:32 pm #892472Hi, Mike
Thanks for the comment, but you are mistaken when you think that the UberMenu plug-in has some problems with the Enfold, it’s not, it works perfectly. I have some difficulties and Ismael is trying to help me. If he thinks fit, he can at any time tell me that I’m asking too much.
January 3, 2018 at 1:26 pm #892811Hi,
There is an error in JavaScript and so the JavaScript for the tabs does not work.
The error is in the under construction plugin.Best regards,
VictoriaJanuary 3, 2018 at 1:41 pm #892820Under construction plugin was removed – this did not solve the problem.
January 4, 2018 at 7:22 am #893132Hi,
The script is not working properly because the mobile logic that we created became invalid when you installed the ubermenu plugin. We modified the script a bit. Please make sure that you’re not looking on a cached version of the page.
Best regards,
IsmaelJanuary 4, 2018 at 10:43 am #893182Hi Ismael,
Everything works great. Thank you ever so much.
January 5, 2018 at 9:59 am #893627 -
AuthorPosts
- The topic ‘ALB > Content Elements > Tabs: make tabs closed on mobile’ is closed to new replies.