jQuery error

No its not a case of jQuery being missing (jQuery actually comes bundled with WordPress) – it is a case of some themes or optimization plugins change when jQuery is loaded (at the end of page loads) in an attempt to optimize page load times on the site.

Within your slider settings, within ‘Other Settings‘, you will see a checkbox called ‘DOMContentLoaded event‘ – tick this checkbox. This should hopefully resolve the issue as it forces the Slide Anything JavaScript to load later.

If this doesn’t do the trick, then check if you have any optimization/caching plugins installed, and any settings to ‘combine JavaScript’ should be disabled.

Yes, that did the trick. Sorry I misunderstood, and thank you!

• This reply was modified 3 years, 6 months ago by Bas T.

Oops. No, sorry, it didn’t. Although the slider is visible now, the pop up refuses to show. No optimising plugins, even with all extra CSS and plugins disabled. Just the bare standard twentytwentyone theme.

error message:

Uncaught ReferenceError: jQuery is not defined
    <anonymous> https://x.nl/theater-2/:186
theater-2:186:1
JQMIGRATE: Migrate is installed, version 3.3.2 jquery-migrate.min.js:2:709
Uncaught TypeError: f is undefined
    magnificPopup jQuery
    open_lightbox_gallery_slider_397 https://x.nl/theater-2/:202
    onclick https://x.nl/theater-2/:1

• This reply was modified 3 years, 6 months ago by Bas T.

Update
With jQuery Manager for WordPress plugin installed, loading jquery-3.5.1.min.js, the pop up works again. So I’m back at my first question?

Although your plugin works with jQuery Manager for WordPress plugin installed, I would rather not use it, as it isn’t updated for 10 months. How can I make it work without the extra plugin?

A second question:
The plugin generates empty space between the image and the counter. How can I delete it please?

Thanks for your answer.

Ok, seems like there is a plugin causing a jQuery error – which is crashing JavaScript on the front-end. Disable the jQuery Manager and then check check for jQuery errors (on the front-end) by pressing CTRL+SHIFT+J keys together to show the JavaScript console. You can get info for any red JavaScript errors (in the JS console) by hovering over the filename which can provide a clue as to what plugin is causing the JS error.

WordPress recently bundled a new version of jQuery (WP version 5.6 I think), and this has cause and issue with some plugins, which need updates to fix jQuery code which now throw an error.

Also, what’s all the “!important” CSS? It’s very difficult to debug anything like this…

No plugins except yours active:

Async method failed in safeAsyncMethod Error: Connection closed, pending request to server0.conn0.child4/domwalker24, type cancelPick failed

