Grey out a whole page and display a loading gif?

JavaScript
1

Hello everybody,

hope you can help.

what i want to do is:

  • click a button
  • grey out all my page and show a loading gif
  • load, thru ajax, content from external source
  • turn off grey and loading gif
  • update current page content.

how can i do this?

2

This all becomes quite easy if you use a library such as jQuery.

If you want to use jQuery, then you’ll have to download it, then link to it in your document:


<head>
...
<script src="jquery.js" type="text/javascript"></script>
...
</head>

And here’s some jQuery which will do what you’re after:


$(function(){
   
    // Create overlay and append to body:
    $('<div id="overlay"/>').css({
        position: 'fixed',
        top: 0,
        left: 0,
        width: '100&#37;',
        height: $(window).height() + 'px',
        background: 'white url(img/loading.gif) no-repeat center'
    }).hide().appendTo('body');
   
    // Assign click function:
    $('#ajax-link').click(function(){
        // SHOW overlay
        $('#overlay').show();
        // Retrieve data:
        $.ajax({
            url: 'path/to/page.html',
            type: 'GET',
            success: function(data){
                // onSuccess fill #ajax-box with response data:
                $('#ajax-box').html(data);
                // HIDE the overlay:
                $('#overlay').hide();
            }
        });
        // Prevent default action of link:
        return false;
    });
   
});

In order for this to work you’ll need to have the following markup in your document:


<a href="linky.html" id="ajax-link">Linky</a>

<div id="ajax-box">
    <!-- This is where the response data will go (from Ajax) -->
</div>
3

ok thanks so much…really!

btw how can i remove the animation ?
and how can i add this “function” to all my javascript functions i have in my .js file?

thanks again!

4

I’ve edited out the animation from the above code (#2), so you can just copy that in to your document. I suggest putting it in a seperate file called ajax-stuff.jquery.js and then you can include this file along with the jQuery core (a dependency) in your document:


<head>
...
<script src="jquery.js" type="text/javascript"></script>
<script src="ajax-stuff.jquery.js" type="text/javascript"></script>
...
</head>
5

hi friends

Is the same scenario possible without the usage of jQuery?

Many thanks in advance

GK