PHP CSS HTML. Huge amount of data, dynamic columns and boxes - php

Question

I have a huge list of data I want to display, 10,000's, with filters hopefully just a few thousand at a time.
Languages: HTML, PHP, CSS
I was thinking of the best way to display this data and thought of an idea I like. I would like to have a box (say a div) with a fixed height (90% or 100% of the screen/browser resolution). No horizontal scrolling. Data would display visually in columns, filling the first column, then the second, third, forth, etc.. as many as required. The boxes would house the columns and increase in number as required downwards (for vertical scrolling). This will need to be dynamic as I will not know what data will be displayed (based on filter), I will not know the users browser size etc..
Made a paint image if that helps more:
http://postimage.org/image/630pxp3sx/
If the box thing is not possible, could you at least tell me how to achieve the coloumn effect.
Hope that makes sense.
Ideally I think I want to achieve this with CSS?
Thanks

Answer 1

The closest you can get with pure CSS is with the columns property, but it won't fill exactly the way you want. The elements will fill from top to bottom, left to right, and divided equally so that all of the columns are as close to the same height as possible.
ul {
columns: 5em; /* some browsers require prefixes (eg. -moz-columns, etc.) */
}
http://jsfiddle.net/VQXH3/
Flexbox could do what you're asking for, but support for it is poor at the moment (IE10+, Opera, Chrome; Firefox is adding support for the new spec soon).
http://jsfiddle.net/VQXH3/1/ (try in Opera, didn't add prefixes to the demo)

Answer 2

If you want the columns to be as even as possible, simply figure out how many results are being displayed beforehand. Then, decide how many columns you want to display them. Say you had 100 results, and wanted to divide them among 5 columns, that would be 20 results for each column. You could do something like this in PHP/MySQL:
<?php
$con = mysql_connect('localhost', 'user', 'pass');
$db = mysql_select_db('data');
$get = mysql_query("SELECT * FROM table");
$columns = 5; // number of columns you want to have
$total = mysql_num_rows($get);
$perCol = ceil($total/$columns);
$counter = 0; // start counter at 0 and increment it as the loop progresses
$data = "<div class=\"column\">\n"; // create blank string for storing results
$counterTotal = 0; // keep track of total results
while($a = mysql_fetch_array($get)) {
$counter++;
$counterTotal++;
if ($counter == 1 ) { // no <br /> tag necessary
$data .= " " . $a['data'];
} else {
if ( $perCol == $counter ) {
$data .= "<br />\n " . $a['data'] . "\n</div>\n<div class=\"column\">\n";
$counter = 0; // reset counter for new column
} else {
$data .= "<br />\n " . $a['data'];
}
}
}
$data .= "\n</div>\n";
echo $data;
mysql_close($con);
?>
If you were wondering why I added all the new lines (\n) and whitespace in the code, it's just to make the source code look nice and pretty. :) Feel free to take that out if you wish, but I like my source code to look nice and readable, even when it's being dynamically generated.
Then if you want the columns to fill the whole width of the screen, you can just inject PHP into the <style> tag in the header, like this: (assuming it's on the same page as the code above so you can still access the $columns variable)
<style type="text/css">
.column {
float: left;
width: <?= floor(100/$columns); ?>%;
margin: 0px;
padding: 0px;
}
</style>
Of course this would only work if there is no remainder in the division, but it should come close even if it isn't a perfect division. Here is the code from a sample page I made to do this:
<?php
$con = #mysql_connect("localhost", "user", "pass");
$db = #mysql_select_db("sampleDB", $con);
$get = mysql_query("SELECT * FROM dataTable");
$columns = 5; // number of columns you want to have
$total = mysql_num_rows($get);
$perCol = ceil($total/$columns);
$counter = 0; // start counter at 0 and increment it as the loop progresses
$data = "<div class=\"column\">\n"; // create blank string for storing results
$counterTotal = 0; // keep track of total results
while($a = mysql_fetch_array($get)) {
$counter++;
$counterTotal++;
if ($counter == 1 ) { // no <br /> tag necessary
$data .= " " . $a['data'];
} else {
if ( $perCol == $counter ) {
$data .= "<br />\n " . $a['data'] . "\n</div>\n<div class=\"column\">\n";
$counter = 0; // reset counter for new column
} else {
$data .= "<br />\n " . $a['data'];
}
}
}
$data .= "\n</div>\n";
#mysql_close($con);
?>
<html>
<head>
<title>Data In Columns</title>
<style type="text/css">
.column {
float: left;
width: <?= floor(100/$columns); ?>%;
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<?= $data; ?>
</body>
</html>
If you'd like to see the results of this code, you can check out the sample that I made here: http://mdl.fm/sample.php
UPDATE: If you'd like to fit the content to the height of the screen and determine the number of columns needed, you would need to manually dictate how many items go in each column, so you would make the following replacements:
// replace this
$perCol = ceil($total/$columns);
// with this
$perCol = 20;
$columns = ceil($total/$perCol);
// the line above will just override the manual declaration of $columns
However, PHP cannot detect the browser's dimensions, so if you want to do that, you can forward to the PHP page again via Javascript with the dimensions included. Here is a piece of sample code you could use, put this in the tag of your page:
<script type="text/javascript">
function getDims() {
var myWidth = 0, myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}
return {
'width' : myWidth,
'height' : myHeight
};
}
function loadDims() {
if ( document.URL.indexOf("?w=") < 0 ) {
var dims = getDims();
window.location.href = '/sample.php?w=' + dims.width + '&h=' + dims.height;
}
}
</script>
Then update your with an onload like this:
<body onload="loadDims();">
At this point, you will know the browser dimensions inside the PHP code, so you can divide the given height by the text-size and see how many items can be contained in one column without the need for scrolling. Again, I have updated my page with this code, so just check it out if you want these complete snippets. Also, if you have any questions implementing them, just contact me through my website (http://mdl.fm) and I'd be glad to help.