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?

Answer 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