SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Oct 2007
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    how to show ajax loading gif above the page using javascript?

    how to show ajax loading gif above the page so that no widget in the page is accessible but can see the widgets and the loading gif ,above all, in the page.
    How can this be done in Javascript??

    Thanks in advance,
    Durga prasad.

  2. #2
    I Never Give Up roosevelt's Avatar
    Join Date
    May 2005
    Posts
    515
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hey,
    I assume you know how Ajax works and know the basics of javascript.

    Make a Div with the Image tag inside it, and make it hidden.

    HTML Code:
    <div id='loading' style='display: none'><img src="loading.gif" title="Loading" /></div>
    And using javascript you need track the request.

    For example.

    HTML Code:
    <script language='javascript' type='text/javascript'>
    //Before starting ajax request display the div (paste it in  the beginning of your ajax request function
    var loadingdiv = document.getElementById('loading');
    loadingdiv.style.display = "block";
    
    //execute the code below after the ajax request is complete
    var loadingdiv = document.getElementById('loading');
    loadingdiv.style.display = "none";
    </script>

  3. #3
    SitePoint Member
    Join Date
    Oct 2007
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi thanks for quick response..
    yeah thats fine for normal div.
    but i want to show the transparent div above the page .
    User will see all the widgets and contents of the page but he cant access them.
    can it be done through z-index?if it is..i dontknow much about that..please explain how to do it?

    Thanks in advance,
    Durga prasad.

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    The following page demos the technique that you're after.
    http://www.pixeldepth.net/EE/Overlay/overlay.html

    The code that you need is seen by viewing the page source.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Addict
    Join Date
    Dec 2007
    Posts
    207
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pmw57 View Post
    The following page demos the technique that you're after.
    http://www.pixeldepth.net/EE/Overlay/overlay.html

    The code that you need is seen by viewing the page source.
    Also fading in the overlay makes the effect even nicer, you can find fade in effects with some of the popular js libraries.
    mmj


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •