Map appearing partially in a toggle

[amir200770]

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,
Amir

[Chris]

Hi,

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:

http://mappresspro.com/mappress-faq

[amir200770]

Hi 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,
Amir

[amir200770]

Hi 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

[Chris]

Hi,

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);
});

[amir200770]

Hi,

I just tried this and some variations, and it just does not work.
It’s very frustrating!

[Chris]

Hi,

Your site is still showing the original code. How about updating it with the code I gave you, so I can take a look?

[amir200770]

Hi,

Your code is there now. But the toggle opens and closes instantly.

[Chris]

Try this, “2” is for 2-second opening:

$(“#page-slider h3.symple-toggle-trigger”).click(function(){
$(this).toggleClass(“active”).next().slideToggle(2, mapp0.resize);
});

[amir200770]

Just tried the 2 millisecond delay, but to no avail.

[Chris]

I guess the duration is in milliseconds. So try 2000.

[amir200770]

Sadly no effective difference.

[Chris]

Strange, 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.

[amir200770]

Sadly 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());
});

[Chris]

You 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);
});

[Author]

Posts