Question

we are trying to show a message inside a fancybox, on the page load event after the successful postback of a page. we are registering the script into the page using Page.RegisterClientScript method of ASP.NET.Here’s the code in the .cs file :

Page.ClientScript.RegisterStartupScript(GetType(), "Script", "ShowPopup('popup');", true);  

Here’s the javsacript function ShowPopup :

function showPopup(p) {
    ShowFancyBoxDiv("#divMessage", 50, 300);
}

But when we do this, only the first page in the view of the window is grayed-out and when scrolled down, the rest of the page is still active and ungrayed.

But when we add a timer ,as shown below, everything works fine.

$(document).ready(function () {
    setTimeout(function () {
        ShowFancyBoxDiv("#divMessage", 50, 300);
        $("#fancybox-close").css("display", "none");
    }, 1000);
});

So, could anyone explain what is going on here. The document.ready should automatically check for the document to be fully loaded, then why do we need to use that timer function??? Thanks.

Answer 1

I suspect that you may still have elements loading, like images. Ready means the DOM is ready. It does not mean everything has been loaded as you state. If you want that then use .load.

$(window).load( function() {
   //code
} );

This website has a nice article on this vs ready.

http://web.enavu.com/daily-tip/daily-tip-difference-between-document-ready-and-window-load-in-jquery/