Viewing 30 posts - 1 through 30 (of 38 total)
  • Author
    Posts
  • #981675

    Hi,

    I’m having a problem with a ajax portfolios that I put into a set of tab panels. I set the tabs to adjust to the height of the content, but when I do that, if I click and item in the ajax portfolio, when the preview expands it gets obscured because the tab doesn’t expand with it.

    I tried the fix detailed in this thread: https://kriesi.at/support/topic/tab-section-height-doesnt-allow-for-accordionsexpanding-elements/
    When I went into the files specified, my files didn’t have any code at the line numbers mentioned there.

    To see what I am trying to fix, you can go to this page: http://victorypark.wpengine.com/directory/#shopping (hosted on WPengine)
    Click on either the Chad Rookstool item, or the Joanna Czech item. When the preview expands you can see that it is getting cut off.
    Can you help me to sort out what needs to be to fix this issue?

    Thanks,

    Brian

    #982407

    Hey sassoagency,

    The code to be changed is in the
    /enfold/config-templatebuilder/avia-shortcodes/tab_section/tab_section.js in the set slide function
    Image 2018-07-07 at 12.40.39.png

    If you need further assistance please let us know.
    Best regards,
    Victoria

    #983217

    Thanks Victoria. I found the line sin the file, but I’m still not sure what needs to be changed about them here to fix the issue I’m having. Can you please assist?

    #983236

    Hi sassoagency,

    Can you give us temporary admin access to your website in the private content box below, so that we can have a closer look?

    Best regards,
    Victoria

    #983274
    This reply has been marked as private.
    #983626

    Hi sassoagency,

    Please copy this folder to your child theme with the files in it.
    /enfold/config-templatebuilder/avia-shortcodes/tab_section/

    Best regards,
    Victoria

    #983733

    Hi Victoria,

    I’ve made the change, but there are still issues. The resize is working the way I want it to on the Shopping and Restaurant tabs, but the Entertainment tab doesn’t resize. The Entertainment tab doesn’t have a portfolio grid like the others.

    Thanks,

    Brian

    #984496
    #985263

    Hi Ismael,

    Thanks for sending this. I went to try it, but I cannot find the file you are referencing in the thread. I checked in enfold > config-templatebuilder but it doesn’t have a subfolder called portfolio. Can you clarify where the files is that I need to make the mods to? Also, when I make the mods, can I save the modified file in the same spot in the folder structurer of my child theme and have it work?

    #985817

    Hi,

    The “portfolio” folder is in the config-templatebuilder > aviashortcodes folder. You need to modify the portfolio.js file. Add this code around line 59.

    setTimeout(function() { $(window).trigger('av-content-el-height-changed'); }, 1000);
    

    Best regards,
    Ismael

    #985973

    Hi Ismael,

    I’ve put in the new line of code and cleared the cache, but the problems are still there. If you go to http://victorypark.wpengine.com/directory, (hosted on WPengine) you can see the problems. When the page comes up, it starts in the Restaurant tab. When you click on the logos for the different tenant businesses, the ajax portfolio loads the preview for the business. For some of the businesses, the description is longer, and it is getting cut off. For example. click on the Shopping tab in the purple bar and then select Chad Rookstool, or Joanna Czech for the logo list. Their profiles are longer and are getting cut off at the bottom. The other problem is that when you click on the Entertainment tab in the purple bar, the content space doesn’t resize like it does with the others. Can you please advise on what might be a good fix? If you need login credentials I’ve already created some for you guys to use. They are in the private comments on this thread.

    Thanks,

    Brian

    #986206

    Hi,

    Thanks for the update.

    We disabled this script from the functions.php file.

    function ava_custom_script_fix(){
    ?>
    <script>
    (function($){
    	function a() {
    		$('.av-tab-section-container').bind('click', '.av-section-tab-title', function() {
    			var active  = $(this).find('.av-active-tab-title'),
    				number  = active.data('av-tab-section-title'),
    				content = $(this).find('.av-layout-tab[data-av-tab-section-content='+ number +']').children('.av-layout-tab-inner'),
    				oheight = content.outerHeight(true) + active.outerHeight(true) + 100;
    
    				$(this).find('.av-tab-section-outer-container').css('max-height', oheight);
    		});
    
    		$('.av-section-tab-title:eq(0)').trigger('click');
    	}
    
        a();
    })(jQuery);
    </script>
    <?php
    }
    //add_action('wp_footer', 'ava_custom_script_fix');

    Best regards,
    Ismael

    #986484

    Thanks Ismael, it’s working perfectly now! Now, was the change you guys made implemented in the child theme, or in the main enfold theme? If it was in the main Enfold theme, will it get wiped out if I run a theme update? If so, can I move it to the child theme and have it work? To do so I assume I would copy the code block into my child theme’s function.php file correct?

    #986724

    Hi,

    That script was added to adjust the height of the tab section based on its content. It has been implemented in the core already so you don’t need it anymore. Just set the tab section’s “Content height” to the second option (Auto adjust to content).

    Best regards,
    Ismael

    #987155

    I already have it set that way. It is working mostly, but if you are on a different page and click on then Services item in the nav under Directory, when the page loads, it brings up the nServices tab, but the tab is still the wrong size.

    #987367

    Hey!

    Thanks for the update.

    We used this script in the functions.php file to trigger the “set_slide_height” function on page load.

    add_action('wp_footer', 'ava_auto_resize');
    function ava_auto_resize(){
    ?>
    <script>
    (function($){	
    	var int = window.setInterval(function(){
    		$(window).trigger('resize');
    		$(window).trigger('av-content-el-height-changed');
    	}, 2000);
    	
    	$(window).load(function () {
    		setTimeout(function() {
    			clearInterval(int);
    		}, 2000);
    	});
    })(jQuery);
    </script>
    <?php
    }

    Cheers!
    Ismael

    #997646

    Hi,

    I’ve tried implementing this fix on another site and it still doesn’t appear to be working. You can view the issue if you go to the following link:

    Shop & Dine

    If you click on either the Dining or Services tabs, and then click on the logo of one of the items in the portfolio, you will see that the panel doesn’t expand, and the content is being obscured. Can you please help me to resolve this issue once and for all as it is a recurring problem on a number of sites I am working on.

    Here’s a screenshot of what I am seeing:

    screenshot of current issue

    #997771

    Hi,

    The solution in the following thread should help.

    // https://kriesi.at/support/topic/white-space-under-filterable-portfolio-within-tab-section/#post-976097

    Best regards,
    Ismael

    #997979

    Hi Ismael,

    I have a question. I am using a child theme, and I made a copy of the portfolio.js file in my child theme and adjusted the timeout. It isn’t having any effect. Does this have to be done in the enfold theme itself, or can it be done in a child theme?

    Thanks,

    Brian

    #998237

    Hi,

    This can be done in the child theme but you have to copy the whole portfolio folder inside a folder called “shortcodes” and then adjust the path of the portfolio assets (js/css).

    // https://kriesi.at/documentation/enfold/intro-to-advanced-layout-builder/#add-elements-to-alb

    Add that filter in the functions.php file and then edit the portfolio.php file, look for this code around line 31:

    function extra_assets()
    			{
    				//start sessions - only necessary for correct breadcrumb nav on single portfolio pages
    				if(!is_admin() && !current_theme_supports('avia_no_session_support') && !session_id()) session_start();
    
    				//load css
    				wp_enqueue_style( 'avia-module-portfolio' , AviaBuilder::$path['pluginUrlRoot'].'avia-shortcodes/portfolio/portfolio.css' , array('avia-layout'), false );
    
    				//load js
    				wp_enqueue_script( 'avia-module-isotope' , AviaBuilder::$path['pluginUrlRoot'].'avia-shortcodes/portfolio/isotope.js' , array('avia-shortcodes'), false , TRUE);
    				wp_enqueue_script( 'avia-module-portfolio' , AviaBuilder::$path['pluginUrlRoot'].'avia-shortcodes/portfolio/portfolio.js' , array('avia-shortcodes'), false , TRUE);
    			}
    

    Replace it with:

    function extra_assets()
    			{
    				//start sessions - only necessary for correct breadcrumb nav on single portfolio pages
    				if(!is_admin() && !current_theme_supports('avia_no_session_support') && !session_id()) session_start();
    				$child_theme_url 	= get_stylesheet_directory_uri();
    				//load css
    				wp_enqueue_style( 'avia-module-portfolio' ,  $child_theme_url.'/shortcodes/portfolio/portfolio.css' , array('avia-layout'), false );
    
    				//load js
    				wp_enqueue_script( 'avia-module-isotope' ,  $child_theme_url.'/shortcodes/portfolio/isotope.js' , array('avia-shortcodes'), false , TRUE);
    				wp_enqueue_script( 'avia-module-portfolio' ,  $child_theme_url.'/shortcodes/portfolio/portfolio.js' , array('avia-shortcodes'), false , TRUE);
    			}
    

    Best regards,
    Ismael

    #998491

    Hi Ismael,

    I copied the portfolio folder from the enfold theme (wp-content/themes/enfold/config-templatebuilder/avia-shortcodes/portfolio) to my child theme (wp-content/themes/enfold-child/config-templatebuilder/avia-shortcodes/portfolio).

    I added this filter to the child theme’s functions.php:

    add_action('wp_footer', 'ava_auto_resize');
    function ava_auto_resize(){
    ?>
    <script>
    (function($){	
    	var int = window.setInterval(function(){
    		$(window).trigger('resize');
    		$(window).trigger('av-content-el-height-changed');
    	}, 2000);
    	
    	$(window).load(function () {
    		setTimeout(function() {
    			clearInterval(int);
    		}, 2000);
    	});
    })(jQuery);
    </script>
    <?php
    }

    I then replaced the lines in the portfolio.php file in the child’s portfolio folder with the lines you posted. I’m not seeing any change in the behavior in the page though. Do you need credentials to get into the site?

    Thanks,

    Brian

    #998875

    Hi,

    I checked the source code of http://saddlecreektm.wpengine.com/shop-dine/ (hosted on WPengine) and I can’t find the function ava_auto_resize in the code. Please create us an admin account and we’ll look into it.

    Best regards,
    Dude

    #999364
    This reply has been marked as private.
    #1001002

    Hi,

    I double checked and the filter is in the functions.php for the child theme. Were you able to find anything with the admin credentials?

    Thanks!

    #1001856

    Hi,

    I modified the code a bit and added it to your child theme functions.php:

    
    add_action('wp_footer', 'ava_auto_resize');
    function ava_auto_resize(){
    ?>
    <script>	
    setTimeout(function(){
    	setInterval(function() {
    		jQuery(window).trigger('resize');
    		jQuery(window).trigger('av-content-el-height-changed');
    		jQuery('.av-layout-tab .isotope').isotope({
    			layoutMode : 'fitRows', itemSelector : '.flex_column'
    		});
    	}, 1000);
    }, 1500);
    </script>
    <?php
    }
    

    Please check if this solves the issue on your end.

    Best regards,
    Dude

    #1002025

    Hi,

    Unfortunately that did not work. Now the ajax component isn’t working. If I click on the logo for one of the tenants it shows an overlay and the spinner like it is trying to load the ajax content, but then the overlay just disappears.

    Also, the javascript console is showing an error now:

    Uncaught TypeError: Cannot read property ‘addClass’ of undefined
    at Object.show_item (portfolio.js?ver=4.9.8:201)
    at a.fn.init.single_callback (portfolio.js?ver=4.9.8:282)
    at $.AviaPreloader.trigger_loaded (shortcodes.js?ver=4.4.1:980)
    at $.AviaPreloader.checkImage (shortcodes.js?ver=4.4.1:969)
    at shortcodes.js?ver=4.4.1:964

    #1002486

    Hi,

    I copied the portfolio folder from the enfold theme (wp-content/themes/enfold/config-templatebuilder/avia-shortcodes/portfolio) to my child theme

    Create a folder called “shortcodes” inside the child theme directory and then copy the “portfolio” folder along with its content inside that folder. You don’t need to copy the whole config-templatebuilder directory. Please review our previous reply.

    // https://kriesi.at/support/topic/expanding-content-hidden-in-tab-views/#post-998237

    Best regards,
    Ismael

    #1002755

    Hi Ismael,

    I didn’t copy the whole directory, but I thought the directory structure needed to match in order for the files in the child theme to replace the ones in the parent. I have a folder in my child theme for config.templatebuilder, and it has the avia-shortcodes folder in it, and then the portfolio folder there, but there aren’t a bunch of extra files, just files for any other customizations that are in place. If I am wrong about the folder structure needing to mirror the parent theme, can you please direct me to some documentation as to how the child theme’s folders should be structured for the re[placement to work? In any case, the last fix that was put in has now disabled the ajax portfolio feature and I need to get it working as soon as possible, so any assistance that you can render would be greatly appreciated.

    Thanks

    #1002960

    Hi,

    child theme’s folders should be structured for the re[placement to work?

    You should review the instructions above.

    // https://kriesi.at/support/topic/expanding-content-hidden-in-tab-views/#post-1002486

    Documentation: https://kriesi.at/documentation/enfold/intro-to-advanced-layout-builder/#add-elements-to-alb

    Best regards,
    Ismael

    #1003232

    ok, in the interests of getting this fixed quickly, I have gone back and removed the modifications form the child theme to start over. Now, just to clarify, are the modified portfolio files supposed to go here:

    /themes/enfold-child/config-templatebuilder/avia-shortcodes/portfolio/

    or here:

    /themes/enfold-child/shortcodes

    You keep saying add them into a folder called shortcodes with no reference to exactly where that folder should be, and I thought that the folder structure of the child theme is supposed to match that of the parent so that the theme registers the child file as a replacement of the parent file.

    I will add the files back in wherever you tell me they are supposed to go and we will work from there. I hate restarting this process, but we are apparently not connecting on communication (I may be just misunderstanding you, I admit), but so far every fix that we’ve tried to put in for this problem has either not changed anything or made it worse, so I really need to get this resolved.

    Thanks

Viewing 30 posts - 1 through 30 (of 38 total)
  • The topic ‘Expanding Content Hidden in Tab Views’ is closed to new replies.