Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

This question already has an answer here:

This is really basic. All I want to do is measure the html width of a browser window, and pass that data to a PHP script so that I can adjust what information is passed to the site.

I've got the HTML width part down. I'm just having trouble passing the Javascript/jQuery variable to the PHP script using AJAX.

Here's the Javascript/jQuery. It is written in PHP so that I can use the include() function later.

echo 
'<script> 
    htmlWidth = $("html").width();
    $.ajax({
        type: "POST",
        url: "mobileView.php",
        data:{ width: htmlWidth }
    }) 
</script>';

And here's the PHP:

$width = $_POST['width'];
function mobileView(){
    if ($width < 950){
        return true;
    } else{
        return false;
    }
}
mobileView();
share|improve this question

marked as duplicate by CBroe, Seymour, Second Rikudo May 12 at 19:46

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

    
If you're just trying to determine whether to use mobile site or not, you could use a pre-made detection script that can be found all over the web. –  ArtOfCode May 10 at 16:48
    
@martynas this isn't a duplicate. I checked that post and I was unable to find the answer to this question there. –  Solomon Arnett May 10 at 17:35
    
@CaolanEvans The site that I am creating has specific dimensions for certain divs and instead of creating multiple CSS files, i'd much rather create two: one for the site's full version, the other for, not only if someone is viewing the site on mobile, but also if the window is resized smaller than 950px, such as when someone pins a tab to the left or right side of their screen in windows and linux. –  Solomon Arnett May 10 at 17:37
    
Fair enough. However, if someone pins the window while the site is displayed you run into problems unless you detect it. Just a hint. You can use jQuery's $(window).resize(function() {...}); to handle this, using the same code you have above. –  ArtOfCode May 10 at 17:43
    
@CaolanEvans yes. Thank you. I'm familiar with the $(window).resize function. However I have had some issues in the past with calling it inside the $(document).ready(function(){}); do you suggest calling the function outside of d-ready?^ –  Solomon Arnett May 10 at 17:45

2 Answers 2

up vote 1 down vote accepted

Here is the code that can be function within a file:

For PHP part, you should pass value to the function and call the function.

I guess you need return data to the client from the php function return. Then, for ajax part, you have to catch the return data.

<?
if(isset($_POST['width'])){
    $width = $_POST['width'];

    function mobileView($width){
        if ($width < 950){
            echo 'true';
        } else{
            echo 'false';
        }
    }
    mobileView($width);

}else{
?>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script> 
    htmlWidth = $("html").width();
    $.ajax({
        type: "POST",
        url: "mobileView.php",
        data:{ width: htmlWidth }, 
        success: function(data){
            console.log(data); 
        }
    })
</script>

<?
};

?>
share|improve this answer
    
Thank you. This worked perfectly. Now this may be a dumb question, but why does the "echo"s print to the console rather than the html? What I want to do is print data to the html file based on what information is passed from ajax. –  Solomon Arnett May 10 at 16:56
    
this code will not let me use the include function in php, it just returns all of the data to the console. –  Solomon Arnett May 10 at 20:23
    
@Solomon Arnett What do you mean include function in php? A file include this or this file include another? –  goodseller May 11 at 1:56

Try this.

Your AJAX

htmlWidth = $("html").width();
$.ajax({
    type: "POST",
    url: "mobileView.php",
    data:{ width: htmlWidth, somevar : "yes" },
    success: function(data){
        console.log(data); 
    }
})

Your PHP

if(isset($_REQUEST['somevar'])){
     $width = $_POST['width'];

    function mobileView($width){
        if ($width < 950){
            echo 'true';
        } else{
            echo 'false';
        }
    }
    mobileView($width);
}
share|improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.