Link/Action to open a deeper tab in Azura Page Builder

Home Forums Joomla Templates Momentum – Simple Creative One Page Joomla Template Link/Action to open a deeper tab in Azura Page Builder

Tagged: 

This topic contains 13 replies, has 2 voices, and was last updated by  CTHthemes 2 months, 3 weeks ago.

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #16671

    cubefree
    Participant

    Supported

    Hey!

    Enjoying the template!

    Hoping you can give me what I need for this client.

    In Azura Page Builder I added some tabs below the photo gallery (see screenshots added)

    I would like the “Jump to Specs” link to open the second tab.
    The anchor link is “#tab2” but of course, a link does NOT perform the action of opening the tab.
    Is there a way to do this?

    Does this require a JQuery or can I access an existing one?

    The first one works fine because you’re on the home page and that’s the default behavior.
    Really appreciate the help, thx daniel

    Attachments:
    You must be logged in to view attached files.
    #16674

    CTHthemes
    Keymaster

    Hi, you have to use js script to do the task.

    
    jQuery('#your_tabs_id a[href="#tab2"]').tab('show') // Select tab by name
    

    For more details at:
    https://getbootstrap.com/docs/3.3/javascript/#tabs

    1 – gallery link

    
    <a href="#" class="jump-to-specs" data-tab-id="tab2">Jump to Specs</a>
    

    JS scripts:

    
    jQuery('.jump-to-specs').click(function(e){
        e.preventDefault();
        var tabid = jQuery(this).data('tab-id');
        jQuery('#your_tabs_id a[href="#'+tabid+'"]').tab('show')
    
        jQuery("html,body").animate(
            {
                scrollTop: jQuery('#'+tabid).offset().top
            }, 
            800,
            
        );
    
    });
    
    #16676

    cubefree
    Participant

    Supported
    This reply has been marked as private.
    #16678

    CTHthemes
    Keymaster

    It’s now #tabs
    http://prntscr.com/h0zvp9

    #16682

    cubefree
    Participant

    Supported

    Hmmm… everything looks right. But not getting any action.

    In which JS file should I put the new jQuery function?

    It’s here: /templates/momentum/js/main.js
    at the bottom in a custom area

    Safari Web Inspector gives this err:

    TypeError: jQuery(‘#tabs a[href=”#’+tabid+'”]’).tab is not a function. (In ‘jQuery(‘#tabs a[href=”#’+tabid+'”]’).tab(‘show’)’, ‘jQuery(‘#tabs a[href=”#’+tabid+'”]’).tab’ is undefined)

    #16683

    cubefree
    Participant

    Supported

    Hmmm… very odd. Why would it warn “tab is NOT a function” ?

    • This reply was modified 3 months ago by  cubefree.
    #16685

    cubefree
    Participant

    Supported

    Ok, it seems the function is tabs()
    And I made the update per jquery tabs.
    However still getting the same error “tabs is not a function”.

    #16686

    cubefree
    Participant

    Supported

    So according to a function I set, we’re running JQuery version: 1.12.4

    That seems like a shocker… Am I running a super old version of the Momentum template?

    #16687

    cubefree
    Participant

    Supported

    Hmm… at a loss here. I have restored the original function

    [Error] TypeError: jQuery(‘#tabs a[href=”#’+tabid+'”]’).tab is not a function.
    (In ‘jQuery(‘#tabs a[href=”#’+tabid+'”]’).tab(‘show’)’, ‘jQuery(‘#tabs a[href=”#’+tabid+'”]’).tab’ is undefined)
    (anonymous function) (main.js:382)

    #16692

    CTHthemes
    Keymaster

    Hi, please use azuratab function instead

    
    
    jQuery('.jump-to-specs').click(function(e){
        e.preventDefault();
        var tabid = jQuery(this).data('tab-id');
        jQuery('#your_tabs_id a[href="#'+tabid+'"]').azuratab('show')
    
        jQuery("html,body").animate(
            {
                scrollTop: jQuery('#'+tabid).offset().top
            }, 
            800,
            
        );
    
    });
    
    #16701

    cubefree
    Participant

    Supported

    Thank you much!

    #16714

    CTHthemes
    Keymaster

    You are most welcome 🙂

    #16722

    cubefree
    Participant

    Supported

    I did change the code somewhat.
    I added this to the bottom of main.js
    Also, I was not getting the cursor to scroll to the tab.
    I had an A Name element above the tabs which is what I used.
    You can see this live shortly, Light Pipe Kit

    	/* ==================== 17. custom ==================== */
    
    (function($){		
    		
    	$('.jump-to-specs').click(function(e){
    		e.preventDefault();
    		var tabid = jQuery(this).data('tab-id');
    		$('#tabs a[href="#'+tabid+'"]').azuratab('show');
    	
    		scrollToAnchor('ataglance');
    	
    	});
    	
    	function scrollToAnchor(aid){
        var aTag = $("a[name='"+ aid +"']");
        $('html,body').animate({scrollTop: aTag.offset().top},'slow');
    }
    
    })(jQuery);	
    • This reply was modified 2 months, 4 weeks ago by  cubefree.
    #16732

    CTHthemes
    Keymaster

    I can’t access the site with login credentials to check.

Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.