Home › Forums › MapPress Support › Map appearing partially in a toggle
- This topic has 15 replies, 2 voices, and was last updated 7 years, 7 months ago by
amir200770.
-
AuthorPosts
-
July 15, 2013 at 1:11 pm #13008
amir200770
ParticipantHi,
I have an issue with the map on http://202.191.63.187/~lachlrwg/.
The map appears when you click on the “Map” toggle in the top section of the page.When the page initially loads and the Map toggle is clicked, the map that loads is only partial and loads in the top left corner of the available area (100% width and 400px height). But, as soon as you resize the browser window, the map reloads and positions itself correctly occupying the entire area. If you then click the toggle Off and then On again, the map remains in its correct position and size.
If the page was to be loaded with the Map toggle already in the On state, the map appears correctly.
So in short, the issue happens only when the map is initially hidden in the Map toggle’s initial Off state.Can anyone confirm what causes this and how I can resolve it?
Thanks,
AmirJuly 15, 2013 at 2:38 pm #13009Chris
KeymasterHi,
That’s a very common problem with the maps API, please see the FAQ for some suggestions. If it’s a custom toggle, it will probably require some javascript to refresh the map:
July 15, 2013 at 8:45 pm #13013amir200770
ParticipantHi Chris,
Thank you for getting back to me.
According to your FAQ (http://mappresspro.com/mappress-faq), MapPress caters for the issue, provided one uses the jQuery UI Tabs.So I installed the plugin WP UI (http://wordpress.org/plugins/wp-ui/). Is this not correct?
However, as you can see on http://202.191.63.187/~lachlrwg/, the issue still presists. The top toggles are from WP UI.Can you shed some light please?
Thanks,
AmirJuly 16, 2013 at 7:02 pm #13019amir200770
ParticipantHi Chris,
I have found a not so elegant solution using mapp0.resize() in conjunction with the toggle’s click event. It works but the slideToggle has to run twice each time, first with duration 0 and then with an actual duration. For some reason the slideToggle has to run twice before the mapp.resize works.
I have to run something like this<script type=”text/javascript”>
jQuery(function($){
$(document).ready(function(){
$(“#page-slider h3.symple-toggle-trigger”).click(function(){
$(this).toggleClass(“active”).next().slideToggle(0);
mapp0.resize();
$(this).toggleClass(“active”).next().slideToggle(“fast”);
});
});
});
</script>If you have any suggestions, I am very interested.
Thanks for all your help.
Amir
July 17, 2013 at 5:18 am #13020Chris
KeymasterHi,
The workaround built into the plugin is for tabs. For the slider/toggle there’s no event for the plugin to watch for, so you’re doing it the right way.
For the issue with calling toggle twice, it may help to use the ‘complete’ argument for toggle(), to set the map resize *after* the animation finishes:
$(“#page-slider h3.symple-toggle-trigger”).click(function(){ $(this).toggleClass(“active”).next().slideToggle(0, 1, mapp0.resize); });
July 17, 2013 at 10:58 am #13024amir200770
ParticipantHi,
I just tried this and some variations, and it just does not work.
It’s very frustrating!July 17, 2013 at 12:03 pm #13025Chris
KeymasterHi,
Your site is still showing the original code. How about updating it with the code I gave you, so I can take a look?
July 17, 2013 at 12:06 pm #13026amir200770
ParticipantHi,
Your code is there now. But the toggle opens and closes instantly.
July 17, 2013 at 12:17 pm #13027Chris
KeymasterTry this, “2” is for 2-second opening:
$(“#page-slider h3.symple-toggle-trigger”).click(function(){
$(this).toggleClass(“active”).next().slideToggle(2, mapp0.resize);
});July 17, 2013 at 12:19 pm #13028amir200770
ParticipantJust tried the 2 millisecond delay, but to no avail.
July 17, 2013 at 12:27 pm #13029Chris
KeymasterI guess the duration is in milliseconds. So try 2000.
July 17, 2013 at 12:31 pm #13030amir200770
ParticipantSadly no effective difference.
July 17, 2013 at 1:01 pm #13031Chris
KeymasterStrange, I see the toggle taking 2 seconds and the map sizing correctly.
But then the ‘simple toggle’ code fires and closes the toggle control again immediately:
{$(document).ready(function(){$(“h3.symple-toggle-trigger”).click(function(){$(this).toggleClass(“active”).next().slideToggle(“fast”);return false;});
You should try this without using a plugin, and just call the jQuery slidToggle directly.
July 17, 2013 at 4:45 pm #13034amir200770
ParticipantSadly it still does not work.
I’m now not using any plugins / short-codes and still no go.
Please have a look and let me know if you have any suggestions.
I am calling the slideToggle directly as follows:$(“#mapp”).hide();
$(“#maptoggle”).click(function(){
$(“#mapp”).slideToggle(“fast”, mapp0.resize());
});July 18, 2013 at 4:15 am #13038Chris
KeymasterYou passed the result of the resize function to slideToggle, not the function itself. It should be:
`$(“#mapp”).hide();
$(“#maptoggle”).click(function(){
$(“#mapp”).slideToggle(“fast”, mapp0.resize);
}); -
AuthorPosts
- You must be logged in to reply to this topic.