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.