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)
;})
})});
Improve this question
6
  • What happens if you don't wait a second time for $(document).ready()? Commented Oct 16, 2020 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) Commented Oct 16, 2020 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? Commented Oct 16, 2020 at 9:57
  • I'll try. Is there any way to update it? Commented Oct 16, 2020 at 10:56
  • Here's a question about that: Update jquery version Commented Oct 16, 2020 at 11:03

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.