I'm currently facing a annoying problem with the plugin jScrollPane] (demo I'm working with : tympanus.net/Tutorials/ScrollbarVisibility ).
I have linked all the files required in the head of my HTML sheet (js & css), but it seems I've been misssing something. Even if I'm not very familiar with JS, I already have used lot of plugins, and could always manage to make them work. But this one is tough.
I want the middle part of the left sidebar to scroll, and hide the scroll bar when it's not needed. For now it doesn't scroll.
The website I'm working on is here : http://denislefevre.com/gmapstfe1.2
Can someone help me ?
You must include jQuery library before you include any other JS library.
Chrome's script debugger comes in handy
Uncaught ReferenceError: jQuery is not defined jquery.mousewheel.js:78
Uncaught ReferenceError: jQuery is not defined jquery.jscrollpane.min.js:11
Uncaught ReferenceError: jQuery is not defined scroll-startstop.events.jquery.js:3
Uncaught TypeError: Object [object Object] has no method 'jScrollPane' denislefevre.com:204
Uncaught TypeError: Cannot read property 'style' of null denislefevre.com:125
Related
I added Flatpickr to my project which has been working perfectly fine, however when checking in mobile view I get the following error when clicking on the input to open the calendar:
Uncaught DOMException: CSSStyleSheet.cssRules getter: Not allowed to access cross-origin stylesheet
I have trawled through SO and google to try and find a solution, but nothing seems to work. I have tried the solution proposed in this thread but my project is using styled-components, which means I do not have a stylesheet to import. However I tried adding the import in my styled-component, I also tried adding a stylesheet which I imported in _app.tsx.
By playing with the responsive mode, I have noticed that the error activates when the screen width drops bellow 392px. Anything bigger than that and it all works perfectly fine.
I have opted for a temporary solution whereby on mobile I display the native inputs as opposed to the Flatpickr, as this seems to offer a better user experience.
Additionally the Flatpickr doc seems to indicate that this is what they do also, so I am thinking that this error is due to that as I was hijacking the CSS in _app.js
I'm using ACF for google Maps on my WordPress website. Sometimes it works fine but mostly the map is not rendering after the page load and the console is throwing the following error:
Uncaught ReferenceError: google is not defined
at initMap ((index):616)
at HTMLDivElement.<anonymous> ((index):1178)
at Function.each (jquery.min.js?ver=3.6.0:2)
at s.fn.init.each (jquery.min.js?ver=3.6.0:2)
at HTMLDocument.<anonymous> ((index):1176)
at e (jquery.min.js?ver=3.6.0:2)
at t (jquery.min.js?ver=3.6.0:2)
If anybody got stuck with the same issue, it worked for me when I changed document.ready to window.load. In the official ACF documentation, its document.ready
"
It looks like you need to add a map key.
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
If it exists then make sure that it is in the header.
Error: Uncaught (in promise): Error: The animation trigger "angularAnimation" has failed to build due to the following errors: - The provided animation property "backface-visibility" is not a supported CSS property for animations
I'm seeing the same thing when using the material password-strength extension. There is a suggestion on how to work around this in the bug for this:
https://github.com/angular-material-extensions/password-strength/issues/337
I am getting this error:
Uncaught TypeError: wp.template is not a function on template for Algolia. It is clearly associated with the widget that calls the hits:
search.addWidget(
instantsearch.widgets.hits({
container: '#hits',
hitsPerPage: 30,
templates: {
item: wp.template('instantsearch-hit'),
empty: "We didn't find any results for the search <em>\"{{query}}\"</em>"
}
})
);
From what I already know this needs wp-util.js script to work (this is supposed to be part of WordPress and this script can be found:
/wp-includes/js/wp-util.js
More about it here:
https://codex.wordpress.org/Javascript_Reference/wp.template
It seems the issue is that the template is not loading for some reason. I tried to enqueue the script via functions.php, but after doing so apart from getting previous error I get two new errors:
Uncaught ReferenceError: _ is not defined
at wp-util.js:17
at wp-util.js:124
Did anyone had such issue and managed to resolve it already?
Thank you for your help.
Are you using Cloudflare rocket loader by any chance?
There is a bug report for the same error that is apparently caused by Cloudflare rocket loader.
The solution mentioned in that bug report is:
I applied a small workaround to prevent the js error, which was
blocking other scripts in my website, adding:
if( wp.template == null ) return;
right after the firing of the script:
jQuery(function () {
In this way, my following scripts are fired correctly, but sometimes
(let's say 1 time every 4 page loads) the autocomplete search is not
fired.
Faced same issue in my wp's admin panel. And found that "BackUpWordpress" plugin was the problem. I just deactivate it and checked page again. Error was gone.
So the solution is just deactivate additional plugins one by one and check errored page every time. This is how you can have the idea which plugin is responsible for this jquery error.
I confirmed that to deactivate plugin will not erase saved data inside that plugins. So there is no issue to deactivate plugin. Once your work complete on the page where "Uncaught TypeError: wp.template is not a function" error occurred, you can activate plugins again.
In my case I had W3 Total Cache plugin installed, and Minify option was set to Manual.
After I removed wp-underscore script from manual minify list, issue with the wp.template() Not a function was gone.
materialize.js:3503 Uncaught TypeError: $(...).find(...).css(...).velocity is not a function
(anonymous function) # materialize.js:3503
jQuery.event.dispatch # jquery.js:4665
elemData.handle # jquery.js:4333
error in console shows up when I click on card (materailize)
To solve this is used the jquery version that is located in the materialize folder
window.$ = window.jQuery = require('materialize-css/node_modules/jquery/dist/jquery.js');
require('materialize-css');
It's Becuase you may be including another version on jquery in you head tag. When you install materailize with meteor it also adds jquery as its dependency. Both versions are conflicting with each other. All you need to do is exclude that jquery script tag in your head tag.
The module materialize is incomplete.
I have created a solution for this problem, available on GitHub:
Create without webpack and velocity error : https://github.com/webpremium/angular2-materialize-cordova