Request stack:
request@resource://devtools/shared/protocol/Front.js:285:14
generateRequestMethods/</frontProto[name]@resource://devtools/shared/protocol/Front/FrontClassWithSpec.js:46:19
cancelPick@resource://devtools/client/fronts/walker.js:546:18
exports.safeAsyncMethod/<@resource://devtools/shared/async-utils.js:57:25
_onInspectorFrontDestroyed@resource://devtools/client/inspector/node-picker.js:113:18
stop@resource://devtools/client/inspector/node-picker.js:176:18
_destroyToolbox@resource://devtools/client/framework/toolbox.js:3735:24
destroy@resource://devtools/client/framework/toolbox.js:3669:10
closeToolbox@resource://devtools/client/framework/toolbox.js:3645:16
onClick@resource://devtools/client/framework/components/ToolboxToolbar.js:456:26
invokeGuardedCallbackImpl@resource://devtools/client/shared/vendor/react-dom.js:74:10
invokeGuardedCallback@resource://devtools/client/shared/vendor/react-dom.js:111:29
invokeGuardedCallbackAndCatchFirstError@resource://devtools/client/shared/vendor/react-dom.js:125:25
executeDispatch@resource://devtools/client/shared/vendor/react-dom.js:346:42
executeDispatchesInOrder@resource://devtools/client/shared/vendor/react-dom.js:365:20
executeDispatchesAndRelease@resource://devtools/client/shared/vendor/react-dom.js:462:29
executeDispatchesAndReleaseTopLevel@resource://devtools/client/shared/vendor/react-dom.js:470:10
forEachAccumulated@resource://devtools/client/shared/vendor/react-dom.js:444:8
runEventsInBatch@resource://devtools/client/shared/vendor/react-dom.js:598:21
runExtractedEventsInBatch@resource://devtools/client/shared/vendor/react-dom.js:606:19
handleTopLevel@resource://devtools/client/shared/vendor/react-dom.js:4272:30
batchedUpdates$1@resource://devtools/client/shared/vendor/react-dom.js:15752:12
batchedUpdates@resource://devtools/client/shared/vendor/react-dom.js:1882:12
dispatchEvent@resource://devtools/client/shared/vendor/react-dom.js:4351:19
interactiveUpdates$1/<@resource://devtools/client/shared/vendor/react-dom.js:15803:14
unstable_runWithPriority@resource://devtools/client/shared/vendor/react.js:617:12
interactiveUpdates$1@resource://devtools/client/shared/vendor/react-dom.js:15802:12
interactiveUpdates@resource://devtools/client/shared/vendor/react-dom.js:1901:10
dispatchInteractiveEvent@resource://devtools/client/shared/vendor/react-dom.js:4328:21
baseFrontClassDestroy resource://devtools/shared/protocol/Front.js:99
destroy resource://devtools/shared/protocol/Front.js:67
destroy resource://devtools/shared/protocol/Pool.js:196
baseFrontClassDestroy resource://devtools/shared/protocol/Front.js:103
destroy resource://devtools/shared/protocol/Front.js:67
destroy resource://devtools/client/fronts/inspector.js:98
_destroyTarget resource://devtools/client/fronts/targets/target-mixin.js:638
async-utils.js:61:17
Use of nsIFile in content process is deprecated. 4 NetUtil.jsm:253:8
Content Security Policy: ‘’unsafe-inline’’ binnen script-src wordt genegeerd: ‘strict-dynamic’ opgegeven
Content Security Policy: ‘https:’ binnen script-src wordt genegeerd: ‘strict-dynamic’ opgegeven
Content Security Policy: ‘http:’ binnen script-src wordt genegeerd: ‘strict-dynamic’ opgegeven
Content Security Policy: ‘’unsafe-inline’’ binnen script-src wordt genegeerd: ‘strict-dynamic’ opgegeven
Content Security Policy: ‘https:’ binnen script-src wordt genegeerd: ‘strict-dynamic’ opgegeven
Content Security Policy: ‘http:’ binnen script-src wordt genegeerd: ‘strict-dynamic’ opgegeven
Content Security Policy: ‘’unsafe-inline’’ binnen script-src wordt genegeerd: ‘strict-dynamic’ opgegeven
Content Security Policy: ‘https:’ binnen script-src wordt genegeerd: ‘strict-dynamic’ opgegeven
Content Security Policy: ‘http:’ binnen script-src wordt genegeerd: ‘strict-dynamic’ opgegeven
Lege string doorgegeven aan getElementById(). browser-custom-element.js:377:22
Content Security Policy: ‘’unsafe-inline’’ binnen script-src wordt genegeerd: ‘strict-dynamic’ opgegeven
Content Security Policy: ‘https:’ binnen script-src wordt genegeerd: ‘strict-dynamic’ opgegeven
Content Security Policy: ‘http:’ binnen script-src wordt genegeerd: ‘strict-dynamic’ opgegeven
Use of nsIFile in content process is deprecated. NetUtil.jsm:253:8
Content Security Policy: ‘’unsafe-inline’’ binnen script-src wordt genegeerd: ‘strict-dynamic’ opgegeven
Content Security Policy: ‘https:’ binnen script-src wordt genegeerd: ‘strict-dynamic’ opgegeven
Content Security Policy: ‘http:’ binnen script-src wordt genegeerd: ‘strict-dynamic’ opgegeven
Content Security Policy: ‘’unsafe-inline’’ binnen script-src wordt genegeerd: ‘strict-dynamic’ opgegeven
Content Security Policy: ‘https:’ binnen script-src wordt genegeerd: ‘strict-dynamic’ opgegeven
Content Security Policy: ‘http:’ binnen script-src wordt genegeerd: ‘strict-dynamic’ opgegeven
Use of nsIFile in content process is deprecated. 5 NetUtil.jsm:253:8
Content Security Policy: ‘’unsafe-inline’’ binnen script-src wordt genegeerd: ‘strict-dynamic’ opgegeven
Content Security Policy: ‘https:’ binnen script-src wordt genegeerd: ‘strict-dynamic’ opgegeven
Content Security Policy: ‘http:’ binnen script-src wordt genegeerd: ‘strict-dynamic’ opgegeven
Content Security Policy: ‘’unsafe-inline’’ binnen script-src wordt genegeerd: ‘strict-dynamic’ opgegeven
Content Security Policy: ‘https:’ binnen script-src wordt genegeerd: ‘strict-dynamic’ opgegeven
Content Security Policy: ‘http:’ binnen script-src wordt genegeerd: ‘strict-dynamic’ opgegeven
Lege string doorgegeven aan getElementById(). browser-custom-element.js:377:22
Use of nsIFile in content process is deprecated. NetUtil.jsm:253:8
Use of nsIFile in content process is deprecated. 5 NetUtil.jsm:253:8
Content Security Policy: ‘’unsafe-inline’’ binnen script-src wordt genegeerd: ‘strict-dynamic’ opgegeven
Content Security Policy: ‘https:’ binnen script-src wordt genegeerd: ‘strict-dynamic’ opgegeven
Content Security Policy: ‘http:’ binnen script-src wordt genegeerd: ‘strict-dynamic’ opgegeven
Use of nsIFile in content process is deprecated. 2 NetUtil.jsm:253:8
Use of nsIFile in content process is deprecated. NetUtil.jsm:253:8
Use of nsIFile in content process is deprecated. 2 NetUtil.jsm:253:8
Use of nsIFile in content process is deprecated. NetUtil.jsm:253:8
Content Security Policy: ‘’unsafe-inline’’ binnen script-src wordt genegeerd: ‘strict-dynamic’ opgegeven
Content Security Policy: ‘https:’ binnen script-src wordt genegeerd: ‘strict-dynamic’ opgegeven
Content Security Policy: ‘http:’ binnen script-src wordt genegeerd: ‘strict-dynamic’ opgegeven
Use of nsIFile in content process is deprecated. 5 NetUtil.jsm:253:8
Content Security Policy: ‘’unsafe-inline’’ binnen script-src wordt genegeerd: ‘strict-dynamic’ opgegeven
Content Security Policy: ‘https:’ binnen script-src wordt genegeerd: ‘strict-dynamic’ opgegeven
Content Security Policy: ‘http:’ binnen script-src wordt genegeerd: ‘strict-dynamic’ opgegeven
Content Security Policy: ‘’unsafe-inline’’ binnen script-src wordt genegeerd: ‘strict-dynamic’ opgegeven
Content Security Policy: ‘https:’ binnen script-src wordt genegeerd: ‘strict-dynamic’ opgegeven
Content Security Policy: ‘http:’ binnen script-src wordt genegeerd: ‘strict-dynamic’ opgegeven
Use of nsIFile in content process is deprecated. 2 NetUtil.jsm:253:8
Content Security Policy: ‘’unsafe-inline’’ binnen script-src wordt genegeerd: ‘strict-dynamic’ opgegeven
Content Security Policy: ‘https:’ binnen script-src wordt genegeerd: ‘strict-dynamic’ opgegeven
Content Security Policy: ‘http:’ binnen script-src wordt genegeerd: ‘strict-dynamic’ opgegeven
Use of nsIFile in content process is deprecated. 4 NetUtil.jsm:253:8
Content Security Policy: ‘’unsafe-inline’’ binnen script-src wordt genegeerd: ‘strict-dynamic’ opgegeven
Content Security Policy: ‘https:’ binnen script-src wordt genegeerd: ‘strict-dynamic’ opgegeven
Content Security Policy: ‘http:’ binnen script-src wordt genegeerd: ‘strict-dynamic’ opgegeven
Content Security Policy: ‘’unsafe-inline’’ binnen script-src wordt genegeerd: ‘strict-dynamic’ opgegeven
Content Security Policy: ‘https:’ binnen script-src wordt genegeerd: ‘strict-dynamic’ opgegeven
Content Security Policy: ‘http:’ binnen script-src wordt genegeerd: ‘strict-dynamic’ opgegeven

