Tabs & Map

G’day Laurent, can you provide a link to this on the web? I’d like to inspect the classes on elements after jQuery-UI is running.

Hi @webaware,

here it’s my element url : https://choosart.popsantiago.com/evenement/lancement-choosart/

Thank you,

Laurent

G’day Laurent,

You’re not using jQuery UI, you’re using jQuery Tools; different jQuery plugin, so different script required.

I haven’t tried this, but I reckon it should work. Please give it a try and let me know.

<script>
jQuery(function($) {

$("ul.tabs-nav .pane").has("div.flxmap-container").click(function() {
    $("div.flxmap-container", this).each(function() {
        var flxmap = window[this.getAttribute("data-flxmap")];
        flxmap.redrawOnce();
    });
});

});
</script>

Hi Webaware.

Bad news, script doesn’t fix it…

Any other idea ?

Right, you need to add a class or ID to the LI for that tab, and to the DIV containing that tab. Here’s some sample code. I’ll try to work this into the FAQ for the next release.

<script>
jQuery(function($){

$("ul.tabs-nav").tabs("> .pane");

$("ul.tabs-nav li.has-map").click(function() {
    $("div.pane.has-map div.flxmap-container").each(function() {
        var flxmap = window[this.getAttribute("data-flxmap")];
        flxmap.redrawOnce();
    });
});

});
</script>

<div class="post-tabs-ver">
<ul class="tabs-nav">
	<li class="current">Lieux de l'évènement</li>
	<li class="has-map">Carte & transports</li>
	<li class="">Autres</li>
</ul>

<div class="pane" style="display: block;">
<h4>Example</h4>
<p>Lorem ipsum dolor sit amet, consectetur...</p>
</div>

<div class="pane has-map" style="display: none;">
<p><strong>Carte :</strong><br/>
$map
</div>

<div class="pane" style="display: none;">
<p><strong>Moyens de visite : </strong>moyen_de_visite_event</p>
</div>

Hi Webaware,

That’s work ! Really thanks.

Last question not in JS (hummm i think ;-), the word itineraire (direction) is out of the tooltip marker… https://choosart.popsantiago.com/evenement/lancement-choosart/
How can i increase the 100% height ?

See you

Laurent

@laurent: actually, that means it doesn’t quite work. But this works! ??

You need to load the map only when that tab is clicked for the first time. You can do that by tricking the map into thinking it’s in AJAX mode:

// tell the map isajax='true', and grab it as a JSON-encoded string
$shortcode_address = "[flexiblemap address='". $address ."' width='100%' height='400' title='Adelaide Hills' directions='true' isajax='true']";
$map = json_encode(do_shortcode($shortcode_address));

Then change the JavaScript to load the map on the first click; the map will replace the div with id=”hidden-map”:

<script>
jQuery(function($){

$("ul.tabs-nav").tabs("> .pane");

$("ul.tabs-nav li.has-map").on("click", showMap);

function showMap() {
	$(this).off("click", showMap);
	$("#hidden-map").html(<?php echo $map; ?>);
}

});
</script>

<div class="post-tabs-ver">
<ul class="tabs-nav">
	<li class="current">Lieux de l'évènement</li>
	<li class="has-map">Carte & transports</li>
	<li class="">Autres</li>
</ul>

<div class="pane" style="display: block;">
<h4>Example</h4>
<p>Lorem ipsum dolor sit amet, consectetur...</p>
</div>

<div class="pane has-map" style="display: none;">
<p><strong>Carte :</strong><br/>
<div id="hidden-map"></div>
</div>

<div class="pane" style="display: none;">
<p><strong>Moyens de visite : </strong>moyen_de_visite_event</p>
</div>

I’m going to have to update the FAQ on this one, both for jQuery Tools tabs and for adding the map late so that the infowindow displays properly. Thanks for raising this problem!

cheers,
Ross

@popsantiago: please note, I edited the above code after I submitted it, so please use the code from this page and not from what you received by email.

cheers,
Ross

Done and Works
Thank you so much!
See you

Hello all,
can you assist me with a similar problem?

I am unable to load the map on my home page, tab, but loads find when I am on the actual page.

@xagyex: please start a new topic, and fully describe the problem with a link to the page where your map is. I’ll be glad to help you then.

cheers,
Ross