Question

I have a php website like this:

.---------------------.
|title          stats |
|                     |
|generate&display data|
|                     |
| show table of data  |
|                     |
| php generate stats  |
|_____________________|

The php at the bottom of the page analyzes the data that was generated in the table and all the stats variables are created at the bottom of the page.

I want to create a quick summary of the data like “how many times x occurred” etc, and put it at the top-right of the page (stats), but that data is known after the table is generated at the bottom of the page.

Without duplicating code, how can I retrieve these variables that are not generated yet and place them at the top-right of the page? Or with CSS or HTML, can I make a box float or similar to the top right of the page?

What’s the best approach to this problem?

EDIT: I’m not asking how to generate the stats, I’ve already done so at the bottom of the page but want to display them at the top of the page.

Answer 1

You’re asking two separate questions here.

1.

Using only HTML/CSS, I want to create a quick summary of the data like "how many times x occurred [...] but that data is known after the table is generated at the bottom of the page.

Why do you want to do this with only CSS? Some simple jQuery JS (e.x. $("element.class").size()) will tell you the amount of element.class on the page. However, you’re being extremely vague about what kind of “stats” you want to display. Or, why do it on the front end at all? With PHP, just get the count() of the amount of array elements of the stats you are counting.

2.

with CSS or HTML, can I make a box float or similar to the top right of the page?

div.box{
    position:absolute;top:25px;right:25px;padding:10px;
}

Once again, you’re being very vague about what you want to do here. Assuming you want the stats to stick to the top of the page as the user views the data, this code will keep it at 25px from the top and right.

Edit:

Use the CSS code I showed, then make the div at the bottom with the stats display:none;. Then, just use:

$("div.box").html($("div.stats").html());