How to properly disply in JQuery Tabs?

Any thoughts? Insights? Solutions?

Hi Brian
Sorry for the delay.

We make use of a plugin called “Post UI Tabs”
The plugin is designed to work with jQuery tabs and should work perfectly with that plugin.

Please confirm?

Thanks much. I’m going to give it a try today.

It doesn’t appear to be working properly.

Here’s the test page I’m working with:
https://maps.plymouthhomesource.com/sold-properties/

The first tab displays properly, but it doesn’t seem to work right but the maps on the second and third tabs don’t display right.

The only way I was able to get the maps to display property was to create a separate page with the map on it and then that page into the JQuery tab through an iframe. I’m using the WP UI plugin for the tabs. You can see the result here:

https://maps.plymouthhomesource.com/wp-ui-map-test/

Here is the code I put into the content box on that wordpress page:

[wptabs mode="horizontal"]
[wptabtitle] 2013 - All[/wptabtitle] [wptabcontent][wpgmza id="1"][/wptabcontent]
[wptabtitle] Jan 2013[/wptabtitle] [wptabcontent]<div style="overflow: hidden; width:900px; height:500px;"><iframe src="/jan-2013/#map" scrolling="no" style="width:900px; height:780px; border:0px; margin-left:-35px; margin-top:-270px; "></iframe></div>
[/wptabcontent]
[wptabtitle] Feb 2013[/wptabtitle] [wptabcontent][wpgmza id="3"][/wptabcontent]
[/wptabs]

It took a while to get the height and width positions such that only the map was showing through the iframe cutout.

I have to believe that if I had a Jan 2013, Feb 2013, Mar 2013 tab and did the same with all of them, it would be a rather slow-loading page. That’s a lot of extra header/footer/etc to load for 13 tabs. Caching or no caching.

A solution might be to create another sub-blog and strap a super-minimal theme to it that has pretty much no header/footer stuff and then put the maps on pages there and cut them through to the main map page via this iframe method.

Hi Brian
Thanks for all the info.

Please give this a bash:

Search for the following code

jQuery('body').on('tabsshow', function(event, ui) {
<?php
  foreach ($wpgmza_short_code_array as $wpgmza_cmd) {
?>
    InitMap_<?php echo $wpgmza_cmd; ?>('all');
<?php } ?>
});

and add this below it:

jQuery('body').on('click', '.ui-tabs-anchor', function() {
<?php
  foreach ($wpgmza_short_code_array as $wpgmza_cmd) {
?>
    InitMap_<?php echo $wpgmza_cmd; ?>('all');
<?php } ?>
});

That should trigger the maps to refresh as soon as the tab is clicked.

This will work for both the basic and the pro versions.

Kind regards
Nick

I’ll give it a turn. I do hope it works because the links in the info bubbles are not clickable using this iFrame workaround. Unless you set it to open in a new window.

That seems to have worked. I had to made that edit to both the code for both the Pro and Gold versions of the plugin though. It didn’t work when I only added the code to the Pro plugin and the basic plugin didn’t even have the code you told me to look for.

If you go back to the original page right now: https://maps.plymouthhomesource.com/wp-ui-map-test/

…you’ll see that all the tabs up through May are working. The fist one always worked, the second is the iFramed version, and Feb-May have their own maps. It seems that the J-Query Tab box isn’t wrapping around the map though. I’m guessing that If I put a DIV in there that this will be fixed. Will do that later.

Also, the other tabs (Jun – Dec) all have maps too…but they don’t show. They are all Map #3 and I’m guessing that you can only have the same map on the same page once and that is why there is nothing showing?

Hi,

Thank you for the tip. It seems this is a common problem on the web. The above code does seem to do the trick, but in my case another problem arises:

Almost every change done by the user to the map, like moving the map, clicking on the landmarks, etc, resets the map to its defaults.

You can see this behaviour in this link in the bottom of tab “Horário e aulas” that does not hapen in Brian case.

Do someone have any idea of what is causing this?

Sorry,

I solved the problem. I was binding the refresh to a hierarchically higher element than needed. Problem solved.

Thank you.

Thanks for clarifying Musiphilos ??

Yes Brian, you can only include the same map ID once of each page.

Kind regards
Nick