Global block + custom map (html+css+js)

Support
#1

Hello, I created an interactive map but I encounter a problem when adding the map in a “global block”.
The card works this way normally:
when passing the mouse over a sector of the map, a “tooltip” is displayed with the name of the town and the name of the town changes color in the columns.

When integrating into a global block, I add the HTML in a “text” element and then I add the css as well as the js. The worry is that the “tooltip” is displayed at the bottom of the page and I do not know if it’s due to a compatibility problem with the theme.

I provide you with a link to JSFIDDLE so that you can see what it’s supposed to look like. I also give you in the locked memo the link of the page as well as admin access, if you need it.

thank you

#2

Hi Smith,

The code that you shared is complicated and has Javascript, SVG code and CSS. I am not sure if it is a good idea to add it in a Global Block.

At the moment, I suggest that you add the code to a normal WordPress Gutenberg or Editor without the Pro editor and see if you can make it work at all.

Also, try to use the Classic Raw HTML element instead of the Text element.

Thank you.

1 Like
#3

Thank you, I tested by not using “edit with pro” on a new page and works with the block “custom html”. I suppose there is no way to use “Edit with Pro” if we use Wordpress blocks?

I also tested with the element “classic raw content” but I do not know if you were talking about that.
And if it did, unfortunately it does not work.

#4

Hey Paul,

Yes. The WordPress and Pro Content Editors are separate. You can only use one.

I see the difference between the Gutenberg and the Content Builder. This has something to do with the relative positioning of the structural elements and parts of our theme.

For instance, the custom code works out of the box in the Twenty Nineteen theme. That is because, it’s container’s position is static. The moment I set the entry content’s position to relative, the tooltip shows up at the bottom.

Regretfully, you’ll need to tweak the code. If you’re not a developer, you’ll need to hire one to make the custom code work with our theme.

Thank you for understanding.

#5

Merci à vous !
Je vais tenter de corriger ça :slight_smile:

#6

You’re always welcome!

1 Like
#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.