As you can see here the google map in the first jQuery ui tab loads correctly but the same map in second / third etc tabs does not load properly or loads off centre.
As mentioned here the problem is that "Any component that requires some dimensional computation for its initialization won't work in a hidden tab, because the tab panel itself is hidden via display: none so that any elements inside won't report their actual width and height (0 in most browsers)."
I have read for example here that the problem is that the map loads after the jQuery UI tabs and so I need a jQuery snippet in my (Drupal 7) theme's behaviors.js to to make the map load before the jQuery UI tabs.
(Please note that the alternative solution of applying CSS to .ui-tabs .ui-tabs-hide will not work for me because it causes problems elsewhere.)
Can anyone please tell me the code I need for my-theme.behaviors.js ?
my template.php =
<?php
function whitecross_160614_preprocess_html(&$variables){
// some comment here
drupal_add_library('system', 'ui.tabs');
drupal_add_js('jQuery(document).ready(function(){
jQuery("#tabs-x, #tabs-y").tabs({event: "click"});
jQuery("#tabs-x, #tabs-y").tabs().addClass("ui-tabs-vertical ui-helper-clearfix");
jQuery("#tabs-x li, #tabs-y li").removeClass("ui-corner-top").addClass("ui-corner-left");
});',
'inline');
}
HTML =
<div id="jqueryui-tabs-wrapper">
<div id="tabs-x">
<div id="tab-list">
<ul>
<li><a href="#tabs-1">Map 1</a></li>
<li><a href="#tabs-2">Map 2</a></li>
<li><a href="#tabs-3">Map 3</a></li>
</ul>
</div> <!--end tab list-->
<div id="tab-content">
<div id="tabs-1">
<iframe src="<a href="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d2483.645966939501!2d-0.14189000000000002!3d51.501364!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xa26abf514d902a7!2sBuckingham+Palace!5e0!3m2!1sen!2suk!4v1403805298071"">https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d2483.645966939501!2...</a> width="800" height="600" frameborder="0" style="border:0"></iframe>
</div> <!--end tab 1-->
<div id="tabs-2">
<iframe src="<a href="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d2483.645966939501!2d-0.14189000000000002!3d51.501364!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xa26abf514d902a7!2sBuckingham+Palace!5e0!3m2!1sen!2suk!4v1403805298071"">https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d2483.645966939501!2...</a> width="800" height="600" frameborder="0" style="border:0"></iframe>
</div> <!--end tab 2-->
<div id="tabs-3">
<iframe src="<a href="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d2483.645966939501!2d-0.14189000000000002!3d51.501364!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xa26abf514d902a7!2sBuckingham+Palace!5e0!3m2!1sen!2suk!4v1403805298071"">https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d2483.645966939501!2...</a> width="800" height="600" frameborder="0" style="border:0"></iframe>
</div> <!--end tab 3-->
</div> <!--end tab-content -->
</div> <!--end div tabs-x-->
</div> <!--end jqueryui-tabs-wrapper-->