I added a code snippet to my front page with a series of drop-downs for selecting search criteria. Whenever one of the headings is clicked, the page auto-scrolls to place the heading at the top of the view, which places it behind the header. Is there a way to disable this auto-scroll behaviour?
the url is dirkvanderwal.com
Many thanks for any assistance!
Hello Dirk,
Thanks for writing in! I have checked your homepage and there is a JS error on the page.
Uncaught TypeError: jQuery(...).wpbc_timeselector is not a function
at HTMLDocument.<anonymous> (wpbc_time-selector.js?ver=8.8.1:105
This JS error could be caused by a plugin conflict, amongst other things. Please check out this troubleshooting article here and follow the instructions for the following sections (where appropriate):
Testing for Plugin Conflict
Theme Update
Child Theme
CSS/JS Customization
Increasing PHP Memory Limit
Disabling Cache
Disabling CDN
If nothing is helping, provide us access to your site so that we can check your settings. Please create a secure note with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
- Confirmation that we can access and make changes to your site
To know how to create a secure note, please check this out: How The Forum Works
Best Regards.
Thanks for taking a look @ruenel - much appreciated. I followed the steps to check for plugin conflict, and found that one of the WordPress plugins I added most recently was causing the JS error - the plugin is called Booking Calendar, current version is 8.8.1. It’s designed to present the user a simple form to request an appointment.
So this error makes sense, ‘timeselector’ is likely a function for the user to select their desired appointment time. I’ll leave the plugin disabled for the moment so you can review the other JS actions happening without the error, and send a note to the developer about the JS error.
However, even with all the plugins disabled, the original issue of the problematic auto-scroll behaviour persists. If you visit the front page, click on one of the criteria drop-downs on the right just below the header (‘quick search’), and the page auto-scrolls down to place the top of the drop-down at the top of the page, which hides it behind the menu bar. Is there a JS code snippet I could add to the page or to the site that would disable auto-scroll behaviour?
Thanks again for your expertise!
Dirk
Follow up on the specific plug-in, I found a link to this page in their FAQ regarding the ‘timeselector’ error – https://wpbookingcalendar.com/faq/loading-jquery-twice/ – which is apparently caused by two conflicting instances of jQuery being loaded, one by the plugin, and one by Pro Theme, which is causing the disagreement about that function. Any advice you may have on resolving this conflict would also be appreciated.
The code snippet I was supplied to add the ‘quick search’ bar to my front page contains a reference to an older version of jQuery.
The original source says:
<!-- jQuery is required for this search bar to function.
Any version should work fine, but it has not been tested with the 2.x branch yet -->
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
So I decided to try commenting out the <script src="https://code.jquery.com/jquery-1.12.0.min.js"> tag with a <!-- … and it did resolve the conflict when I reinstated the Booking Calendar plugin, however it completely broke the formatting for the search bar. It appears this search bar only works with the old version of jQuery.
Am I doomed?
Thanks again,
Dirk
Hello Dirk,
Please contact the creator of the Search bar. There should be an updated version of the search bar because WordPress 5.7 is using jQuery 3…5.1 already.
Best Regards.
Thanks @ruenel - I’ll contact them and see if they have an update to the new jQuery 3.
Would jQuery be the code responsible for the site’s auto-scrolling behaviour? Or would there be some way to disable auto-scrolling via JS?
Also, I’ve come to realize that the dropdown on my menu bar has stopped working somewhere along the way, I can see the shadow render around the edge of the menu when I hover over it, but the dropdown menu itself doesn’t appear. I’ve tried disabling all plugins and commenting out that reference to the old version of jQuery to see if it was a conflict causing this behaviour, but after all that, it still failed to appear.
Hello Dirk,
Yes, jQuery is needed for the most features on your site and for WordPress. It is best that you always use the version loaded by WordPress because this is also what the theme is using.
Regards.
Hmm… Right. So with this in mind, I tried again, replacing the reference to the old jQuery 1.12 in the ‘quick search’ code snippet that I was provided, with a URL pointing to the included jQuery library from Pro, [wp-includes/js/jquery/jquery.min.js?ver=3.5.1] … The search bar still works as intended, so it is able to handle the current version of jQuery. So far so good.
BUT, the same error persists with the Booking Calendar plugin, even though I should no longer have conflicting versions of jQuery.
My JS console still returns:
TypeError: jQuery( 'select[name^="rangetime"]' ).wpbc_timeselector is not a function. (In 'jQuery( 'select[name^="rangetime"]' ).wpbc_timeselector()', 'jQuery( 'select[name^="rangetime"]' ).wpbc_timeselector' is undefined)
I’d rather not ditch the functionality of this plugin, and I’m happy to have made it to the point that I apparently don’t have conflicting versions being called up, but not sure why this error is persisting.
Moreover, with the ‘quick search’ bar now running on jQuery 3.5.1, the auto-scrolling behaviour continues. And I can’t get my menu drop-downs to reappear by any means I’ve attempted.
Hi Dirk,
Thank you for writing, the custom script that is responsible for scrolling on the dropdown search area is coming from this file which is a 3rd party. Regretfully we can not provide support for any 3rd party script.
I tried to search for a quick workaround using the following functions: lockScroll();, disableScroll(), return false;, event.preventDefault(); but none work as intended. You need to consult this with the original developer of the Property Search widgets.
Thank you for understanding,
@friech Thanks for pointing me in the right direction. I wasn’t sure if the scrolling behaviour was due to part of Pro Theme’s code or if it was coming from the JS for the search widget. Appreciate the clarification, I’ll see if they can help.
Hi Dirk,
Great and let us know how it goes with them!
Thank you.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.