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 :
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
“Do you know what your employees are blogging about?”