Map appearing partially in a toggle

Home Forums MapPress Support Map appearing partially in a toggle

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #13008
    amir200770
    Participant

    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

    #13009
    Chris
    Keymaster

    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

    #13013
    amir200770
    Participant

    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

    #13019
    amir200770
    Participant

    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

    #13020
    Chris
    Keymaster

    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);
    });
    #13024
    amir200770
    Participant

    Hi,

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

    #13025
    Chris
    Keymaster

    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?

    #13026
    amir200770
    Participant

    Hi,

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

    #13027
    Chris
    Keymaster

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

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

    #13028
    amir200770
    Participant

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

    #13029
    Chris
    Keymaster

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

    #13030
    amir200770
    Participant

    Sadly no effective difference.

    #13031
    Chris
    Keymaster

    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.

    #13034
    amir200770
    Participant

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

    #13038
    Chris
    Keymaster

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

Viewing 15 posts - 1 through 15 (of 16 total)
  • You must be logged in to reply to this topic.