Tagged: 

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #191018

    Reopened issue: I use tabs on my site a lot and would like to include in page navigation between them. For example, as one gets to the end of content on one tab, I’d like the ability to put a button there they can click to go to the next tab. Is this doable?

    I already tried adding a link to the second tab (http://noblewhy.com/about-2/#tab-id-2) and that did not work. Any thoughts as to how I would do this?

    #191055

    I’d also like the page to go back up to the top if possible after clicking. Is this doable?

    #191562

    Hi!

    Please try inserting your manual URLs in buttons as
    http://noblewhy.com/about-2/#tab-id-2
    http://noblewhy.com/about-2/#tab-id-3
    It seems like you are inserting them like
    http://noblewhy.com/about-2/

    Best regards,
    Yigit

    #191570

    I am putting them in as you describe…within the code they appear as:
    http://noblewhy.com/about-2/#tab-id-2

    but when I view them on the site they revert to:
    http://noblewhy.com/about-2/

    Cache is refreshed so that’s not an issue..other changes I make go live immediately.

    #191655

    Hello,
    I’m having a similar issue. I can, on a separate page, create a button that links to a tab on a different page and it works correctly:

    e.g.,
    On Page1 create a button such as:
    [av_button label='Click me' link='manually,http://mysite.com/subpage3/#tab-id-5' link_target='' color='theme-color' custom_bg='#444444' custom_font='#ffffff' size='small' position='center' icon_select='no' icon='ue800' font='entypo-fontello']

    When clicked, it correctly links to subpage3 and opens the correct tab 5.

    However, if I add that same button (copy/paste) below the content within tab 1 on subpage3, it does not open tab 5.

    thanks,
    Jill

    #193576

    Hey!

    I didn’t test this hack but you can try to modify the tab code in /wp-content/themes/enfold/js/shortcodes.js. Open up the file and search for

    
    		function trigger_default_open()
    		{
    			if(!window.location.hash) return;
    			var open = tabs.filter('[data-fake-id="'+window.location.hash+'"]');
    
    			if(open.length)
    			{
    				if(!open.is('.active_tab')) open.trigger('click');
    				window.scrollTo(0, container.offset().top - 70);
    			}
    		}
    

    and replace it with

    
    		function trigger_default_open()
    		{
    			if(!window.location.hash) return;
    			var open = tabs.filter('[data-fake-id="'+window.location.hash+'"]');
    
    			if(open.length)
    			{
    				if(!open.is('.active_tab')) open.trigger('click');
    				window.scrollTo(0, container.offset().top - 70);
    			}
    		}
    
            $('a').on('click',function(){
                var hash = $(this).attr('href').replace(/^.*?#/,'');
    
                if(hash)
                {
                    var open = tabs.filter('[data-fake-id="#'+hash+'"]');
                    if(open.length)
                    {
                        if(!open.is('.active_tab')) open.trigger('click');
                        window.scrollTo(0, container.offset().top - 70);
                    }
                }
            });
    
    

    Regards,
    Peter

    #193615

    Thanks Peter – I updated as instructed and it does not work for me.

    Unlike previously, when I hover over the button the correct full tab link shows, but clicking on it does nothing.

    #193756

    Hi!

    Please post a link to your tabs/buttons.

    Best regards,
    Peter

    #193890
    #193921

    Hey!

    It seems like the code is missing in http://noblewhy.com/wp-content/themes/enfold/js/shortcodes.js – did you remove it? If you don’t want to leave it please create us an admin account and post the login data as private reply. I’ll modify the shortcode.js file for you and check if it works. If not I’ll debug the issue and try to find a solution.

    Best regards,
    Peter

    #193945

    I applied it correctly this time and it works!

    The only caveat is when it scrolls to the top, it doesn’t go all the way to the top of the page, just the top of the tabs. Any way I can make it scroll to the top like the scroll to the top bottom in the bottom right and its smooth animation to the top?

    #193948

    I just replaced my shortcodes.js content with what you provided above http://noblewhy.com/wp-content/themes/enfold/js/shortcodes.js
    Same results as wss310, thanks! Interesting, because I did not remove any of the code within the theme provided shortcodes.js.

    I also have the question about not scrolling to the top of the page (or top of the section containing the tabs) if possible. EDIT>while next tab does open at the top of its content (good), it cuts off the very top of the tab content area. Is there a way to add some padding to the top of the tab bookmark so it shows the full top tab?

    Glad link/buttons to other tabs work now, thank you!

    • This reply was modified 11 years ago by drjill.
    #194089

    Hi! I have the same question but I am working in Abundance. Can I replace the same code? Where would I find my shortcodes.js file?
    Thanks!

    #194660

    Hi!

    If you want to completely remove the “scroll” effect you just need to delete this line

    
    window.scrollTo(0, container.offset().top - 70);
    

    in the code I posted here https://kriesi.at/support/topic/tab-navigation-2/#post-193576
    If you want to add some padding just increase the last value (-70) and replace it with i.e. -30. You can also add a positive value (i.e. + 10) to the offset instead of subtracting 70px.


    @ocklein
    . no unfortunately not because Abundance does not support deep linking for tabs.

    Best regards,
    Peter

    #194750

    Thanks for your help, Peter. I’ll give it a try. – Jill

Viewing 15 posts - 1 through 15 (of 15 total)
  • The topic ‘Tab Navigation’ is closed to new replies.