Docs

[LORDVONAKI]

Hi guys,

2 months ago I implemented this code I the JS custom field to reload the GG maps so they could be displayed. I had fund this code in the forum. It doesn’t work anymore. Can you help please.

Code:
jQuery(function($){ $(‘.x-nav-tabs-item a’).click(function(){

var reloaded = $(this).data(‘map-reloaded’);

if( reloaded !== true) {
var iframe = $( $(this).attr(‘href’) + ‘ iframe’ ).get(0);
if ( iframe ) {
iframe.src = iframe.src;
}

$(this).data(‘map-reloaded’, true );

}

}); });

Thanks,

Lordvonaki

[Nico]

Hi There,

Thanks for writing in.

Upon checking the code, the code is correct however I am not sure if it fits to the latest version or to your current setup.

Would you mind sharing us your admin credentials so we could check you setup closer.

Don’t forget to set it as private reply.

Thanks.

[LORDVONAKI]

This reply has been marked as private.

[Rad]

Hi there,

Would you mind providing the URL that has this tab and map too?

Thanks!

[LORDVONAKI]

This reply has been marked as private.

[Rad]

Hi there,

Please add this CSS to Admin > Appearance > Customizer > Custom > CSS

.x-tab-content>.x-tab-pane:not(.active) {
    display: block;
    overflow: hidden;
    height: 0;
}

Hope this helps.

[LORDVONAKI]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thank you for the clarifications! Your JS code no longer works. Please have it updated and use this instead:

jQuery(function($){ 
  $('.x-nav-tabs-item a').click(function(){ 
    var i = $(this).data('cs-tab-toggle');
    var element = $('div[data-cs-tab-index="' + i + '"]').find('iframe');

    if ( element.length > 0 ) {
      element.attr('src', element.attr('src') );
    }

    console.log('Tab index:' + i);
    console.log('iFrame src:' + element.attr('src') );
  }); 
});

Please let us know how it goes.

[LORDVONAKI]

Hi,

So now it looks like the maps is reloading which is good. But every Ifrmae of the page tab is now loading the map…See below the map (the 2 small maps are supposed to be charts pies from google drive iframe). Also the display problem we had previously is still here.

How can I do to fix these 2 things?

Thanks,

Lordvonaki

[Rue Nel]

Hello There,

Sorry if it didn’t quite work out. We will modify the code and target the map using the class of its container. Please have the code updated and use this instead:

jQuery(function($){ 
  $('.x-nav-tabs-item a').click(function(){ 
    var i = $(this).data('cs-tab-toggle');
    var element = $('div[data-cs-tab-index="' + i + '"] .maps_holder').find('iframe');

    if ( element.length > 0 ) {
      element.attr('src', element.attr('src') );
    }

    console.log('Tab index:' + i);
    console.log('iFrame src:' + element.attr('src') );
  }); 
});

And you might need to remove the given css in our previous reply.
We would loved to know if this has work for you. Thank you.

[LORDVONAKI]

It looks like it works great without even removing the CSS!

Thank you so much , you rock!

Lordvonaki

[Prasant Rai]

You are most welcome. 🙂

[Author]

Posts