object.display = 'none'; object.display = '';

[Fyorl]

In the ajax portion of a web-app the Elemental Design team are creating, Coconut, when a form submit button is pressed, a little loading div is styled to appear in the bottom right of the screen while the request is being made. It's styled as display:none; so that it begins invisible. Normally, in javascript I'd use:[code]var load = document.getElementById('Loading').style;
load.display = ''; // Makes the div appear
load.display = 'none'; // Makes the div disappear[/code]However, for some reason display = ''; doesn't seem to be working as usual. Instead I have to use display = 'block' to get the div to appear. Which is fine until the ajax replaces one form with the next and the next form happens to be larger than the previous so the page scrolls down. Now, when the div is set to appear again, it appears not in the bottom right but halfway up the page where the previous bottom right was. If I could use display = ''; I'm fairly sure it would fix this problem. Does anyone have any thoughts on the matter?

[nogray]

the display = ''; should work, but sometimes it doesn't.

However, I think once the element (div) is placed in a page, it's location won't change unless you move it using javascript.

You can set a javascript to move the object to the bottom right.

BTW, I am interested in knowing how you style the div to show in the bottom right.

[Fyorl]

Well you'd have to ask our graphics designer about that but here's CSS he uses:[code]#Loading {
        z-index:12;
        color:#fff;
        background:#D31858 url(../images/loading.gif) 12px 50% no-repeat;
        padding:8px 20px 8px 40px;
        position:absolute;
        bottom:0px;
        right:0px;
        cursor:default;
        display: none; }[/code]

So are you suggesting, everytime I need to bring up the loading image, I should set it's style to bottom = '0px'; and right = '0px';?

[nogray]

Now I c why the display=''; doesn't work

display='' will set the display to the defult value defined in the #Loading (which is none), you'll need to take out the display:none from the #Loading defintion and put it in the <div> tag, like this.

[code]
<style>
#Loading {
        z-index:12;
        color:#fff;
        background:#D31858 url(../images/loading.gif) 12px 50% no-repeat;
        padding:8px 20px 8px 40px;
        position:absolute;
        bottom:0px;
        right:0px;
        cursor:default; }
</style>

<div id="Loading" style="display:none;">
    Loading
</div>

<a href="#" onClick="document.getElementById('Loading').style.display = '';">Show</a>
<a href="#" onClick="document.getElementById('Loading').style.display = 'none';">Hide</a>
[/code]

the bottom:0px; right:0px; will place the element at the bottom of the screen (not the page) so, if the page is not scrolled all the way to the bottom, the div won't be in the bottom. This could be a good thing because the user will always see the loading div ;)

[Fyorl]

Thanks for that, the div should appear in the bottom right of the screen, not the page so it should work now. I can still use display = 'block' now as well as that wasn't causing the problem of the moving div. Thanks again.