Skip to content

Instantly share code, notes, and snippets.

@webaware
Last active August 29, 2015 14:01
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save webaware/05b27e3a99ccb00200f5 to your computer and use it in GitHub Desktop.
Save webaware/05b27e3a99ccb00200f5 to your computer and use it in GitHub Desktop.
When you hide a Flexible Map in a tab or accordion, and then click on the tab to reveal its contents, the map doesn't know how big to draw until it is revealed. You need to give Google Maps a nudge so that it will pick up the correct size and position when you reveal it.
<?php
/*
Plugin Name: Flxmap jQuery UI Activate
Plugin URI: https://gist.github.com/webaware/05b27e3a99ccb00200f5
Description: Fix maps in jQuery UI hidden accordion and tab panels
Version: 2
Author: WebAware
Author URI: http://www.webaware.com.au/
*/
/**
* make sure jQuery is loaded
*/
add_action('wp_enqueue_scripts', function() {
wp_enqueue_script('jquery');
});
/**
* add our script to the footer
*/
add_action('wp_footer', function() {
?>
<script>
(function($) {
function mapRedraw(event, ui) {
if (ui.newPanel.length) {
$("#" + ui.newPanel[0].id + " div.flxmap-container").each(function() {
var flxmap = window[this.getAttribute("data-flxmap")];
flxmap.redrawOnce();
});
}
}
$("body").on("accordionactivate", mapRedraw).on("tabsactivate", mapRedraw);
})(jQuery);
</script>
<?php
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment