Viewing 30 posts - 1 through 30 (of 44 total)
  • Author
    Posts
  • #1108858

    Hi guys,

    I’ve got a little issue with the icon list animation that is not working correctly in a tab section. The problem occurs only when I go directly to the section (2, 3 , 4…) without going on the first tab section. Basically I’ve put a link on my homepage that get directly the person to the tab section content he wanted (type example.com/#tabsectiontitle1, example.com/#tabsectiontitle2, example.com/#tabsectiontitle3…..). So when you click on the first tab section link, everything goes well. But if you click on the second, third, etc… then the animation of my icon list content, in the tab section, is not happening.

    Do you know how to fix this little problem ? I really need the animation so not displaying it is not envisageable in this case.

    Best regards

    #1109623

    Hey manyfl2or,

    What is your web site url?

    Best regards,
    Basilis

    #1109844

    Hello,

    I have put the link down below. You could see the problem by clicking on the the links (except the first one) in “nos magasins” part, on the homepage. It will lead you to the “nos magasins” page in the tab section that you choose with the link. Then you could see the problem with the icons that are not displayed in the icon list.

    Best regards

    #1110181

    Hi,

    Thanks for the clarification. First off, could you try updating the theme to the latest version (4.5.7) to see if that helps please? https://kriesi.at/documentation/enfold/how-to-install-enfold-theme/#theme-update. If not then please post admin login details in private so that we can have a closer look.

    Best regards,
    Rikard

    #1115348

    Hi,

    I’m not really comfortable with the idea to give my login, is there no other way for you to figure out the problem ?

    Best regards

    #1115513

    Hi,

    Actually I’ve found the problem but not the solution. It’s the ‘.avia-icon-list’ and ‘.avia-icon-list li’ that doesn’t take the ‘.avia_start_animation’ class when clicking on a link like “https://homepage.com/#tab-id-2”. Do you know why the icon list animation is not active when icon list are in tab section and when using a link external to the page ?

    Regards

    #1116333

    Hi,
    Sorry for the late reply, I tried to see the issue but I don’t see the icon list, did you replace it with a bullet list?
    I see that you are using Enfold v4.5.4, please try updating to v4.5.7

    The easiest and safest way to do this is to download the newest version from Theme Forest and rename your current theme to “enfold-old” via ftp then upload the new “enfold” and check that your site is working correctly.
    Once you are happy you can delete the “enfold-old” via ftp, (not the WP theme page)
    Should for some reason you wish to roll-back to the old version, it’s easy to do, simply rename the new “enfold” to “enfold-new” via ftp and then rename “enfold-old” to “enfold” then refresh your page.
    Please don’t try to overwrite the theme folder, as this will leave old files behind and cause errors.

    Best regards,
    Mike

    #1116737

    Hi,

    No there is still the icon list on “Nos magasins” page. Is there no automatic update of the template files ? I’m using a child theme actually.

    For the issue do you think it could comes from the iconlist.js files that is not properly loading when using an anchor from one page to another ?

    Regards

    #1116841

    Hi,
    For your version you will need to manually update, please give this a try.

    Best regards,
    Mike

    #1117145

    Hi Mike,

    I did the update but unfortunately nothing has change.. so I have switched it back on my “old”enfold one. Another possibility for my issue ?

    Regards

    #1117674

    Hi,
    Did you try disabling your plugins? What PHP version is your site using?
    Now the icons only don’t animate when linked directly, like the link in the Private Content area?
    Because that is true for me, but going to the page via the menu the icons animate.
    I don’t see any errors from your site, we could remove the animation and force the icons to show, but you want the animation, correct?
    I would recommend using the updated version because there are known bugs in your version that may show as other issues.

    Best regards,
    Mike

    #1117849

    Hi Mike,

    I have disabled the plugins and nothing helps. This is my PHP version : 7.2.18

    Yes you got it, the issue happens only when linked directly and I need the animation to display so I don’t want to delete it. I think it’s because the list-animation.js file is not load so the class that display the animation is not applied on the list items (avia_start_animation).

    Regards

    #1118415

    Hi,
    Thank you, please try updating to v4.5.7, there has been many fixes and improvements since your version.
    Does your webhost cache your site also, can this be turned off while we investigate?

    Best regards,
    Mike

    #1128375

    Hi,

    I’ve try with the last enfold version on a new website i’m developing. It’s the same theme, and even with the cache deactivated it’s still not working…

    Regards

    #1128384

    Hi,
    Ok, are you saying that on a different test site you updated the theme and disabled the plugins but you are still getting the error?
    And you don’t feel comfortable allowing us to login to investigate?
    Ok, please try copying the shortcode from the page so we can test on our localhost, to copy the shortcode, please Enable Avia Layout Builder Debug and below the Advanced Layout Builder you will find a new field that contains the page shortcode. Please copy this to a plain text file and upload it to DropBox or another file sharing service and add the link to the Private Content area.

    Best regards,
    Mike

    #1128455
    This reply has been marked as private.
    #1128487

    Hi,
    Thank you, I do not see an admin login in the Private Content area, please try again.
    If you also include FTP access I will upload the latest beta version for you.

    Best regards,
    Mike

    #1128496

    Hi Mike,

    Here it is below.

    Don’t worry about the version upload, I’ll do this on my own. I’m currently working on another project so I don’t really have the time to check that everything goes well (moreover I did try with the latest enfold version and it was still not working)

    Regards

    • This reply was modified 5 years, 4 months ago by Mike. Reason: moved password
    #1128507

    Hi,
    Thank you for the login, I have written this script for you to add to your functions.php it adds the class “avia_start_animation” to the li of the list when the page scrolls.
    You can adjust the distance to suit your needs, if you use 100 the animation will occur before you see it, and if you use the 400 that it is set in it now then you will see the animation because you are scrolling that far down. I was not sure if you want to see the animation or not.

    function custom_start_animation(){
      ?>
      <script>
    (function ($) { 
      $(window).scroll(function() {    
          var scroll = $(window).scrollTop();
          if (scroll > 400) {
              $('.avia_animate_when_almost_visible.avia-iconlist-animate li').addClass('avia_start_animation');
          } else {
             
          }
      });
     })(jQuery);
     <?php
    }
    add_action('wp_footer', 'custom_start_animation');

    Best regards,
    Mike

    #1130574

    Hi Mike,

    It’s working if adding </script> but it’s not as I would like. The code triggers all the icon in the same time and then all the icon from all the tab are displayed.. I would like the exact same animation that happens when not passing by the link. Each icon get the “avia-start-animation” with a little time lag. Moreover each time I switch tab the animation should be display again and again.

    Best regards

    #1130581

    I’ve tried to adapt this code (iconlist.js) with the one you gave me but it’s not woking..

    (function($)
    {
    “use strict”;

    // ——————————————————————————————-
    // Iconlist shortcode javascript
    // ——————————————————————————————-

    $.fn.avia_sc_iconlist = function(options)
    {
    return this.each(function()
    {
    var iconlist = $(this), elements = iconlist.find(‘>li’);

    //trigger displaying of thumbnails
    iconlist.on(‘avia_start_animation’, function()
    {
    elements.each(function(i)
    {
    var element = $(this);
    setTimeout(function(){ element.addClass(‘avia_start_animation’) }, (i * 350));
    });
    });
    });
    }

    }(jQuery));

    #1130608

    Hi,
    Please try updating your theme with the beta version in the Private Content area.
    The easiest and safest way to do this is to rename your current theme to “enfold-old” via ftp then upload the new “enfold” then refresh your page.
    Should for some reason you wish to roll-back to the old version, it’s easy to do, simply rename the new “enfold” to “enfold-new” via ftp and then rename “enfold-old” to “enfold” then refresh your page.
    Please don’t try to overwrite the theme folder, as this will leave old files behind and cause errors.

    Best regards,
    Mike

    #1134482

    Hi Mike,

    The beta didn’t change nothing. However I’m laughing a new website with the enfold theme and I’ll see if the 4.6 (last version) will work.

    Regards

    #1134735

    Hi,
    Thanks for the feedback.

    Best regards,
    Mike

    #1201617

    I have the exact same issue. If you have the iconlist in the tab layou element (2nd tab and beyond), then the animation of icons will not work unless you reload the page. In my case I would be ok to just disable the animation, but just for this instance don’t want it to be a global change for all iconlists. Is there a way to do that or force a reload of page when the tab is changed (which also would fix the problem although a bit uggly fix).

    #1202666

    Hi,

    @Terve
    please link to the page so we can see the error and investigate.

    Best regards,
    Mike

    #1203483

    Sorry, here it is https://www.aptilo.com/iot-ccs/ please go to the second tab “Explore”.

    #1203568

    Hi,
    Thanks for the link, I see your page is giving the error “jQuery is not defined” this typically means that your jQuery is loading in the footer, please check that the option Enfold Theme Options > Performance > Load jQuery in your footer is disabled. Some caching plugins also have this option so please check that these are also disabled. It also looks like you have the lazyload option enabled in the “wp-rocket”, please disable this, lazyload can lead to issues like you are experiencing.

    Best regards,
    Mike

    #1211878

    Hi Mike, thanks for spotting that JQuery error, but I don’t believe that is it.

    The problem is the same after I have:

    -Disabled all plugins
    -Purged all caches.
    -Reverted to the original Enfold Theme (we have some modifications in a Child theme).

    Behaviour:
    It seems to me like the iconlists will only animate within a tab layout element if the iconlist is within the viewport when you switch to the tab containing the iconlist. If the iconlist is outside the viewport they will freeze in the initial state, small and with high opacity. They will not animate when you scroll down so that they come into the viewport. They will then animate when they are in the viewport and the page is reloaded. Would be great if someone could test this with another site.

    Another thing I have discovered
    The tab layout element do not seem to work with dynamic elements like essential grid, it simply seem not to understand the size of the content in that case and thus the tabslider get to small to fit content. Can you confirm that this is a known issue?

    #1212101

    Hi,
    Thank you for explaining, when I check the link you posted I don’t see an icon list element in the tab, is there a different page that we should look at? I was able to reproduce this and submitted an issue to the dev team.
    It also looks like you are still getting the error “jQuery is not defined” in the dev tools console.

    Best regards,
    Mike

Viewing 30 posts - 1 through 30 (of 44 total)
  • You must be logged in to reply to this topic.