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.

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>

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>

@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

@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