The WP Fastest Cache plugin comments out the jQuery and adds it back in a minified version.
You can start by deactivating the WP Fastest Cache plugin to see if that solves your issue. If it does, then you can activate it back and then play with the plugin’s settings to see which one is commenting out the jQuery library.
Thread Starter
Matt
(@matsp)
Hi Diana, and my sincere thanks for your reply 🙂
I’ve edited and now temporarily uninstalled any cache plugins but unfortunately, the problem I was having remains. Thank you for the info on why it’s commented out. I wonder if you might have any other ideas please? Many thanks, Matt P.
Thread Starter
Matt
(@matsp)
I’ve noticed when I deactivate the following custom js the layout etc returns to normal
jQuery(document).ready(function(e) {$('img[usemap]').rwdImageMaps();});
It could be that the jQuery rwdImageMaps() function isn’t defined or loaded.
Could you make sure the jquery.rwdImageMaps.min.js file is linked? Alternatively, because the jquery.rwdImageMaps.min.js file is very small, you could copy/paste the content of the jquery.rwdImageMaps.min.js file directly in the custom JS code before your code that initiates the rwdImageMaps.
Thread Starter
Matt
(@matsp)
Hi Diana, thanks for your reply 🙂
I have done as suggested and combined those files so it now reads as follows…
;(function(a){a.fn.rwdImageMaps=function(){var c=this;var b=function(){c.each(function(){if(typeof(a(this).attr("usemap"))=="undefined"){return}var e=this,d=a(e);a("<img />").load(function(){var g="width",m="height",n=d.attr(g),j=d.attr(m);if(!n||!j){var o=new Image();o.src=d.attr("src");if(!n){n=o.width}if(!j){j=o.height}}var f=d.width()/100,k=d.height()/100,i=d.attr("usemap").replace("#",""),l="coords";a('map[name="'+i+'"]').find("area").each(function(){var r=a(this);if(!r.data(l)){r.data(l,r.attr(l))}var q=r.data(l).split(","),p=new Array(q.length);for(var h=0;h<p.length;++h){if(h%2===0){p[h]=parseInt(((q[h]/n)*100)*f)}else{p[h]=parseInt(((q[h]/j)*100)*k)}}r.attr(l,p.toString())})}).attr("src",d.attr("src"))})};a(window).resize(b).trigger("resize");return this}})(jQuery);
$(document).ready(function(e) {$('img[usemap]').rwdImageMaps();});
I’ve never formatted js myself before so I hope it all looks alright? It visually has worked, the layout as it should be. I’m still having trouble with the original problem that necessitated me to add custom js; that is I was adding the image map (the coordinates are not responsive) but I’ll take that query over to the developers there now (see earlier link).
I’ve been researching plugins for image maps for some time and the only solution I’ve found that is usable and allows more than 1 map are paid, and quite expensive too. With this js/css plugin and some cheap image map software I hope to get this working!
Thank you so much for your support Diana!
Adding the rwdImageMaps function (the first row) is all right.
There is one last thing for the second row: you’ll need to change the first “$” sign with “jQuery”, as follows:
jQuery(document).ready(function($) { $('img[usemap]').rwdImageMaps();});
I know that the example on the rwdImageMaps documentation page has “$” sign, but WordPress loads the jQuery library in noConflict mode, therefore the need for the change. See this article for more details.
Thread Starter
Matt
(@matsp)
Diana, I can’t thank you enough, you’re a star! After your input, it is all working, hotspots too 🙂
Seriously a massive help, I’d probably have had to abandon the image maps without you, my sincere thanks.
