Move loading div down as ajax content loads

Question

The form I am creating for a mobile website shows new fields based on previous selections. i.e. - a user selects and option from a dropdown menu (a date) and then a series of times shows up based on the day selected. The times are not showing until the day is selected.

I have a spinning loading div while the times are loaded in the background via ajax. The problem I am having is that the loading div sits at the top of the page when the 'action' is taking place about three-quarters of the way down. This 'action' part is in the viewport (it's a mobile website) and the loading div is at the top of the page - which is far above the users viewport.

How can I bring the loading div down so that it's always in the current viewport? How can I make the loading div follow the place in the form where the user currently is taking into account scrollbars?

I have been trying to use the vertically centred html/CSS model as described here: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

But it is not working and the centre of the page doesn't seem to update at each event when a form element is clicked. I think I need to use the focus or blur event for the form field to update this and reassess, but I don't seem to be able to get it working.

Does anyone have any tips on how to move the loading div to the centre of the current viewport area each time the page increases in length?

score 1 · Accepted Answer · edited May 23 '17 at 12:27

1

If your loading div is designed to be inside the document flow - e.g. a new content block inside the form - it's best to use jQuery to insert the loading div inside the content itself. It will be very difficult to position it pixel-perfect otherwise.

If the loading div is to appear as an overlay to the document then you can use fixed CSS positioning with a high z-index. To center it on all screen resolutions use jQuery and the formula (window.height() - div.height())/2 as the top pixel position. The code will be similar to this answer.

Hope that helps

edited May 23 '17 at 12:27

Community

1
1

answered Dec 05 '11 at 00:08

Tak

11,428
5
29
48

it looks like fixed positioning is the way to go - thanks for the answer and the background discussion link. – timmackay Dec 05 '11 at 00:45
Thanks for your help and answer. I marked yours as right because of the mention of fixed positioning, the link to the previous thread and the formula. All the answers were extremely helpful in solving my problem. Cheers. – timmackay Dec 06 '11 at 00:01

score 1 · Answer 2 · edited May 23 '17 at 12:11

1

If you do something like this, and put the div inside your <body> tag, it will stay in the middle of the visible area.

div.loading {
position: fixed;
top: 47%;
left: 47%;
height: 6%;
width: 6%;
z-index: 1000;
}

Another solution is to put it at the end of the container content will be loading into. Just make sure to load the content before it. If you give it a margin:auto; it'll stay right in the middle and keep pushing down.

EDIT: It's also worth noting the answer here. This will prevent covering up something important in a way the user can't fix.

edited May 23 '17 at 12:11

Community

1
1

answered Dec 05 '11 at 00:14

Brigand

84,529
20
165
173

that's actually a very elegant way of ensuring the loader is at the bottom of the latest content. Again, it looks like fixed positioning is the way to go. Thanks. – timmackay Dec 05 '11 at 01:33
Thanks, your answer was really helpful, I marked the other one as right because of the link to the earlier thread and the formula but both were very helpful in solving the problem. Thanks again. – timmackay Dec 06 '11 at 00:00

score 0 · Answer 3 · answered Dec 05 '11 at 00:16

Set your loading div's position to fixed, this will of course cause it to escape from its parent in the DOM structure, you will then need to position it where you want it. Fixed positioning is relative to the visible area of the viewport.

<html>
<head>
<style type="text/css">
    #loader {
        height: 30px;
        position: fixed;
        top: 50%;
        left: 50%;
        background: #ccc;
    }
</style>
</head>
<body>
   <div id="loader">Loading...</div>
</body>
</html>

This will result in the loader div always being centered on the screen, no matter where the user has scrolled, left/right up/down.

Move loading div down as ajax content loads

3 Answers3