Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • February 18, 2021 at 5:41 pm #1282029
    Birdster

    I have an issue with the Enfold Accordion element which only happens in Chrome (on Mac, PC and Chromebook): When you click to open / close an accordion, the browser window will jump to the top of the screen (as it would with an anchor link). It doesn’t happen on any other browser or on mobile, and to make it worse doesn’t always happen in chrome, it seems like if the page has been loaded for a long time it works correctly!

    hopefully you can recreate the issue. I expect I need to edit functions.php of child theme to stop toggle-ids acting like anchors, but not sure how to do this?

    login deets provided with links to specific accordion pages.

    Thank you

    February 20, 2021 at 4:27 am #1282364
    Rikard

    Hey Birdster,

    The login details you posted are not working, please check and verify.

    Best regards,
    Rikard

    February 21, 2021 at 12:16 am #1282559
    Birdster

    Sorry, not sure what happen. I have changed the password and checked that i can login with it too, so please use this new one instead:

    Thanks,

    February 23, 2021 at 6:24 am #1282970
    Rikard

    Hi,

    Thanks for that. I checked the elements under Governance, Positive transformation and Sustainability beyond net-zero on the page in private, but I can’t see any problems using Chrome on OSX. Is there anything in particular we need to do in order to reproduce the results you are getting on your end?

    Best regards,
    Rikard

    February 23, 2021 at 11:53 am #1283042
    Birdster

    Hi Rikard,

    I have tested opening the accordion elements on various devices in chrome, and they all seem to cause the same issue. So to replicate the problem I recommend refreshing the page then keep clicking to open and close different accordions and i’m sure some ( about 75% jump on when I do this) will jump up to the top of the page.

    Below are some other recent posts on your forum which sound like the same issue, and I feel that mike’s solution to remove the ID for the toggle should work, but I believe his php code is specific to that site. I am unsure how to edit the toggle-id-# within his code to work on all accordions within my site?

    Accordion Toggle jumps over the page in Chrome

    FAQ Accordion keeps randomly jumping on page

    I can always save a screen recording if you feel it necessary?

    Thank you

    February 25, 2021 at 4:22 pm #1283703
    Ismael

    Hi,

    Thank you for the inquiry.

    We were able to reproduce the issue on Chrome Window 10, but we are not really sure what is causing it yet. We might be able to fix the issue by editing the themes\enfold\config-templatebuilder\avia-shortcodes\tabs\tabs.js file and remove this code around line 161.

    window.scrollTo(0, container.offset().top - 70);

    Disable the file compression temporarily and purge the cache afterwards.

    Best regards,
    Ismael

    February 25, 2021 at 7:14 pm #1283736
    Birdster

    Hey Ismael,

    I have removed that line, disabled the compression, emptied the cache and deactivated my cache plugin, but the accordions are still jumping about in chrome.

    Any other ideas?

    the same tabs.js file does have a comment on line 124 saying:

    //check if tab title is in viewport. if not scroll up

    is there any lines within this section I should delete as well? I have noticed that sometimes the browser does jump up much higher than other times, so it is slightly more random than always acting like an anchor tag.

    February 26, 2021 at 3:21 pm #1283865
    Ismael

    Hi,

    Thank you for the update.

    Ah yes, there is a line there that could cause the page to scroll after opening the content. Please try to remove or comment out this line.

    
if(win.scrollTop() > el_offset)
{
    $('html:not(:animated),body:not(:animated)').scrollTop(scoll_target);
}

    Best regards,
    Ismael

    February 26, 2021 at 4:45 pm #1283893
    Birdster

    thanks again, but unfortunately still jumping about!

    below is some text from another post on the forum, which i have implemented, and i think it may be working, however the code only works on one specific toogle-id. How do i edit the code to apply to all toggle-ids on the page?

    The only solution I could think of is to remove the ID for the toggle, which matches the “fake ID” in the address bar. Since you are not linking to it directly it should not be an issue.
    So as a test I added this to your functions.php

    function custom_script(){
  ?>
  <script>
 jQuery(window).load(function(){
  jQuery('.single_toggle p[data-fake-id="#toggle-id-5"] + .toggle_wrap').removeAttr('id');
  });
  </script>
<?php
}
add_action('wp_footer', 'custom_script');

    this removes the ID from the one button…

    March 1, 2021 at 1:08 pm #1284410
    Ismael

    Hi,

    Try to use this script instead to remove the ID attribute of every toggle_wrap container.

    function ava_custom_script(){
  ?>
  <script>
   (function($) {
       $(document).ready(function(){
         $('.single_toggle .toggle_wrap').removeAttr('id');
       });
  })(jQuery);
  </script>
<?php
}
add_action('wp_footer', 'ava_custom_script');

    Best regards,
    Ismael

    March 1, 2021 at 2:18 pm #1284423
    Birdster

    Thanks Ismael, That seems to have fixed it.

    Much appreciated,

    March 1, 2021 at 3:30 pm #1284446
    Jordan Shannon

    Hi,

    I’m glad this was resolved. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Accordion Jumping like an anchor tag in chrome’ is closed to new replies.