Simulating position:fixed in IE 6 through Javascript only.

[Tom Cole]

I've written a small javascript library to help automate Ajax requests
and the like. One of the things I want the library to do is display a
"Please wait" indicator in the upper right hand corner of the viewport
while requests are processing.

What I do is append a div element to the document body, set it's
position to fixed and set the top and right to 0. This works great in
Firefox and Opera, but not in IE.

var processing = document.createElement('div');
processing.appendChild(document.createTextNode('Processing...');
processing.style.position = 'fixed';
processing.style.top = 0;
processing.style.right = 0;
document.body.appendChild(processing);

In IE this element displays in it's normal position (at the bottom of
the page) as though it has a position: relative or position: static.

I've seen tricks using css and things like height: 100% and overflow-
yL auto, but these never seem to work when I try them
programmatically. And because I may want to distribute this, I don't
want to require that the end user go through any gyrations for ths to
work.

Any suggestions?

 

[RobG]

I've seen tricks using css and things like height: 100% and overflow-
yL auto, but these never seem to work when I try them
programmatically. And because I may want to distribute this, I don't
want to require that the end user go through any gyrations for ths to
work.

If you can make it work with in-line code, why not do that and use
javascript to change the display or visibility attribute? The element
will always be in the right place, you just make it visible when you
want.

The usual trick is to put the "Loading..." graphic or text where the
new content will be displayed, so your issue doesn't arise.