Page 1 of 1

Can you show a symbol to say query still running?

Posted: Tue Aug 26, 2014 9:40 am
by simonmlewis
We have a page that loads up to show how many people want to be told about something.
On one page there are over 16,000 of them, and they are grouped into DIVs per product.

Trouble is, when you load the page it's churning away to build it, and because the DIVs are all floated, you have to wait for it to load before the foot of the page does the Div Clear, and looks ok.

So is there some form of PHP script that can be active, to say "loading", until query is run?

So a little animated gif at the top shows while it's running, then disappears when the query is complete...??
Or better yet, the screen darkens with a facebox sort of overlay to say "one moment while we compile the information".

Re: Can you show a symbol to say query still running?

Posted: Tue Aug 26, 2014 10:49 am
by Weirdan
You could show a spinner or overlay by default and hide it in body load event handler (this event happens (for a simple page) after the document has completely rendered).

Code: Select all

<style>
 body .spinner { display: block; }
 body .data { display: none; }
 body.loaded .spinner { display: none; }
 body.loaded .data { display: block; }
</style>
<body onload="this.classList.add('loaded');">
 <div class="spinner"/>
 <div class="data">
  // a lot of data
 </div>
</body>

Re: Can you show a symbol to say query still running?

Posted: Tue Aug 26, 2014 11:05 am
by simonmlewis
How do I build the handler tho? I don't do handlers. lol

Re: Can you show a symbol to say query still running?

Posted: Tue Aug 26, 2014 11:14 am
by Weirdan
onload="this.classList.add('loaded');"
This is simplistic example, of course, but it shows the idea.

Re: Can you show a symbol to say query still running?

Posted: Tue Aug 26, 2014 11:19 am
by simonmlewis
Sorry I mean do I need to add anything else.
Right now with that CSS in the top of the page, and the Spinner div surrounding it all, and the data div inside, it's now showing nothing at all.

Code: Select all

<style>
 body .spinner { display: block; }
 body .data { display: none; }
 body.loaded .spinner { display: none; }
 body.loaded .data { display: block; }
</style>

<body onload="this.classList.add('loaded');">
<div class="spinner">
<div class="data">

<?php
if (isset($_SESSION["loggedin"])) 
{
.....
}
echo "</div></div>";
?>