Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • October 25, 2018 at 12:35 pm #1026321
    weasyweb2015

    hi, in this page i create a menu (en meal) and (nl meals) and with jquery show and hide two different tab. on mobile the (nl meal) do not show the image of tab inline. i can’t solve this problem.

    edit:
    maybe i can solve the problem to show inline image but the horizontal scroll do not works.

    can you help me?

    • This topic was modified 6 years, 1 month ago by weasyweb2015.
    October 30, 2018 at 3:06 am #1027810
    Ismael

    Hey weasyweb2015,

    Thank you for using Enfold.

    There should be a minimum width applied to the “.av-tab-section-tab-title-container” container but since the “nl meals” are hidden initially, the minimum width value is being set to 0. You can fix this with css:

    .av-tab-section-tab-title-container {
    min-width: 1024px !important;
}

    However, doing so will require a lot of css media queries. Another workaround is to calculate the overall width of the tab title containers and then apply the result as the minimum width of the “.av-tab-section-tab-title-container” on resize.

    Best regards,
    Ismael

    October 30, 2018 at 12:09 pm #1027961
    weasyweb2015

    can you help me to fix this problem?

    but how can i fix the horizontal scroll? if i set the min-width to 1024px when i click on last item the horizontal scroll doesen’t work

    • This reply was modified 6 years, 1 month ago by weasyweb2015.
    November 2, 2018 at 7:00 am #1029045
    Ismael

    Hi,

    How did you hide the “nl” section? You may need to hide it only after the required tab scripts are executed. You can use this snippet to apply a minimum width to the title container.

    add_action('wp_footer', 'ava_custom_script_tab_width');
function ava_custom_script_tab_width(){
	?>
	<script type="text/javascript">
        (function() {
            const tabWidth = () => {
                const s = document.getElementById('nl');
                const t = s.querySelector('.av-tab-section-tab-title-container');
                const tc = t.querySelectorAll('.av-section-tab-title');
                let tw = 0;
                let th = 0;

                tc.forEach( tcc => {
                    tw += parseInt( tcc.offsetWidth, 10 );
                });

                t.style.minWidth = tw + 'px';
            }

            window.addEventListener( 'resize', tabWidth, false);
        })();
	</script>
	<?php
}

    Best regards,
    Ismael

    November 2, 2018 at 12:02 pm #1029113
    weasyweb2015

    i hide the nl meals via jquery

    $('#nl').hide();

    i added this script and nothing change

    i have created a demo page

    https://www.tastyboxvending.com/demo-page/

    the problems is when hide the nl meals. how can hide this element after loading the tab script

    <script>
var $ = jQuery;

$(function (){

    $('.menu-item-top-level-1').click(function (event){
        $('#en').show();
        $('#nl').hide();
    });

    $('.menu-item-top-level-2').click(function (event){
        $('#en').hide();
        $('#nl').show();
    });

});

$(document).ready(function(){

    $('.menu-item-top-level-1').click(
        function(event) {
        event.preventDefault();
    });

    $('.menu-item-top-level-2').click(
        function(event) {
        event.preventDefault();
    });

    $('#nl').hide();
});
</script>
    • This reply was modified 6 years, 1 month ago by weasyweb2015.
    November 6, 2018 at 3:41 am #1030152
    Ismael

    Hi,

    Try to hide the section on window “load” or the “av-content-el-height-changed” event.

    window.addEventListener( 'load', function() {
   // code here
}, false);

    or..

    $(window).on( 'load', function() {
   // code here
});

    You can also add the script directly in the config-templatebuilder > avia-shortcodes > tab_section > tab_section.js file, right after the “set_min_width” function.

    Best regards,
    Ismael

    November 6, 2018 at 11:50 am #1030342
    weasyweb2015

    thank you seems to be working now

    • This reply was modified 6 years, 1 month ago by weasyweb2015.
    November 7, 2018 at 8:13 am #1030718
    Rikard

    Hi,

    Great, glad you got it working. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

    November 7, 2018 at 11:42 am #1030802
    weasyweb2015

    i think we can close this topic.

    November 7, 2018 at 8:04 pm #1030979
    Jordan Shannon

    Hi,

    If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘problem with tab’ is closed to new replies.