Determining browser window width and assigning to global variable

[dwlamb]

I have some experience when it comes to CodeIgniter. I am trying to figure out a method for determining the window size of a browser and assign it POST or $this or the user session (also part of $this). I need the variable to persist for the session.

In my site there is a table of data that needs to be formatted differently for width greater than 768px. By trial and error, I have tried different methods using CSS media queries but there is no way around it: I need to know, server-side, what the browser window width is so I can execute code in my controller send it along with all other HTML to the view.

I did consider the User Agent class but that will only inform me as to whether the device might be mobile, not the browser window width.

From research, I found various javascript and jQuery tutorials for dynamically saving the browser window width to a variable but these are all premised on after the document is loaded and ready.

Is there a simple way to accomplish this?

Server side doesn't make any sense. CSS data queries should work. If you need different markup based on breakpoints then you probably need js. Using php makes no sense as this needs to be responsive. PHP is not "responsive".

[dwlamb]

Maybe this will help make sense.

Before the user sees a page with the table data, the user will need to log-in. Logged-in begins a session and from there PHP is already collecting information about the browser. Why not take it a step further and determine window width?

To efficiently use the screen space, the table in question is rendered as two <td> per row at less than 768px and can be rendered as four <td> per row at higher than 768px. To demonstrate what I mean have a look at this jsfiddle.

I have written the functions in my controller to render the table either way. I simply need a variable that will inform the width of the browser and use that variable for an if method to return the table code block.

I have tried a method of a more flexible table layout to display rows as inline blocks dependent on media queries (click here for that example) but the flow broke down if a cell was more than one line.

I have considered rendering the table in the two formats and based on media queries have one hidden using display:none. I question the wisdom of that for the server is doing double the work when there might be a simpler way if the server knows the size of window.

A method that is contingent on the server knowing the size of the window does make sense when there is a small exception that media queries can not resolve. From articles I have read, some are saying an 'm.' for mobile sub-domain (eg. m.daniweb.com) should not be totally abandoned. Responsive web sites - mobile first, then up - are the way to go. But the odd exception does still happen where thinking outside the box presents new opportunities to expand skill.

[veedeoo]

how about using jquery to get the browser information and then submit the collected information via ajax to the controller method and then assign them to session.

[dwlamb]

that's exactly what I want to do, veedoo. Have any idea or and example to go about doing that?

[dwlamb]

I made and error earlier for the first jsfiddle in my second post.

Where it states "To demonstrate what I mean have a look at..." this is the correct fiddle

My apologies for any confusion.

"Responsive" will include the changing of dimensions as a mobile is held upright or on its side. This is a heavy thing to try and code server-side with ajax. Resizing a desktop browser window should also trigger responsive breakpoints. It is not simply choosing starting dimensions and hoping that they do not change during the "session".

[dwlamb]

@diafol

Well, I think I am on to something. Stay tuned. If it works, I will post an article about it so you can see that which I am trying to accomplish.

I think you're getting too caught up on premises rather than what I am asking:

Using JavaScript and PHP how would I go about determining the width of the browser window and save it to a variable under a Codeigniter environment?

[veedeoo]

Not sure, but you can experiment with this will give you the size of the window onload and on resize state.

The jquery part to send it to the controller is as simple as this.

Add a method for the controller

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

Class MyController extends CI_Controller
{

    public function __construct()
    {
        parent::__construct();

     }


     public function get_window()
     {

         if (isset($_POST)){

             ## filter and assigned to session
          }   

     }

Change this part of the script on second linked script above

this

url: 'text.php',

to this

url: 'MyController/get_window',

if you think you need to use routing, please feel free to do so.

If you want the jquery to update the session, make sure to add onchange event or something. So, that when the user manually change the window size, the script get updatated.

[dwlamb]

@vedoo

THANK YOU VERY MUCH

Your post and links to articles helped exactly as I had hoped.

This is the javascript to determine the width of the browser:

$(function() {
    var base_url        = window.location.origin;
    var browser_width   = $(window).width();

    $.ajax({
        url         : base_url+'/index.php/user/jquery_library_browser_width',
        cache       : false,
        type        : "POST",
        data        : {"browser_width":browser_width},
        dataType    : "json"
    });
});

This is the function within the controller:

function jquery_library_browser_width() {
    //Assign $_post['browser_width'] to $browser_width
    // TRUE runs data through the XSS filtre within CI
    $browser_width = $this->input->post('browser_width', TRUE);
    $this->session->set_userdata('browser_width', $browser_width);
}//jquery_browser_width

I have more coding still to do for rendering the table based on browser window width but the variable is within the userdata array to run the if method and direct the controller.

[veedeoo]

On the dimension update, don't forget to reload your controller. Since CI has no reload function, we can easily bypass it by doing like so..

redirect('/index.php/user/jquery_library_browser_width');

try experimenting with the proper url. Normally, if you are using .htaccess, you can easily get away with simple reload like this

redirect('user/jquery_library_browser_width');