Provide me with a link to the front-end page in question and then I’ll have a look.

Also on the SA PRO demo site (https://edgewebpages.com/), I’m running the latest version of WP, themes, plugins etc & there are no JS errors (& I’m not running jQuery Manager).

Here’s a link on a test site where I reproduced the problem:

https://slimmerkiezen.com/theater/

• This reply was modified 3 years, 6 months ago by Bas T.

Hmmm, I’m a bit stumped. I see you are running the WP 2021 theme. I tried to replicated the error by activating the 2021 theme on my EdgeWebPages.com site and I don’t get the JavaScript error.

As a test, what happens if you switch theme. You are using a child theme – what happens when you switch to the parent theme or to another theme? You have tried disabling all plugins except Slide Anything?

You should (hopefully) be able to edit your previous post to remove the site link.

(ok will touch base on this tomorrow – 3am here)

4:45 AM here.
Yes I disabled all plugins, and I run the WP 2021 theme, as I said two times before…

I switched to the standard 2021 theme on the test site. Still no slide pop up.

https://slimmerkiezen.com/theater/

After the failed test I have enabled two plugins again, just for safety. It makes no difference.
(I noticed something else that’s very strange: if I open the customizer of the theme, the slide pop up works, without changing anything. When I close the customizer, it stops working)

Please check it tomorrow.

Two questions:
1. how to fix the jquery problem that prevents the slide pop up;
2. how to delete the extra space within the slide between picture and counter.

Ok, I think I may see the issue. Could you try changing the code of line 1147 of the file:
/wp-content/plugins/slide-anything/php/slide-anything-frontend.php

// ### GENERATE JQUERY CODE FOR THE MAGNIFIC POPUP ###
if (($sa_pro_version) && ($lightbox_count > 0)) {
	$output .= "<script type='text/javascript'>\n";
	$output .= "jQuery(document).ready(function() {\n";

So change the line from:
$output .= "jQuery(document).ready(function() {\n";

To:
$output .= "document.addEventListener('DOMContentLoaded', function() {\n";

(the ‘DOMContentLoaded’ feature is coded to work on the slider setup – SA Free – and not the Magnific Popup jQuery code in PRO)
If this works then I’ll create a new patch release of the plugin with this change.

Also regarding you different height slides…
If you use IMG tags within your content, bear in mind the slider will assume the height of the tallest slide content (portrait image), and the other slides will contain blank space underneath. It is better to use background images for each slide, and not IMG tags (images inserted into the slide content) – and then you can set the height of all the slides by using the ‘Min Height‘ setting under ‘Slide Style’. You can specify an aspect ration (4:3 or 16:9) or a percentage here (e.g 100% height will give you square shaped slides with equal width & height)

• This reply was modified 3 years, 6 months ago by simonpedge.

Thank you! The code works.

The second problem is still there though.
I’ve set all slides to background on this page:

https://slimmerkiezen.com/posters-media/

Background Position top center
Background Size: contain
and in settings: Min Height to 100% (other options have the same effect)

Even with only landscape pictures, there’s a huge gap between the picture and the counter.
Also, the width is set to 610 px, which is too small, but because of all the “!important” declarations I find it very difficult to discover if the CSS is in TwentytwentyOne or in your plugins CSS. When I opened admin-user-interface.min.css I just got dazzled…

This is the first time in my life I’ve spend so much time on any plugin, and it’s also the first time in my life I bought one…

Your help is appreciated, but I’m not so satisfied with the amount of time this has taken already. It’s not like I use a very strange theme or something.
If you could help me out with the gap that would be great.

Try setting your “background size” to “cover”, and then reducing your “min height” to maybe 60-75%.

Regarding the width – have a look at this screenshot:
https://i.imgur.com/UOekMEG.png

So the “.white” container I use to wrap my sliders in…
It looks like the 2021 theme stylesheet is setting a max-width for this container using a preset CSS variable.

So you could maybe try the following CSS to fix this:

article .entry-content .white {
   max-width:100%;
}

• This reply was modified 3 years, 6 months ago by simonpedge.

That’s not working. When set to “cover” most of the picture falls outside the frame.

And the CSS is not working either. article .entry-content .white is not the right selector.
If I replace the part you made yellow:

.post-thumbnail, .entry-content .wp-audio-shortcode, .entry-content > :not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce), [class*=”inner-container”] > :not(.entry-content):not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce), .default-max-width {
max-width: 100%;

it’s just a different part of the picture that falls off.

If I set the above CSS and I set the plugin to background size = 100%, it deforms the picture. If I set it to 100% height it works on big screens, but on mobile part of the picture falls off. Width 100%, then it’s the gap again.