Animated Processing

[Fao, Sean]

I'm trying to show an animated image temporarily while the web server is
processing a long request. I attempted to use a combination of CSS
styles and JavaScript to temporarily hide or show only appropriate
portions of the page (e.g. hide the data and show an animated
"processing" image while the server is doing work), however, it's not
exactly working out the way I had hoped.

What's the best way to accomplish this task?

Thank you in advance,

 

[Flinky Wisty Pomm]

How are you making the request to the server? Is it a standard
postback, or an out-of band AJAX call?

And what exactly is the problem with the way you're doing it?

 

[Fao, Sean]

How are you making the request to the server? Is it a standard
postback, or an out-of band AJAX call?

Right now, it's a standard postback. Would it be different if it were a
callback?

And what exactly is the problem with the way you're doing it?

Basically, it's likely that it's my own lack of education in CSS. I've
had various issues trying to get it to work. One is that my styles
render completely different in IE and Firefox, so I might need to do
some kind of browser hack. However, I've never been able to
successfully create a "perfect" style for either browser, to begin with.

To continue, you need a little more background on my page:

There's a table, a processing image (usually hidden unless the server is
processing) and a footer. The problem lies in the rendering of the
footer. I'd like to create a style that places the footer just under
the last line of the table in the normal page view, and just under the
"processing" image when the server is processing a request.

One attempt placed the footer always under where the processing image
is, regardless of whether or not the processing image was visible (in
other words, potentially right in the middle of the table). Another
attempt always placed the footer just under the last line of the table
(again regardless of if the table was visible or not).

Here is a very rough draft of what I've tried (please note that all
elements are currently visible to make it easier for you to understand):

http://143.247.20.203/test
http://143.247.20.203/test/style.css

What I'd like to accomplish is to have the visible elements always
starting in the upper left-hand side of the page. The footer should
float up and down in relation to whichever element is visible (the table
or the image).

And I'm not even sure that CSS/JavaScript is the answer. There might be
something that ASP.NET has to offer that I'm simply overlooking.

Thank you again for your help,

 

[Bruce Barker]

a postback approach will not work. when the browser performs a postback, it
generally stops performing display updates on the page. generally a animated
gif will not run. you can get the gif to display, by delaying the postback
by using a windows.setTimeout() to perform the postback.

when you see animated gif on a webpage, it usually done with a polling page.
new sites may use ajax.

-- bruce (sqlwork.com)

 

[Fao, Sean]

Hi Bruce,

when you see animated gif on a webpage, it usually done with a polling page.
new sites may use ajax.

Aside from the broad picture, I don't know much about AJAX right now,
though I'm planning on learning it soon. But the term "polling page" is
new to me. Can you please explain what that is?

Thank you again for the response,