CODEWITHSUNDEEP
jqueryajaxoverlay
asyadiqin
asyadiqin

Reputation: 1667

Jquery Page Overlay

Please bear with me as I am a newbie when it comes to JQuery and AJAX. I'll try to explain what I need in details.

I have a page with a link that redirect to another page on the same domain. What I wanted to do are as follow, in the order that I wrote it.

  1. Trigger 'Please wait while page is loading' overlay on the page when the link is clicked
  2. Retain the overlay until the fetched page is fully loaded and then remove it

I assumed that as soon as the page is fetched and loaded, the overlay from the previous page will no longer be visible/valid. But how or when do I create an overlay on the fetched page?

I know that I can use $(document).ready to remove the new overlay on the new page but I am having some difficulties in creating the overlay on the fetched page. In short, how and where do I put the JQuery code to create the overlay on the page so that its triggered before the page is fully loaded. Hope this is not too confusing.

Thanks.

Upvotes: 1

Views: 7286

Answers (2)

SeanCannon
SeanCannon

Reputation: 78046

The concept is pretty simple. Set a wrapper div which will contain all your page content, and load data into that container via AJAX. Before the AJAX request, show the overlay, when the data is updated, hide the overlay.

CSS:

#overlay {
    position:absolute; 
    width:100%;
    height:100%;
    background-color:rgba(255,255,255,0.8);
    text-align:center;
    z-index:999;
    display:none;
}
#overlay span {
    margin:200px auto 0 auto;
}

HTML:

<body>
    <div id="overlay">
        <span>Please wait while your page is loaded...
    </div>
    <div id="content">
        Page content. <a class="ajax-link" href="#!page2" rel="page2.php">Click for page 2</a>
    </div>
</body>

JQuery:

$('#ajax-link').live('click',function(event){
    event.preventDefault();
    var $this    = $(this),
        $overlay = $('#overlay');

    $.ajax({
        url: $this.attr('rel'),
        beforeSend: function(){
            $overlay.fadeIn();
            window.location.hash = $this.attr('href').replace('#','');
        },
        success: function(data){
            $('#content').fadeOut().html(data).fadeIn();
            $overlay.fadeOut();
        }
        // I'd recommend adding some error handling here as well, possibly 
        // update the overlay text with the error response and gracefully 
        // fail-over to the previous content.
    });
});

// Since we are setting a hashbang when we load new pages, let's also support someone 
// landing on one of these AJAX-loaded pages
$(function(){
    if(window.location.hash){
        if(window.location.hash.indexOf('#!') === 0){
            $.ajax({
                url: window.location.hash.replace('#!','') + '.php',
                success: function(data){
                    $('#content').fadeOut().html(data).fadeIn();
                }
            });
        }
    }
});

Upvotes: 3

jfriend00
jfriend00

Reputation: 708166

If you want an overlay on the newly fetched page to be initially visible, then you have to build that overlay into the initial HTML/CSS of the new page. You can then use javascript in $(document).ready() to remove the overlay. You have to do it this way because you cannot run javascript that manipulates the DOM in the new page until it's fully loaded. It will typically be partially or fully visible before you can run this javascript. So, if you want the initial state that shows in the new page to have the overlay, then you have to bake the overlay right into the HTML/CSS of the new page so as it comes up, that's how it displays.

Then, when it loads successfully and the DOM is fully loaded, your code in $(document).ready() will fire which will then remove the overlay.

For the original page, you can just put up an overlay as soon as the button/link is clicked. It probably won't stay visible for long as the browser clears the window to prepare for the next page load.

The only way to seamlessly have an overlay up during the entire process without ever seeing the window clear would be to not every actually load a new page URL. Instead, you'd have to fetch the new content with Ajax and use Javascript to put it into place below the overlay. This, of course, would not result in the URL in the URL bar changing, but would get you the continuous overlay behavior.

Upvotes: 2

Related Questions