-
Posts
-
Dear Enfold Support
I’m currently redesigning the website of a vacation home and run into the following issue.
On the page “Preise” (link see in private content) I have an accordion with 5 toggle elements. In the open second toggle “Weekends” I deeplink via the expression “Einzelübernachtungen” to the third toggle. As you click on that deeplink the second toggle closes and the third opens as expected but the page scrolls way too far. Actually, I expect, that the page starts at the beginning of the open third toggle. I have tested on the latest browsers (Windows: Firefox, Chrome / Android: Chrome, Firefox / iPadOS: Safari) and that scrolling issue persist on all of them.
Can you provide a solution to that misbehavior?
Kind regards
UeliHey Ueli,
Thank you for the inquiry.
We are not yet sure why it scrolls like that but we might be able to fix it by adjusting the enfold/config-templatebuilder/avia-shortcodes/toggles/toggles.js file. Around line 152, look for the following code and remove it.
window.scrollTo(0, container.offset().top - 70);You may have to toggle or temporarily disable the Enfold > Performance > File Compression settings after adjusting the script.
Best regards,
IsmaelHi Ismael
Sorry for my late response.
I followed your suggestions but nothing has changed. The issue still exists.
Any other idea?
Kind regards
UeliHi,
Thank you for the update.
Did you toggle the Performance > File Compression settings after adjusting the file? Please post the login details in the private field so that we could test it.
Best regards,
IsmaelHi Ismael
Yes, I did toggle the File Compression settings.
See login in Private Content.
Kind regards
UeliHi,
Thank you for the info.
We edited the content of the Weekends toggle and added the class name “no-scroll” to the anchor links. This prevents the smooth scrolling from activating when the links inside the toggle is clicked.
This is the updated html.
<strong><a href="https://rd20.site.ch/preise/#toggle-id-3" rel="noopener" class="no-scroll">Einzelübernachtungen</a> </strong>Best regards,
IsmaelHi Ismael
The added class name “no-scroll” seems to work. Can you tell me where the CSS properties of “no-scroll” are defined (CSS file, JS file)? I couldn’t figure it out with the webbrowser’s developer tools. Did you add this class just in my case or is it already part of Enfold? Will it stay when I update Enfold?
Your first suggestion was to change the JS file enfold/config-templatebuilder/avia-shortcodes/toggles/toggles.js. Is that change still necessary or shall I go back to the original JS file?
Nevertheless, I am not completely satisfied yet with the toggles behavior. For example, if I open the first toggle and scroll down to the second toggle and open it, the first toggle closes but the content of the second toggle is not visible from the beginning (including toggle title). This becomes even worse with going from toggle to toggle and especially on small screens (e.g. smartphones). If I click on a toggle’s title I expect to see its content right from the beginning and including the title.
One possibility would be to change the toggle’s mode from “one toggle open at a time” to “multiple open toggles possible”. But I want to work it with the “one toggle open at a time” mode.
Have you any suggestion of changing this user-unfriendly behavior?
Kind regards
UeliHi,
Your first suggestion was to change the JS file enfold/config-templatebuilder/avia-shortcodes/toggles/toggles.js. Is that change still necessary or shall I go back to the original JS file?
You can now revert the modifications in the toggle.js file. The “no-scroll” class name was added directly in the toggle content as we mentioned above. Unfortunately, you may need to hire a freelance developer if you need to adjust or extend the default behavior of the toggle.
Best regards,
IsmaelHi Ismael
I’m a little bit disappointed that you suggest hiring a freelancer in that case. Don’t you agree that my above mentioned toggle’s behavior isn’t user-friendly? At kriesi.at, isn’t it your claim to build the most user-friendly WordPress Theme and to respond to customer requests? I can understand that you can’t change that in a minute but can you consider at least to perfect the toggle’s behavior in a future update? I really think that there is a need to improve that.
Kind regards
UeliHi,
The toggle behaves fine on our installation. The document should scroll to the top of the toggler when it is not visible in the viewport.
Did you revert the changes in toggle.js file? It may not be working on your installation because we previously suggested to remove the following line, which ensures that the active toggler is visible in the viewport.
window.scrollTo(0, container.offset().top - 70);Best regards,
IsmaelHi Ismael
After updating Enfold to version 4.8.6.5 the toggle‘s behavior is almost as I expect 🙂. Nevertheless, there is still a little problem with sticky headers on bigger screens. The document scrolls to the top of the toggler but the toggler is covered by the sticky header. On small screens everything is as expected because the header isn’t sticky. Is there a solution for that issue?
Kind regards
UeliI would also like to come back to the topic with the „no-scroll“ class because you probably misunderstood my question. I understand where you have placed this class but I want to know, where the CSS properties of “no-scroll” are defined. Are they defined in a CSS file or in a JavaScript file? How does the webbrowser know how to interpret the no-scroll class?
Kind regards
UeliHi,
but I want to know, where the CSS properties of “no-scroll” are defined.
It is in the themes/enfold/js/avia.js around line 800 within the avia_smoothscroll function.
if( newHash != '' && newHash != '#' && newHash != '#prev' && newHash != '#next' && !clicked.is('.comment-reply-link, #cancel-comment-reply-link, .no-scroll'))The logic above prevents scrolling or prevent the avia_smoothscroll function from executing when the clicked element or the current target contains any of the following class names
.comment-reply-link, #cancel-comment-reply-link, .no-scrollBest regards,
IsmaelHi Ismael
Thanks for specifying the “no-scroll” functionality.
Can you also reply to my first post from October 15 please.After updating Enfold to version 4.8.6.5 the toggle‘s behavior is almost as I expect 🙂. Nevertheless, there is still a little problem with sticky headers on bigger screens. The document scrolls to the top of the toggler but the toggler is covered by the sticky header. On small screens everything is as expected because the header isn’t sticky. Is there a solution for that issue?
Kind regards
UeliHi,
Try to use this code in the functions.php file to adjust the scroll offset on desktop view.
function avf_header_setting_filter_mod($header) { if(!wp_is_mobile()) { $header['header_scroll_offset'] = $header['header_scroll_offset'] - 100; } return $header; } add_filter('avf_header_setting_filter', 'avf_header_setting_filter_mod', 9999, 1);Please make sure to purge the cache before attempting to check the page again.
Best regards,
IsmaelHi Ismael
I put your Code into my Child Theme’s functions.php an purged the cache but it hasn’t any effect.
Kind regards
UeliHi,
Sorry for the late reply, as I understand your question is for the desktop view, when I check the newly opened toggle stays in view for mobile and desktop, please see the animated gif below (you may have to click to play)Best regards,
MikeHi Mike
The issue you mention was already solved by Ismael’s post from September 23, 2021 at 12:36 pm (https://kriesi.at/support/topic/accordion-toggles-deeplinking/#post-1322006).Within this same topic I mentioned another issue on October 15, 2021 at 12:20 am (https://kriesi.at/support/topic/accordion-toggles-deeplinking/#post-1325012).
There is still a little problem with sticky headers on bigger screens. The document scrolls to the top of the toggler but the toggler is covered by the sticky header. On small screens everything is as expected because the header isn’t sticky. Is there a solution for that issue?
I made a short screen video (see link in private content) that shows what I mean.
Ismael provided a solution on November 2, 2021 at 2:27 am (https://kriesi.at/support/topic/accordion-toggles-deeplinking/#post-1327367) that has no effect so far. His code is still active in my Child Theme’s functions.php.
Is there any other solution?
Kind regards
UeliHi,
Ok, my misunderstanding try changing the offset in Ismael’s last solution from -100 to -50 or +50 I was not able to login and try this.
Best regards,
MikeHi Mike
It took me a while to test your last suggestion. Unfortunatly it has no effect. Is there any other solution?
Kind regards
UeliHi,
Please include admin login in the Private Content area so we investigate further, the previous login doesn’t work anymore.Best regards,
MikeHi Mike
See admin login in Private Content.
You will find Ismael’s code in the Child Theme’s functions.php on line 195
Kind regards
UeliHi,
Thanks, I’m not sure why this is not working, I disabled it for now and asked the rest of the team for ideas.Best regards,
MikeHi Mike
Does the team have any new ideas?
I’m close to finish the project and it would be nice if the scrolling issue was solved.
Kind regards
UeliHi,
Sorry for the confusion. The theme actually ignores the main container’s offset on mobile view, so the filter above will not work. You will also have to edit the themes/enfold/js/avia.js file as instructed in this older thread.
// https://kriesi.at/support/topic/scroll-postion-one-page-mobile/#post-1338429
Best regards,
IsmaelHi Ismael
I followed your instructions but nothing has changed. On desktop, the sticky header still covers the togglers!
Kind regards
UeliDear Enfold Support
I’m a little frustrated that there’s still no solution to my issue https://kriesi.at/support/topic/accordion-toggles-deeplinking/#post-1331474.
I just found out some special behavior that might help you to figure out the problem.
See explanations in private content.
I really appreciate if you could provide a solution as soon as possible.
Kind regards
UeliHi,
Sorry for the troubles. It seems to be working properly now. When we clicked the anchor link in one of the tabs, the document properly scrolls to the target tab. The screenshot below shows where the document lands when we clicked the Einzelübernachtungen anchor inside the Weekends tab.
Screenshot: https://1drv.ms/u/s!AjjTfXSRbKTvwELsmThZZxfbIC2o?e=DIZtv4
Thank you for your patience.
Best regards,
IsmaelHi Ismael
The confusion’s getting bigger!
Your last post refers to the first issue I’ve mentioned in this topic. This was already solved by your post from September 23 (https://kriesi.at/support/topic/accordion-toggles-deeplinking/#post-1322006).
Since weeks I’m talking about the second issue within this topic which I explained firstly on my post from October 15 and November 1 (https://kriesi.at/support/topic/accordion-toggles-deeplinking/#post-1327294). You provided then a solution with a PHP function (avf_header_setting_filter_mod), that doesn’t work so far. In my post from December 3, I specified the issue with a video, because your team member Mike got involved in this thread (https://kriesi.at/support/topic/accordion-toggles-deeplinking/#post-1331474).
On March 9, you specified your solution but it hasn’t the expected impact yet. On desktop browsers, the sticky header still covers the toggles (anchor link) of the accordion. In my last post from March 13 I’ve tried to point out that your PHP function might not be reloaded or reinitialized properly if you click from toggle to toggle within the same browser window/tab. It only seems to work properly if you copy the URL of a toggle in the address bar of a new browser window/tab. Then the toggle is at the defined scroll-offset position (according to the PHP function) below the sticky header.
I hope that it is clear now, what I mean and I really hope that there is a reliable solution very soon.
Kind regards
Ueli
- The topic ‘Accordion/Toggles deeplinking’ is closed to new replies.