Gmail's Loading...

When you login to Gmail, you must have seen 'Loading...' appear against a red background on the top right of your browser window. Nothing special about it, I thought, until I scrolled down. I was surprised. Instead of moving up like the other elements, the 'Loading..' thing stayed there.

I was stumped. From then on, I have been searching around on the Net to determine how to do that. It turns out that this effect is due to a CSS property which we often use - position. We have used this attribute to position elements on our page by giving it the value, absolute. Ok, to get the effect of Gmail's 'Loading..', use fixed instead of absolute, and hey presto!! it stays there, even if you scroll.

But there's a catch here. It works only in standards-compliant browsers, which means FF/Mozilla/Opera render it as expected, but not IE. That's a problem to which I haven't found a workaround, although you can use the onscroll event and move the element by the amount scrolled. I tried it out, but it doesn't give the effect required. There is a time delay in moving the element to the position you want, which means for that time period, you won't see the element there. After this time period, the element arrives at the position you want.

But what puzzles me is how Gmail achieved the effect in IE. If anyone knows how Gmail achieved this, leave a comment.