0

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-->
3
  • what about simply making the opacity of the 2nd and 3rd 0 until initialization is complete. they would still display, just not be visible.
    – Geoff
    Jun 27, 2014 at 22:30
  • @ Geoff - thanks for your reply - do you mean .ui-tabs .ui-tabs-hide {display:block; opacity:0;} - if so one problem is that the tabs will stack vertically so causing a big empty space below ie where the tabs are there but invisible.
    – Juc1
    Jun 28, 2014 at 13:04
  • opacity shouldn't affect position. and I would first try on the iframe itself.
    – Geoff
    Jun 28, 2014 at 13:48

1 Answer 1

0

Further to the comments, here is a jsfiddle of what I was talking about. This is a quick example, but should be easily adapted to your own code. I altered the dimensions on the maps to show the change

CSS:

#toolbar
{
    width:100%;
    height:20px;
    background:#000;
}

#toolbar li
{
    display:inline-block;
    min-width:100px;
    background:#fff;
    color:#000;
    border:1px solid #ffff00;
    cursor:pointer;
}

#maps
{
    position:relative;
    width:800px;
    height:600px;
    overflow:hidden;
}

#maps #tabs-1,
#maps #tabs-2,
#maps #tabs-3
{
    position:absolute;
    top:0;
    left:0;
    width:800px;
    height:600px;
}

#maps #tabs-2,
#maps #tabs-3
{
    opacity:0;
}

HTML:

    <div id="toolbar">
        <li id="toolbar_tabs1">Map 1</li>
        <li id="toolbar_tabs2">Map 2</li>
        <li id="toolbar_tabs3">Map 3</li>
    </div>

    <div id="maps">
        <div id="tabs-1">
<iframe src="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" width="800" height="600" frameborder="0" style="border:0"></iframe>
</div>  <!--end tab 1-->

<div id="tabs-2">
<iframe src="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" width="700" height="500" frameborder="0" style="border:0"></iframe>
</div> <!--end tab 2-->

<div id="tabs-3">
<iframe src="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" width="600" height="400" frameborder="0" style="border:0"></iframe>
</div> <!--end tab 3-->

</div>

JS:

jQuery('#toolbar_tabs1').click(function(){
    jQuery('#tabs-1').animate({'opacity':1}, 200);
    jQuery('#tabs-2').animate({'opacity':0}, 200);
    jQuery('#tabs-3').animate({'opacity':0}, 200);
});

jQuery('#toolbar_tabs2').click(function(){
    jQuery('#tabs-1').animate({'opacity':0}, 200);
    jQuery('#tabs-2').animate({'opacity':1}, 200);
    jQuery('#tabs-3').animate({'opacity':0}, 200);
});

jQuery('#toolbar_tabs3').click(function(){
    jQuery('#tabs-1').animate({'opacity':0}, 200);
    jQuery('#tabs-2').animate({'opacity':0}, 200);
    jQuery('#tabs-3').animate({'opacity':1}, 200);
});
2
  • @ Geoff I can see your jsfiddle works fine - thank you. I think the more standard structure of jQuery UI tabs (or the one that I am familiar with) looks like this i.imgur.com/OOBG1gi.png ie using an unordered list. Will your answer work using the unordered list format or is there some problem about using an unordered list ?
    – Juc1
    Jun 28, 2014 at 21:58
  • it should work as anything really. I chose that format because that's what first came to mind... no other reason - it should be adaptable to whatever you want to use.
    – Geoff
    Jun 28, 2014 at 22:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.