Tagged: , ,

Viewing 19 posts - 1 through 19 (of 19 total)
  • Author
    Posts
  • #1244039

    Hi guys,

    I have a couple of accordion elements in my website. Sometimes when you click them, they open normally. Good user experience.
    Other times I click them and one works, but the next one makes you jump to the top of the page or somewhere in between. And then without doing anything, the next day everything works fine..for a while and then it starts again.

    It is driving me crazy. Mike thought that the Moosend tracking plugin could’ve something to do with it, so I contacted Moosend support. They’ve checked and can’t find anything wrong, so I’m back to where I started.

    A workaround solution is to empty the cache a couple of times and turn the Moosend plugin (paid subscription) off and on. That works for a little while, but after a couple of hours or day(s) the accordion jumps around again.

    Question: Can you please help me fix this for once and for all? Or maybe you can find out what happens, maybe it’s something else?

    Sincerely,
    Morticka

    ps: Video displaying the problem in private content

    <EDIT> I checked my staging site where the Moosend plugin is NOT installed and there the accordion jumps around as well. And also randomly. On mobile it jumps to the top, on desktop it jumps as well. So, that would suggest that the Moosend plugin is not the cause, right?

    • This topic was modified 3 years, 7 months ago by Morticka. Reason: Tested on staging site as well
    #1244933

    Hey Morticka,

    Thank you for the inquiry.

    We couldn’t reproduce the issue on Firefox Windows 10. As expected, the accordion items just open up when clicked. Where did you test it?

    Screenshot: https://imgur.com/gwcHCmk

    Best regards,
    Ismael

    #1244944

    Hi Ismael,

    Yes I know, it does it randomly. That’s why I showed you the video. It’s making me banana’s :).

    I tested it in Google Chrome.

    How do I solve this?

    Sincerely,
    Morticka

    #1245597

    Hi,

    We still could not reproduce the issue on our end. It does jump a bit but not to the bottom of the page, and only to focus the toggle or accordion content. We did the test on Chrome Windows 10.

    Thank you for your patience.

    Best regards,
    Ismael

    #1246739

    Hello,

    I don’t understand your response. The problem still exists, you can see it with your own eyes when you go to my website. Can someone help me??

    There has to be a cause for this, or maybe a different fix? I saw Mike with a solution a while ago for someone else with the same problem. including support not being able to replicate the problem?

    HELP PLEASE?

    Sincerely,
    Morticka

    #1246863

    I have multiple toggles in different color sections on a landing page. I too am experiencing random jumping around the page when user toggles content. It seems to happen more in Chrome.

    #1247237

    Hi,

    @Morticka
    sorry for the late reply, thanks for the video, is that Safari on a mobile device?
    So I tested on a Android (Chrome) and couldn’t reproduce, nor with Chrome on Windows 10, I did see a slight movement on Firefox on Windows 10, but when I open the dev tools it stops so I can’t see what is going on.
    On Edge, the jumping is more, and on Safari on a Mac it is also more.
    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 “Meer weten?” in the video.
    After clearing the browser cache the movement seems to have stopped for this one toggle, please clear your browser cache and check.
    If you also find this working then we could apply it to some of your other toggles.

    Best regards,
    Mike

    #1247314

    Hi Mike,

    Thank you so much! :D

    <EDIT> No, it was Chrome on iPhone.

    Question: What do you mean by, removing the id? Because I still see it in the url?

    Since it happens randomly, of course everything works perfect now, including the accordions without the fix.

    I’ll wait until the jumping starts up again and I’ll test and get back to you :)

    Again Mike, thank you very much for your response.

    Sincerely,
    Morticka

    #1247327

    Hi,
    Chrome on iPhone, I see, unfortunately, I don’t have an iPhone to test with, but will the devices I did test with, my thought is that the “toggle_wrap” div has the ID (for example) “#toggle-id-5” which is the same as the ID in the address bar, which in this case should not used as an anchor link to the div when we are opening it or closing it, (the toggle that is).
    So you will still see the ID in the address bar, we are not trying to remove it, it’s the “anchor” ID for the “toggle_wrap” that the script removes.
    I hope I explained this well. So with this test, the “Meer weten?” toggle stopped moving, while the toggles under “Waar lopen ondernemers zoal tegenaan?” randomly still move some.
    So please test this further, and let us know if you want to try this on another toggle.
    Please ensure that your iPhone cache is clear when you test.

    Best regards,
    Mike

    #1249894

    Hi Mike,

    My apologies for the late response, I have been waiting for the accordion to act up again. I have not checked every day, but right now everything is working fine.

    As soon as the jumping begins, I’ll let you know.

    Sincerely,
    Morticka

    #1250020

    Hi,
    Glad to hear that it has not been acting up, so far, we will leave this open for further feedback.

    Best regards,
    Mike

    #1301939

    hi there,

    i just wanna know if there are any news from the dev-team. i still have the problem with accordion and chrome.

    i read all postings in this forum and tried every code-snipped i found in my child function.php with no success.

    its still only in chrome, when i am click on a page, scroll down, use the first time the accordion, the tab title move to the top.

    after using it one time. it worked like it should.

    #1302286

    Hi,


    @volmering
    : Would you mind providing a link to the page with the accordion element? We check the toggles and accordion demo on Chrome but we are not able to reproduce the issue.

    // https://kriesi.at/themes/enfold/shortcodes/toggles-accordions/#toggle-id-3

    Best regards,
    Ismael

    #1302287

    hey ismael, its the same postlink :-)

    #1302789

    Hi,

    Thank you for the info.

    Try to modify the enfold-dev\config-templatebuilder\avia-shortcodes\toggles\toggles.js, look for the scroll_to_viewport functio around line 48.

    function scroll_to_viewport()
    				{
    				    //check if toggle title is in viewport. if not scroll up
    				    var el_offset = content.offset().top,
    				        scoll_target = el_offset - 50 - parseInt($('html').css('margin-top'),10);
    
    				    if(win.scrollTop() > el_offset)
    				    {
    				        $('html:not(:animated),body:not(:animated)').animate({scrollTop: scoll_target},200);
    				    }
    				}
    
    

    Replace it with:

    function scroll_to_viewport()
    				{
    				   return false.
    				}
    
    

    That should disable the scroll whenever the toggle title is not in viewport.

    Best regards,
    Ismael

    #1303118

    hey ismael, i tried it. did not help. i tried it on serveral of my enfold-websites and an accordion. no success.

    well. its only on chrome, when you click the accordion the first time.

    update:
    now it works like it should. mabe a chache prob.

    it would be great when this solution is safe for updates (function.php in my child) or mabe it will be part of a coming update

    thanks for your help

    #1303948

    Hi,

    We are not receiving a lot of reports about this issue, so this just might be unique in your site, how it was setup or because of the combination of elements, plugin or scripts. Please keep the modifications for now.

    If you want to move it to the child theme, you can dequeue the original script, copy the script file in your child theme directory and register it back with the new path.

    // https://developer.wordpress.org/reference/functions/wp_dequeue_script/
    // https://developer.wordpress.org/reference/functions/wp_register_script/

    Best regards,
    Ismael

    #1313182

    Hi Team,

    I have implemented the suggested solutions on this page and on this one:
    https://kriesi.at/support/topic/accordion-jumping-like-an-anchor-tag-in-chrome/

    But the accordion still jumping to the top of the screen. Unusable on mobile devices.
    I have also updated to the latest version of Enfold but still not working.

    Any suggestions?

    #1313767

    Hi,

    You may need to do the changes that we suggested above to prevent the accordeon element from scrolling.

    // https://kriesi.at/support/topic/faq-accordion-keeps-randomly-jumping-on-page/#post-1302789

    If you need more assistance, please feel free to open another thread.

    Best regards,
    Ismael

Viewing 19 posts - 1 through 19 (of 19 total)
  • The topic ‘FAQ Accordion keeps randomly jumping on page’ is closed to new replies.