Last active
August 29, 2015 14:01
-
-
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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