Show div when other div has display:block? NOT WORKING?

Question

At http://wanders.com/dealers/ we're using a WordPress plugin 'Simple Locator'. We've added a dropdown for selecting a country and filtering the posts. The filter is working, but the dropdown must be hidden until the map is visible.

How to do this in the right way with Jquery?

At this point we use this (minified):

$(".wpsl-map").is(":visible")?$(".country").show("slow"):$(".country").hide("slow");

The div .country is hiding, but isn't showing when the map has loaded.

Thanks in advance!

Answer 1

While the map is loading, the div containing the spinning loader gif has this css classes:

<div class="wpsl-results loading" style="display: block;"></div>

After the map is loaded, I believe the .loading class will be removed, thus:

<div class="wpsl-results" style="display: block;"></div>

So in your jQuery, add an event listener for the .wpsl-results.loading class.

Answer 2

Without knowing more about how your map loads, I'd say you need to initially hide your .country then show it when the map has loaded. Since you do not know how long it will take your map to show, just set a timer and periodically check the visibility of your map and show your .country when your map becomes visible.

Initially hide your .country in your stylesheet

<style>
    .country {display: none;}
</style>

Periodically check the visibility of your map

//start timer to periodically check if map has loaded
var timeoutId = setTimeout(function() {
    if($(".wpsl-map").is(":visible"))
    {
            //show the country div once the map has loaded
            $(".country").show("slow")
            //cancel timer
            clearTimeout(timeoutId);
    }
},500);