I added a JavaScript file to this theme's functions.php file via FTP, and it's not loading specifically on mobile devices.
I wanted to make sure it wasn't the script itself, so I copied it into the page in a script tag and tested on both desktop and mobile. The code worked just fine - so something must be blocking the file itself. The js file ("custom.js" is what I called it) is uploaded to the js folder in the man theme - not the child theme. The file is being called with this line of PHP in the main themes functions.php file:
This is not a cache issue; because the script is loading, it's just not loading on all screen sizes, It has something to do do with how the theme loads by screen size - but I don't think window size. As resizing the browser window doesn't prevent the script from working. Oddly enough, the script does not load within the inspect tool no matter what size the view window is.
As for adding the code to the general settings, there's oddly not a place for script - only custom CSS. It's also been recommended I use this functions.php method as a way of increasing site speed.
Below is the javascript that's not loading. Note that when placed in the head within a script tag, it works in all cases. The script is just not delivering in all cases when applied in the functions.php file as illustrated in the first comment. So it's not the script that's the issue, it's the delivering of the .js file.
function loadDeferredIframe() {
var tryLoadIFrame = function (ID, URL) {
var iFrame = document.getElementById(ID);
if (iFrame) {
iFrame.src = URL;
}
}
tryLoadIFrame("greYoutube", "https://www.youtube.com/embed/h7_w43jJ0Ts")
tryLoadIFrame("greMapTempe", "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3330.0372197439724!2d-111.96932568528953!3d33.422273980782116!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMzPCsDI1JzIwLjIiTiAxMTHCsDU4JzAxLjciVw!5e0!3m2!1sen!2sus!4v1486774192595")
tryLoadIFrame("greMapCincinnati", "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3086.8059851441258!2d-84.4652936843564!3d39.31532112980541!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88404fb4ec94a687%3A0x915a9a0db6e53917!2sGreat+Room+Escape+Cincinnati!5e0!3m2!1sen!2sus!4v1541446663243")
tryLoadIFrame("greMapCleveland", "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2992.564362618732!2d-81.627932484311!3d41.405266202849035!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8830e442a6185089%3A0x90787a2298a6c3c2!2sGreat+Room+Escape+Cleveland!5e0!3m2!1sen!2sus!4v1541446505618")
tryLoadIFrame("greMapColumbus", "https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12214.714268930691!2d-82.9792519!3d40.0602736!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xd1a0ee0aa5fb171a!2sGreat+Room+Escape+Columbus!5e0!3m2!1sen!2sus!4v1541446346773")
tryLoadIFrame("greMapAustin", "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3443.8281848309443!2d-97.71271668471364!3d30.32740461210432!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8644ca3ced1c17f7%3A0x7bd80180add156d1!2sMind+Spark!5e0!3m2!1sen!2sus!4v1472767173729")
tryLoadIFrame("greMapDallas", "https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d13390.834398025358!2d-96.7070997!3d32.9587021!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x897c1a032f856003!2sGreat+Room+Escape+Dallas!5e0!3m2!1sen!2sus!4v1541446025561")
tryLoadIFrame("greSanAntonio", "https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d13900.967422077894!2d-98.4774668!3d29.4217269!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xfee289ea3851e800!2sGreat+Room+Escape+San+Antonio!5e0!3m2!1sen!2sus!4v1541445639522")
};
window.onload = loadDeferredIframe;
(function() {
var co=document.createElement("script");
co.type="text/javascript";
co.defer=true; co.src="https://xola.com/checkout.js";
var s=document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(co, s);
})();
I have Asynch JavaScript, Autoptimize, and W3 Total Cache installed as well. I went ahead and deactivated them for now. That's probably what was causing the minified files.
well... That at least told me what the problem was. It's W3 total cache. I deactivated it and the script delivered. Then I activated it, but also left Asynch JavaScript and Autoptimize deactivated - then it stopped working. If this is the case, is this now beyond the realm of something you can help with? Or is there a way you can recommend adding the file that will work with W3, or a setting I can change in W3 to make sure it loads?
I added a JavaScript file to this theme's functions.php file via FTP, and it's not loading specifically on mobile devices.
I wanted to make sure it wasn't the script itself, so I copied it into the page in a script tag and tested on both desktop and mobile. The code worked just fine - so something must be blocking the file itself. The js file ("custom.js" is what I called it) is uploaded to the js folder in the man theme - not the child theme. The file is being called with this line of PHP in the main themes functions.php file:
Hi AustinLovelace,
Could you try and add you custom JS in salient \ general settings - css script related - custom js code.
Cheers.
Hey Again,
Please clear your cache using this guide: https://themenectar.ticksy.com/article/6226/ and for WP Rocket use this guide : https://docs.wp-rocket.me/article/108-render-blocking-javascript-and-css-pagespeed#critical-path-css m.
Best
ThemeNectar Support Team
Hey Tahir,
This is not a cache issue; because the script is loading, it's just not loading on all screen sizes, It has something to do do with how the theme loads by screen size - but I don't think window size. As resizing the browser window doesn't prevent the script from working. Oddly enough, the script does not load within the inspect tool no matter what size the view window is.
As for adding the code to the general settings, there's oddly not a place for script - only custom CSS. It's also been recommended I use this functions.php method as a way of increasing site speed.
Below is the javascript that's not loading. Note that when placed in the head within a script tag, it works in all cases. The script is just not delivering in all cases when applied in the functions.php file as illustrated in the first comment. So it's not the script that's the issue, it's the delivering of the .js file.
Escalating it to the developer so he may add in a response.
Best
ThemeNectar Support Team
Hey Austin,
Please deactivate your Autoptimize plugin so that I can test on a mobile device to see that isolated script.
Thanks in advance
Theme,
I have deactivated the plugin
Hey,
Weirdly enough, I'm still seeing all the CSS/JS files loading the minified version (see attached)
Theme,
I have Asynch JavaScript, Autoptimize, and W3 Total Cache installed as well. I went ahead and deactivated them for now. That's probably what was causing the minified files.
Theme,
well... That at least told me what the problem was. It's W3 total cache. I deactivated it and the script delivered. Then I activated it, but also left Asynch JavaScript and Autoptimize deactivated - then it stopped working. If this is the case, is this now beyond the realm of something you can help with? Or is there a way you can recommend adding the file that will work with W3, or a setting I can change in W3 to make sure it loads?