CODEWITHSUNDEEP
phpjquerybrowserresolution
Vikram Rao
Vikram Rao

Reputation: 1078

how to load a diferrent php file dynamically based on the browser window's width using jQuery or any other method

Hello friends a very novice question as I am very new to programming.

I was browsing the web and found a method to dynamically load a CSS file based on the browser width.

jQuery

function adjustStyle(width) {
    width = parseInt(width);
    if (width < 701) {
        $("#size-stylesheet").attr("href", "css/narrow.css");
    } else if ((width >= 701) && (width < 900)) {
        $("#size-stylesheet").attr("href", "css/medium.css");
    } else {
       $("#size-stylesheet").attr("href", "css/wide.css"); 
    }
}

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

HTML

<link rel="stylesheet" type="text/css" href="main.css" />
<link id="size-stylesheet" rel="stylesheet" type="text/css" href="narrow.css" />

I want to know, can I use the same to load a php file?

If yes what will be the code look like?

I think we will be required to use something like <?php require_once('http://mysite.com/layouts/ipad.php'); ?> but how do I code it?

Kindly help.

Regards

Upvotes: 1

Views: 3429

Answers (4)

SpoonNZ
SpoonNZ

Reputation: 3829

I suspect what you're actually wanting to do is redirect the user to a different page based on browser or resolution.

$(document).load(function() {
    var $width = $(window).width()
    if($width < 701)
        window.location = 'narrow.php'
    else if($width < 900)
        window.location = 'medium.php'
    else
        window.location = 'wide.php'
})

You could easily make the same function run on window resize, although it may not work as well as you hope in practice.

Edit: If you're just doing this for iPads specifically (which you shouldn't):

if(stristr($_SERVER['HTTP_USER_AGENT'], 'Mozilla/5.0(iPad;')) {
     // probably an iPad
     require('ipad.php');
     //Or maybe the below might serve you better:
     /*
     header('Location:ipad.php');
     die();
     */
}

Upvotes: 1

nnnnnn
nnnnnn

Reputation: 150030

I want to know, can I use the same to load a php file?

If by "load a php file" you mean load a different page where you'll define different pages for different conditions (widths, whatever), then you can load different pages by setting window.location equal to the desired page. This will replace the current page with the one you specify.

I don't think you should do this every time the window is resized though. If you must do it at least check whether the new size actually requires a change rather than repeatedly reloading it regardless.

Following is similar to your existing code:

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());
   });
});

You don't have to reload the entire page each time though, you can reload just certain sections using ajax. For that you could do something similar to the above except instead of setting window.location you'd use jQuery's .load() method:

function setLocation(url) {
   $("selector for the element to reload").load(url);
}

Upvotes: 2

run
run

Reputation: 1186

 if (width < 701) {
    $.get('yourlayoutfor701.php', function(data) {
    $('#your_layout').html(data);  
    });
 }

hope this might help you, but not a good practice

Upvotes: 0

DMCS
DMCS

Reputation: 31870

This is a good starting place for the css question: http://topsecretproject.finitestatemachine.com/2009/09/how-to-load-javascript-and-css-dynamically-with-jquery/

And for loading php, see Including a php file dynamically with javascript and jquery

Upvotes: 0

Related Questions