Question

Hi I am currently using jQuery to load a variable php layout depending on the browser width.

function setLocation(url) {
   if (window.location.href.indexOf(url) === -1)
      window.location = url;
}

function reloadPage(width) {
    width = parseInt(width);
    if (width < 701) {
        setLocation("yournarrowpage.php");
    } else if (width < 900) {
        setLocation("yourmediumpage.php");
    } else {
        setLocation("yourwidepage.php");
    }
}

$(function() {
   reloadPage($(this).width());
   $(window).resize(function() {
       reloadPage($(this).width());
   });
});

Is it possible to accomplish this with just php?

If yes, how? Please help.

Why do I want to do this when I can simply re-arrange my layout with CSS?

I do not want to use the CSS property #div { display:none } as the issue is that my layouts are loaded with very many images, javascript and also widgets.

I even tried a responsive layout but unfortunately some of the image details are hardly visible in small screens.

Using css property display:none, will still loads the un-displayed content wasting a lot of bandwidth. Lets say for a mobile browser to load 1.5 MB of site and then hide 1.2 MB of it???? Well that may not be a good idea.

For smaller browsers these widgets will not make any sense, hence I would want to load a lighter version of the same.

This is what I think. Please feel free to correct me if I am wrong as I am still a novice when it comes to programming and am still in the learning stage.

Answer 1

Combine CSS media queries and javascript to prevent loading of the larger items/areas you don’t want to load…

if ($('window').width() > 1000) {

 // load your full functions and stylesheet 

}

if ($('window').width() < 1000) {

 // load your narrow functions and stylesheet 

}

I’ve recently combined css media queries in a method similar to this, and then added animations to help make the transition less painful.. it’s quite nice.