Identify screen size to load content asynchronously

Question

Identify screen size to load content asynchronously

Navigation

#1 by (5 votes)

3

I have a script that does reload every 10 seconds, loading a page into a div :

<script type="text/javascript">

    var tempo = 10000;
    function listar() {
        $.ajax({
            url:"lista.php",
            success: function (textStatus) {      
                $('#lista').html(textStatus);
            }
        }); 
    }

    function reload() {
        location.reload();
    }

    $(function() {  
        listar();
        setInterval(listar, tempo);
        setInterval(reload, 1800000);
    });

</script>

I would like the script , to recognize the screen type / size (monitor, cell, etc.), and upload the file for size.

Example:

When the screen is a monitor : list.php

When the screen is a cell : upload_list.php

php jquery

asked by anonymous 20.07.2018 / 13:15

1 answer

R - How to calculate the price change from one period to the other? Do you need a MacOS computer to program Swift 4 and ObjC?

score 5 · Accepted Answer

You could capture the screen size and thus make the condition to check the screen size and tell which php file will be called.

Adding the following code will take you to the dimensions of the window:

var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;

Changing the function listar() to listar(arquivo) , to receive the file that will be called:

function listar(arquivo) {
    $.ajax({
        url: arquivo,
        success: function (textStatus) {      
            $('#lista').html(textStatus);
        }
    }); 
}

Finally, use the windowWidth variable to get the width of the screen and make the conditions, checking the width and setting which file will be called.

$(function() {
    var arquivo = "lista.php";

    var windowWidth = window.innerWidth;

    if (windowWidth < 1000 && windowWidth >= 400)
        arquivo = "lista_tablet.php";
    else
    if (windowWidth < 400)
        arquivo = "lista_cel.php";

    listar(arquivo);
    setInterval(listar(arquivo), tempo);
    setInterval(reload, 1800000);
});