Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1293407

    Hi,

    I’ve created a page to feature a number of restaurants. The page is here: http://discoverdowntowndanville.org/welcome/dine.

    I have the restaurants listed in various tab sections based on the food they offer: breakfast, lunch, dinner, etc. When a user clicks on a tab section (lunch, for instance), they see all the restaurants that offer lunch. If they click on an anchor link for a restaurant listed in the tab section, it takes them to content on the same page about that restaurant. I would like to then link back from that restaurant to a different tab section (dinner, for instance).

    The tab sections work great to link down to the restaurant content, but I can’t get the anchor links in the restaurant sections to take me back to a different tab section. I can’t see a place to apply an ID attribute to a tab section. I tried a workaround of linking to a text column in the tab section with a custom ID, but that doesn’t work, either.

    I see that a few other people have asked similar questions (here and here and here, and I have tried to follow the advice in these threads but without any luck. Based on one of the threads, I placed the following code in my Enfold Child functions.php:

    // custom script
    add_action( ‘wp_footer’, ‘ava_custom_script_tab_section’ );
    function ava_custom_script_tab_section() {
    ?>
    <script type=”text/javascript”>
    (function($) {
    function scrollToTab(s, e,) {
    $(s).on(e, function(event) {
    var anchor, loc, cur, hash, tab, parent, pos;

    if( e == ‘load’ ) {
    loc = window.location.hash;
    hash = loc;
    } else {
    loc = $(this).attr(‘href’);
    hash = loc.substring(loc.indexOf(‘#’));
    }

    tab = $(‘.av-section-tab-title[href=’+ hash +’]’);
    parent = tab.parents(‘.av-tab-section-outer-container’);
    pos = parent.offset();

    tab.trigger(‘click’);

    if(hash) {
    setTimeout( function() {
    $(window).scrollTop( pos.top – 100 )
    }, 1000 );
    }
    });
    }

    scrollToTab( ‘.menu-item a’, ‘click’ );
    scrollToTab( window, ‘load’ );
    })(jQuery);
    </script>
    <?php
    }

    I would really appreciate any help you can provide.

    Thanks!
    John

    #1293846

    Hey johnjosephjohansson,

    Thank you for the inquiry.

    The script is not yet working because it is currently listening for any click events done on the default menu items, but it looks like you are using the button element. To fix that, you have to look for this line..

    scrollToTab( ‘.menu-item a’, ‘click’ );
    

    .. and replace it with this.

    scrollToTab( ‘.avia-button’, ‘click’ );
    

    Make sure that the button link corresponds to the tab section title or ID. So with that in mind, the button link should be set to “#coffee–pastries” when you want that button to open the Coffee & Pastries tab. And if you are wondering about the double hyphen between coffee and pastries, that is because the theme automatically replaces spaces with hyphen and removes special characters, which in this case the character “&”.

    Best regards,
    Ismael

    #1296386

    Hi, thanks so much for your reply. I updated the functions.php file with the new scrollToTab line but, unfortunately, the anchor link is not working to scroll back up the page to the tab section.

    Maybe the problem is that I’m not sure where to set the link in the tab section. I see that I can set a custom ID in a column’s Developer Sections, but I don’t see that same option in a tab’s Developer Section. I only see Custom CSS Class and Lockable Custom CSS Class.

    Thanks for your help,
    John

    #1296681

    Hi,

    The custom ID is based on the tab title, so for Coffee & Pastries tab, the ID will be coffee–pastries, and for Ice Cream, it will be ice-cream. As we noted above, spaces and special characters such as “&” will be automatically converted to hyphens.

    This syntax is invalid.

    scrollToTab( ‘.avia-button’, ‘click’ );
    

    You have to replace the curly quotes with straight ones.

    scrollToTab('.avia-button', 'click' );
    

    Best regards,
    Ismael

    #1301469

    Thanks for your help! This is perfect.

    #1301720

    Hi,

    Great, I’m glad that Ismael could help you out. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.