- This topic has 5 replies, 2 voices, and was last updated 6 years, 7 months ago by Tom.
-
AuthorPosts
-
August 18, 2017 at 7:20 am #368692Christian
Dear Generatepress Support Team,
I am using Visual Composer pagebuilder Tour (=Tabs) elements all over my website https://zenhub.org
Inside those Tour elements I have a content tab (called “Location”) containing maps stemming from a plugin “MapsMarker Pro”.
On opening the respective “Location” Tab, the maps do not render completely. The map container inside the tab thinks it’s smaller than it actually is at the point the map loads, so the map will only cover that area (example page: https://zenhub.org/genealogy/catherine-genno-pages-roshi/ here the tab “Location”).
The size is checked every time the map is moved, which is why it works once you drag the map a little bit. The MapsMarker plugin developer provided the following Javascript code to fix this behaviour by manually forcing a size check by using the MapsMarker Pro JS API. The code should be added to the onclick or onload event for the tab:The MapsMarker plugin developer provided the following Javascript code to fix this behaviour by manually forcing a size check by using the MapsMarker Pro JS API. The code should be added to the onclick or onload event for the tab:
MMP.maps.toAll(function(map){
map.invalidateSize();
});The Visual Composer Support gave the following feedback on the correct function:
The onclick event for the tour can be written as:
document.ClassName(“vc_tta-tab”).onclick = function() {myFunction()};
function myFunction() {
/Put the custom code from the plugin developer here/
}This code should be added via the theme or child theme into the js file which is loaded by the theme on the page.
Thus the complete code translates into:
document.ClassName(“vc_tta-tab”).onclick = function() {myFunction()};
function myFunction() {
MMP.maps.toAll(function(map){
map.invalidateSize();
});
}I tried to add the code as
inside a normal text container, I tried the Generate Hooks – until I completely broke the site (no problem, was completely backuped) – however, I am stuck:
Can you help me out how and where to place this code snippet in order to make the maps inside the tabs container render completely?
Thank you for your consideration, Best, Chris
August 18, 2017 at 12:01 pm #368854TomLead DeveloperLead DeveloperHi there,
Try adding it inside the wp_footer hook in GP Hooks, but inside script tags:
<script> JS in here </script>
August 29, 2017 at 9:53 am #375453ChristianHi Tom,
meanwhile I added the code in the wp_footer hook as the following code snippet:
<script>
document.ClassName(“vc_tta-tab”).onclick = function() {myFunction()};
function myFunction() {
MMP.maps.toAll(function(map){
map.invalidateSize();
});
}
</script>However following all advice does not bring up a change in the incomplete rendering of the map on first opening of the tab.
So my question is: do you consider the above code snippet a valid or reasonable code snippet? At least my code editor does not find a syntax error…
Maybe you have any suggestion or advice for me to get to render the maps complete anyway?I am very grateful for your consideration,
Best,
ChrisAugust 30, 2017 at 12:11 am #375764TomLead DeveloperLead DeveloperThe actual JS looks good, however I’m not familiar enough with how the maps are built to know if it would do something or not.
Have you checked with their developers at all?
August 30, 2017 at 1:00 am #375800ChristianTom, thank you for your feedback.
Yes, I have checked – and am checking again – with the developer of the maps plugin and Visual Composer as well.
I wanted to make sure I followed your advice closely so I know the problem is not me putting the code snippet with wrong tags or in the wrong location.
This issue is kind of tricky since two plugins are involved – and the right location inside the GeneratePress theme.
Thank you for all your help – I’m so happy with GeneratePress…
Best,
ChrisAugust 30, 2017 at 10:18 am #376198TomLead DeveloperLead DeveloperNo problem at all – let me know if you need anything else from me.
Glad you’re enjoying GP 🙂
-
AuthorPosts
- You must be logged in to reply to this topic.