jquery hide div

Question

Hi There

I am hoping that someone can help me. I have found this jquery script to load content into a pace using ajax

$(document).ready(function(){
    //References
    var sections = $("#menu li");
    var loading = $("#loading");
    var content = $("#content");

    //Manage click events
    sections.click(function(){
        //show the loading bar
        showLoading();
        //load selected section
        switch(this.id){
            case "home":
                content.slideUp();
                content.load("/includes/content.asp", hideLoading);
                content.slideDown();
                break;
            //case "news":
            //  content.slideUp();
            //  content.load("sections.html #section_news", hideLoading);
            //  content.slideDown();
            //  break;
            case "interviews":
            content.slideUp();
            content.load("/includes/test1.asp", hideLoading);
            content.slideDown();
            break;
            case "external":
                content.slideUp();
                content.load("/includes/test.asp", hideLoading);
                content.slideDown();
                break;
            default:
                //hide loading bar if there is no selected section
                hideLoading();
                break;
        }
    });

    //show loading bar
    function showLoading(){
        loading
            .css({visibility:"visible"})
            .css({opacity:"1"})
            .css({display:"block"})
        ;
    }
    //hide loading bar
    function hideLoading(){
        loading.fadeTo(1000, 0);
    };
});

And this line of code are on the main page

    <div id="loading">
  <div align="center"><img src="/css/images/loading.gif" alt="Loading" /></div>
</div>

I need to hide the loading image when my page loads (hide the DIV ID="loading") it does not hide when the page load, and when I click on a link to load the content into my page the div is there moving my content down...

any ideas on how I can hide the div when the loading div has completed?

Thanks

Answer 1

You just need to call:

$("#loading").hide();

Call this on $(document).ready

Answer 2

$(document).ready(function(){
    //References
    var sections = $("#menu li");
    var loading = $("#loading").hide();  // Hide the loading image on page load
    var content = $("#content");

And instead of using .fadeTo() use .fadeOut() so that your loading image will be hidden at the end of the animation.

function hideLoading(){
    loading.fadeOut(1000);
};

Also, an improvement to your showLoading() might be:

function showLoading(){
    loading.show();
      // or if you want it animated
      // loading.fadeIn(200);
}

Answer 3

You may want to try the following:

$(document).ready(function(){
   $('#loading').css('display','none'); /*If you want the div to appear as if it never existed*/
   $('#loading').css('visibility','hidden'); /*If you want the div to be 'hidden' but keep the space that it occupies.*/
});