0

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); 
  ?>
JJM
  • 119
  • 4
  • 9
  • there's no automatic way for php to do this. you will have to send the screen resolution up to the server and do the math manually. – Daniel A. White Feb 22 '13 at 19:42
  • How would I go about doing this? Can be done with javascript also, right? – JJM Feb 22 '13 at 19:45
  • And if I'm not using a window open to full monitor size? Or if I choose to resize my window? Are you really still designing your pages as though it was 1993 rather than 2013? This isn't responsive design, it's retrosponsive design.... and you can use tables and iframes for your layout as well – Mark Baker Feb 22 '13 at 19:47

2 Answers2

0

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).

ducin
  • 25,621
  • 41
  • 157
  • 256
  • Thanks- this first link you sent shows how to send the user to a different page based on resolution. I don't want to do that. I just want the last row of books displayed to fill in horizontally as they do in all other rows. Currently, I have $maxresults set to 21, which does not do this – JJM Feb 22 '13 at 20:31
  • you don't have to redirect anybody anywhere. Instead of window.location you should modify DOM elements (dynamically change CSS of HTML elements) and you'll get what you want. – ducin Feb 22 '13 at 20:33
0

If you're looking for this to work based on window size, rather than monitor size (i.e. 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.

EmmyS
  • 11,892
  • 48
  • 101
  • 156
  • You need to do some math. Determine the width of your available window space (either using `window.width()` or `$(document).width()`). You can then compute how many divs will fit on a line by dividing the window/document width by the width of a single div. Or are you saying you don't want to change the number of books displaying in the last row (because you may not get a perfect division) but rather want to change the spacing of the books in the last row to force them to be evenly spaced even if they don't take up as much room as the other lines (which have more books)? – EmmyS Feb 22 '13 at 20:34
  • If that's what you're trying to do, there are probably multiple ways of going about it. css is not my strong suit, but I'd think you'd need to figure out (via js or jq) which elements are going to fall in the last row, then style them separately from the others. There's a good post on evenly spacing horizontal elements here: http://stackoverflow.com/questions/6865194/fluid-width-with-equally-spaced-divs – EmmyS Feb 22 '13 at 20:40
  • Emmy- the first option is correct. I will try using jQuery .width and see what I come up with. – JJM Feb 22 '13 at 20:49