SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2006
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Dimming the Screen for a Long Wait

    Hello all,

    We've been looking at the very cool screen-graying application in chapter 18 of the JavaScript book and are trying to apply it to the following situation. Here's what we'd like to have happen:

    User clicks "Next" button to go to the next page.
    The screen dims and a "Waiting" image appears in the center.
    After the database operation on the next page completes, the gray disappears and the next page shows.

    We're using ASP 3.0 and are coding to non-AJAX standards, but we can use DHTML if needed. I'm having a problem conceptualizing how control could be passed.

    If the user clicks Next and immediately goes to the next page, I could have part of the page render, call Buffer.Flush, have JavaScript create the grayed-out section and "waiting" image, and then call the long database proc. But, how would the proc alert the JavaScript when it was done?

    If the user clicks Next and stays on the same page, I'd somehow have to get the database proc going before the next page is loaded.

    Has anyone done anything similar, and if so, how?

    Thanks in advance

    Jim Stanley

  2. #2
    SitePoint Wizard bronze trophy bluedreamer's Avatar
    Join Date
    Jul 2005
    Location
    Middle England
    Posts
    3,392
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    My question is why do this?

    Users attention spans are very short nowadays and if your content doesn't start appearing after a few seconds they will leave your site. I would suggest it's much better to optimise your site to retrieve and display your pages/data as quick as possible.

    Personally speaking the first thing I want to see when I click a link is content

    Just my 2p's worth...

  3. #3
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't know how it's done in the book you are talking about - but here's a demo that might be useful.

  4. #4
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    151
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Dimmer

    Hey Mike,

    Just noticed a small error in Firefox 2.0 when using the 2nd of your two options for the dimmers (which look good!). Try using the search option, and the grey appears as required, and then it switches to the new page no problem. But now, press the back button...

    I think this happens because Firefox remembers the state of a form in its cache? You may want to use a form.reset() on page load to prevent this...or it may be some other more obscure problem.

    Dave

  5. #5
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're right, Dave.

    Hmmm, I'll have to think about that.

    Thanks!

  6. #6
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    One "minor" bug. The user will see the grey loading page if he presses the back button.

  7. #7
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It seems FF2 has taken a tip from Opera. The onload event doesn't fire when clicking the 'back' button - altho I've only done limited testing.

    Perhaps bluedreamer is right and this is a waste of time

  8. #8
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    151
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Mike,
    How about reseting the state of the page (ie removing the dimming) just before the user leaves the page using the unload (or whatever its called) event?

    That way Firefox and Opera will return to the state you want them to return to?

    Dave

  9. #9
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Firefox 1.5 actually added new events to capture when you press the back button. Information about these events and why they were implemented can bee found here.

    There is a hackish cross-browser solution for this issue though.

  10. #10
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Opera9 seems to give different results depending on whether the page is local or on the web.

    Also, O9 fires the onload event on "back" if a window.onunload listener has been assigned. If there is no onunload listener Opera reverts back to its standard 'cacheing' behavior (which it has always done - it is a feature, not a bug).

    Oh my! FF2 seems to do the same thing! If there is a window.onunload function then 'back' results in onload being called again!

    Am I correct about this? Please help me verify it.

  11. #11
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Aha! The moz page Pepe linked to does verify this! Now it would be nice to find some verification in Opera documentation.

    That moz page also informs us that this is referred to as "bfcache" (I did not know that). Since Opera was the first to implement this, I wonder if that is what they call it? Oh well - googling "bfcache" turns up some interesting pages.

  12. #12
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That is the drawback I guess, if you add a unonload the page won't be cached.

  13. #13
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For reference, this behavior is configurable in Opera (opera:config#UserPrefs|HistoryNavigationMode):

    This quote is from "neeraj_deshmukh" at the Opera forums:
    "1" is the default setting, which automatically decides whether to load the onload event JavaScript when you go back or forward in history. "2" will always check, and "3" is the setting for fast mode.

    bfcache is also configurable in Firefox: sessionhistory.max_total_viewers.

  14. #14
    SitePoint Member
    Join Date
    Apr 2008
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello,

    Yep, dimming the screen is usually not an easy task. Have struggled with it a bit a couple of times, but the solution is quite simple once you get it. I utterly recommend this book, which helps a lot in these issues and other JavaScript related stuff.

    Jason


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
  •