0

So I have to map an image, and I chose to use jQuery. The code works perfectly on my desktop, in the browser, code editors, etc. But whenever I try to port it to the WordPress website I'm managing (using Divi 4.6.6), it doesn't work.

I used the same code for both versions, except for the WP one using jQuery instead of the dollar sign for functions and selectors, because otherwise, WordPress won't recognize them.

UPDATE: jQuery is not noticing the events set for the "area" tags in WP, although it does locally. This is the main problem.

Here's the code in question. It's supposed to show a popup whenever the user hovers the cursor on specific parts of the image:

jQuery(document).ready(function($) {
$(document).ready(function () {
  $("#popup").hide();
  $("area").mouseleave(function(){$("#popup").hide()})
$('area').mouseenter(function(event)
{ 
$("#popup").show()
$('#popup').css("top",event.pageY)
$('#popup').css("left",event.pageX)
;})
})});
  • What happens if you don't wait a second time for $(document).ready()? – fuxia Oct 16 at 8:28
  • Nothing happens, I removed the embedding and used jQuery.() as it is, but after some debugging, I figured out the problem is WP is not noticing the "area" tags being clicked. (I'm going to edit the question with this new info) – N. Thalpy Oct 16 at 8:37
  • Which jQuery versions are you testing with? WordPress's default one is 1.12, which is reasonably old. Can you reproduce this with 1.12 on your desktop? – Rup Oct 16 at 9:57
  • I'll try. Is there any way to update it? – N. Thalpy Oct 16 at 10:56
  • Here's a question about that: Update jquery version – Rup Oct 16 at 11:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.