Question

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("layout700.php");
    } else if (width < 900) {
        setLocation("layout900.php");
    } else {
        setLocation("layout1200.php");
    }
}

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

My Questions :

Q1. Is it possible to accomplish this with just php? If yes, how?

Q2. Can I do this using PLAIN JAVASCRIPT (No jQuery, MooTools or other libraries) If yes, how?

I dont want to use those libraries because this is the only javascript function in my template and currently just to do this I am loading the entire jQuery library. 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 and 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

Q1. Is it possible to accomplish this with just php? If yes, how?

To a certain extent, you can identify mobile devices. However, a user’s screen resolution is not available in PHP.

Q2. Can I do this using PLAIN JAVASCRIPT (No jQuery, MooTools or other libraries) If yes, how?

Yes. In fact, it might even be easier. Here’s the equivalent of your code without jQuery:

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

function reloadPage(width) {
    if (width < 701) {
        setLocation("layout700.php");
    } else if (width < 900) {
        setLocation("layout900.php");
    } else {
        setLocation("layout1200.php");
    }
}

var done = false;

function ready() {
    if(!done) {
        done = true;
        reloadPage(document.width);
    }
}

if(window.addEventListener) {
    window.addEventListener('DOMContentLoaded', ready, false);
    window.addEventListener('load', ready, false);
} else if(window.attachEvent) {
    window.attachEvent('onload', ready);
}

window.onresize = function() {
    reloadPage(document.width);
};

However! You can also use media queries to restyle your page without making a fluid layout. This is better for a lot of reasons, most notably that your layout won’t depend on JavaScript and possibly sketchy compatibility. Here’s a good tutorial.