Determine browser width with jQuery, then call one (out of two) .php files (from the same directory) to load a line of PHP

Question

I seek a simple way to call a php file using jquery.

The ultimate outcome has to do with a Magento site I am working on: http://bouquetsco.com/flowersplants.html ^^This page

This page displays products: 3 in a row.

    <?php $this->setColumnCount(3); ?>
    <?php $this->setColumnCount(2); ?>

^^This php code manually sets the number of product columns.

By default the page displays 3 wide, which looks fine until the browser window re-sizes down to tablet width (760px or so). When the website's design is tablet size (760px or so) I would like to display only two columns of products.

To do this, it seems one must use javascript to determine the window width, then run some php code depending on the browser-window width... like

this...

    if ( browser-window-widith > 760) { get '3-column.php' }
    else { get '2-column.php' }

This is grossly over-simplified. What would this code logic look like? How would one write this functionality?

Also, one could change the initial if statement to:

    if (browser-window-width < 760) { get '2-column.php' }
    else { get '3-column.php' }

====================================

There would exist two .php files (2-column.php, & 3-column.php) Each contains:

    <?php $this->setColumnCount(2); ?>

or

    <?php $this->setColumnCount(3); ?>

The code would call one file or another depending on the browser window width, (which would be found by the javascript) and thus result in

3-column product list for displays > 760px

and

2-column product list for displays < 760px

You do of course realize that javascript is only available on the client side (in this case), and by the time it runs, the page has left the server, and since PHP is a serverside language, you can no longer run PHP. You can use ajax for this, and insert and remove content, but I'm not sure the result would be what you're looking for, atleast not without a lot of extra work, and somehow I think you would be better of with media queries in CSS to determine the number of columns based on the screens width etc. — adeneo
You're looking for jQuery's .ajax() in order to call your PHP file. However, why don't you change the columns via Javascript instead? or media queries? — Josh
This: <?php $this->setColumnCount(2); ?> is the only thing I have found that definitely makes the changes necessary. It seems a bigger hassle to use css to change the number of columns because some php determines the number of <li>'s per <ul> on the server before it gets published. I am happy with an ajax solution, but am do not know the syntax of the code. 1. Load php, sent to browser 2. Javascript determines browser.width 3. Calls one of two php files (which respectively contain either this: <?php $this->setColumnCount(2); ?> or this: <?php $this->setColumnCount(3); ?> — Adam Caron
Once page has rendered, you will have to handle resizing using javascript. AJAX calls will not really help you. If you want to use php code to resize to browser window width, I would recommend using $_SERVER[''HTTP_USER_AGENT'], and figure out if it is tablet or PC. — yajakass

ROY Finley ROY Finley · Accepted Answer · 2013-01-03T23:00:52

I use this on the login page of my site:

if(!isset($_GET['width']))
    {
        echo '<script type="text/javascript">window.location = "' . $_SERVER['PHP_SELF'] . '?width="+screen.width+"&height="+screen.height;</script>';
    }
    else
        {
            $_SESSION['screen_width'] = $_GET['width'];
            $_SESSION['screen_height'] = $_GET['height'];
        }

Now the width and height are saved to the current session, and I can do a condition check before displaying the page division.

if($_SESSION['screen_width']>= '1400')
   {
      $this->setColumnCount(3);
   }
   else
       {
          $this->setColumnCount(2);
       }

Determine browser width with jQuery, then call one (out of two) .php files (from the same directory) to load a line of PHP

2 Answers

index.php

script.js