-
AuthorPosts
-
July 5, 2018 at 5:39 pm #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
July 7, 2018 at 11:40 am #982407July 9, 2018 at 5:06 pm #983217Thanks 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?
July 9, 2018 at 5:22 pm #983236Hi 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,
VictoriaJuly 9, 2018 at 5:53 pm #983274This reply has been marked as private.July 10, 2018 at 12:56 pm #983626Hi sassoagency,
Please copy this folder to your child theme with the files in it.
/enfold/config-templatebuilder/avia-shortcodes/tab_section/Best regards,
VictoriaJuly 10, 2018 at 4:37 pm #983733Hi 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
July 12, 2018 at 5:58 am #984496Hi,
Thanks for the update. This thread might help.
// https://kriesi.at/support/topic/white-space-under-filterable-portfolio-within-tab-section/#post-976097
// https://kriesi.at/support/topic/white-space-under-filterable-portfolio-within-tab-section/#post-975658Best regards,
IsmaelJuly 13, 2018 at 6:13 pm #985263Hi 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?
July 16, 2018 at 3:47 am #985817Hi,
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,
IsmaelJuly 16, 2018 at 4:31 pm #985973Hi 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
July 17, 2018 at 4:02 am #986206Hi,
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,
IsmaelJuly 17, 2018 at 3:49 pm #986484Thanks 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?
July 18, 2018 at 3:09 am #986724Hi,
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,
IsmaelJuly 18, 2018 at 8:11 pm #987155I 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.
July 19, 2018 at 12:58 pm #987367Hey!
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!
IsmaelAugust 15, 2018 at 7:11 pm #997646Hi,
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:
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:
August 16, 2018 at 5:55 am #997771Hi,
The solution in the following thread should help.
Best regards,
IsmaelAugust 16, 2018 at 3:57 pm #997979Hi 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
August 17, 2018 at 4:46 am #998237Hi,
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,
IsmaelAugust 17, 2018 at 4:13 pm #998491Hi 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
August 19, 2018 at 11:18 am #998875Hi,
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,
DudeAugust 20, 2018 at 2:06 pm #999364This reply has been marked as private.August 23, 2018 at 11:30 pm #1001002Hi,
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!
August 26, 2018 at 12:52 pm #1001856Hi,
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,
DudeAugust 26, 2018 at 9:23 pm #1002025Hi,
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:964August 28, 2018 at 1:57 am #1002486Hi,
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,
IsmaelAugust 28, 2018 at 4:37 pm #1002755Hi 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
August 29, 2018 at 4:28 am #1002960Hi,
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,
IsmaelAugust 29, 2018 at 6:12 pm #1003232ok, 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
-
AuthorPosts
- The topic ‘Expanding Content Hidden in Tab Views’ is closed to new replies.