JQuery hidden elements visible during page load

Question

I'm working on this interactive map the problem I'm having is that the whole of the unit's content is visible during page load. Is there a technique I'm missing to hide this during load time?

Answer 1

Add following css:

.counties-container{
    display:none;
}

#st-c .counties-container{
    display:block;
}

Remove foloowing part from your map.js:

//this function hides each <div class="counties-container"> and is called onload and when the user selects a region

//ONLOAD - these several lines are used to help with graceful degradation (when the user doesn't have JavaScript enabled)
hideall(); //initiate the hideall function 
jQuery('#st-c').css("display","block");

This should solve the problem

Answer 2

Hiding your elements with jQuery require the DOM elements to be fully loaded, then your jQuery code will iterate and hide the targeted elements.

This will result in the problem you are talking about, so to avoid it, initialy set the DISPLAY property of your desired controls to none;, and then play with them as you want after the full load of your page is done.

If you are trying to hide it, then after it get loaded, show it up, consider utilizing the load() method if you are fetching your data from a service or a page inside your solution, or you can also utilize the ready() method of your DOM element.

References from jQuery Official documentation for both methods:

Load http://api.jquery.com/load/

ready http://api.jquery.com/ready/

Let me know if this helped you.