Okay
  Public Ticket #253825
Event after tab Change
Closed

Comments

  • Brian started the conversation
    July 25, 2014 at 6:59pm

    I am looking to add some extra coding to the theme, which would result in an event occuring after a user clicks a tab. This is to help maps load within the tabs with one of the plugins that I am using. Do you know which file I can edit to place the event code after the change in tab?

  •  8,839
    Tahir replied
    July 26, 2014 at 4:52pm

    Hey Brian!

    All the relevant code can be found in "salient/js/init.js" . 

    All the Best,

    -T

    ThemeNectar Support Team 

  • Brian replied
    July 28, 2014 at 6:29am

    Hi Tahir, 

    Thank you for helping me find the javascript file. I looked through the coding and found the "tabbed" section, but when i enter the coding, it causes the theme to break. I am attempting to use maps from the plugin "Map List Pro" within the tabs. This should also work to allow the maps from salient theme to work within tabs as well. According to the comments that I left on the plugin page on themeforest the author said,

    "Hello,

    If a Google Map starts off hidden the API doesn’t know how many map tiles to load and you get what you’re currently seeing.

    There is a way to get the map to redraw:

    google.maps.event.trigger(MapListProMaps[0].map, "resize");

    This makes the first map redraw, but by changing the 0 you can make any of the maps redraw.

    Most tab scripts have an event that you can use to trigger this redraw – normally there is a tab index as well that can be put in place of the 0. You’d need to speak to the author of the tab script for more details on this though."

    Im not sure what ive done wrong to break the theme, but maybe you can help

  •  1,070
    ThemeNectar replied
    July 29, 2014 at 10:59am

    Hey Brian!

    Here's the tabbed section you'll be modding: 

    $('body').on('click','.tabbed > ul li a',function(){
		var $id = $(this).parents('li').index()+1;
		
		if(!$(this).hasClass('active-tab') && !$(this).hasClass('loading')){
			$(this).parents('ul').find('a').removeClass('active-tab');
			$(this).addClass('active-tab');
			
			$(this).parents('.tabbed').find('> div:not(.clear)').css({'visibility':'hidden','position':'absolute','opacity':'0','left':'-9999px','display':'none'});
			$(this).parents('.tabbed').find('> div:nth-of-type('+$id+')').css({'visibility':'visible', 'position' : 'relative','left':'0','display':'block'}).stop().animate({'opacity':1});
			
			if($(this).parents('.tabbed').find('> div:nth-of-type('+$id+') .iframe-embed').length > 0) responsiveVideoIframes();
		}
		
		return false;
	});
    this is what it should be: 
    $('body').on('click','.tabbed > ul li a',function(){
		var $id = $(this).parents('li').index()+1;

		google.maps.event.trigger(MapListProMaps[$id].map, "resize");
		
		if(!$(this).hasClass('active-tab') && !$(this).hasClass('loading')){
			$(this).parents('ul').find('a').removeClass('active-tab');
			$(this).addClass('active-tab');
			
			$(this).parents('.tabbed').find('> div:not(.clear)').css({'visibility':'hidden','position':'absolute','opacity':'0','left':'-9999px','display':'none'});
			$(this).parents('.tabbed').find('> div:nth-of-type('+$id+')').css({'visibility':'visible', 'position' : 'relative','left':'0','display':'block'}).stop().animate({'opacity':1});
			
			if($(this).parents('.tabbed').find('> div:nth-of-type('+$id+') .iframe-embed').length > 0) responsiveVideoIframes();
		}
		
		return false;
	});

    Cheers