Always visible loading image

Loading image
In the new version of reBlogger due to come out some time this week, I’ve realized that I need some way to position update progress image so it’s always visible. Because, depending on how many keywords user enters in reBlogger, the page may become quite long and need scrolling, so having an update progress being fixed at one position was not an option. Basically, I wanted the little “loading…” animated gif to appear in the top left corner every time there was a asynchronous postback (via update panel).

So, here is the idea: I decided I’ll combine the atlas:UpdateProgress control and AtlasControlTookit AlwaysVisibleControlExtender. So the UpdateProgress control would make sure the animated gif is displayed only when there is a partial update (via UpdatePanel) and AlwaysVisibleControlExtender would make sure that, when displayed, animated gif is visible on top of everything in the top left corner of the screen.

This is how I’ve set up the code for displaying the animated gif :

OPEN CODE IN NEW WINDOW

You’ll notice that <asp:Panel surrounds the <atlas:UpdataProgress control. This is because, it is not possible to use AlwaysVisibleControlExtender directly on <atlas:UpdateProgress control. The UpdateProgress control itself is very simple. All you do is declare the ProgressTemplate, which will be displayed whenever there is a partial update.

The AlwaysVisibleControlExtender has several properties that I’ll explain here: TargetControlID is the id of the control that we are going to extend with this extender (in our case it’s the surrounding panel “pnlLoading”), VerticalSide can be top or bottom, allowing positioning this element on top or the bottom. Now, it would be really cool if we could set this to middle, but we can’t! The HorizontalSide property sets the element left or right. The VerticalOffset and HorizontallOffset properties set the margin between the end of screen and your element vertically and horizontally.

Last property is ScrollEffectDuration. Here I’ve 0.1 seconds, the larger this number is it will take longer time for our loading element to keep up with scrolling.

The whole project you can download from reBlogger lab.


This blog is being delivered to you by
reBlogger.com
“Do you know what your employees are blogging about?”


About these ads

6 Responses to “Always visible loading image”

  1. Sliding Task Lists project (day 2) – implementing Asp.NET 2 membership provider « Coding Atlas Says:

    [...] I’ve also used the little processing image there, which I’ve explained in detail how to create in this post : Always visible loading image. [...]

  2. Useful AJAX Links | pc-aras Says:

    [...] Always visible loading image (Coding [...]

  3. Vani Says:

    Thanks for your article about always visible loading image. I think helpful.

  4. how to fix blue screen Says:

    Thanks for making the effort to explain the terminlogy to the newbies!

  5. Kalpa Pharma Says:

    Your Blog is so informative …keep up the good work !
    Thank you for the great resources!

  6. Buy Sciroxx Says:

    Last property is ScrollEffectDuration. Here I’ve 0.1 seconds, the larger this number is it will take longer time for our loading element to keep up with scrolling.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: