max results based on screen resolution

Question

I have a site that lists the best books by popular vote. The books are stored in a database. Is there a way to set the $maxresults to the width of the monitor? On larger monitors, this leaves one or two books in the entire bottom row. I'd like each row to be filled in regardless of the resolution. Maybe an if statement? My code:

  $maxresults = 21;
  if($_GET['page'])
  $page = $_GET['page'];
  else
  $page = 0;
  $currentpage = $page;
  $page = $page*$maxresults;
  $numpages = QuickQuery("SELECT COUNT(id) FROM movies WHERE visible=1");
  $numpages = mysql_result($numpages, 0);
  $numpages = $numpages/$maxresults-1;
  $result = GetBooksByRangeID($page, $maxresults);//Show <maxresults> pages at a time
  DisplayResults($result); 
  ?>

Answer 1

You can do it with javascript. Don't be scared, it's not that difficult.

First, chec the screen resolution: http://www.pageresource.com/jscript/jscreen.htm

Second, pass more elements to the client side and hide them dynamically - set display="none" or something like that (you may use http://datatables.net/ for example).

Answer 2

If you're looking for this to work based on window size, rather than monitor size (ie it should fill the browser window but not run offscreen if the window is smaller than the screen), take a look at the jQuery .width() function ( http://api.jquery.com/width/ )

If the display of each book is contained in a div, you can just set the style for the div to be float: left . Then the group of them will fill the screen until they run out of room, and then break onto a new line.