Home › Forums › MapPress Support › Map appearing partially in a toggle
- This topic has 15 replies, 2 voices, and was last updated 9 years, 6 months ago by
amir200770.
-
AuthorPosts
-
July 15, 2013 at 1:11 pm #13008
Hi,
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 #13009Hi,
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 #13013Hi 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 #13019Hi 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 #13020Hi,
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 #13024Hi,
I just tried this and some variations, and it just does not work.
It’s very frustrating!July 17, 2013 at 12:03 pm #13025Hi,
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 #13026Hi,
Your code is there now. But the toggle opens and closes instantly.
July 17, 2013 at 12:17 pm #13027Try 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 #13028Just tried the 2 millisecond delay, but to no avail.
July 17, 2013 at 12:27 pm #13029I guess the duration is in milliseconds. So try 2000.
July 17, 2013 at 12:31 pm #13030Sadly no effective difference.
July 17, 2013 at 1:01 pm #13031Strange, 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 #13034Sadly 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 #13038You 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.