Jump to content

php media screen


gongpex

Recommended Posts

Hello everyone,

 

I think all of you know that to detect screen resolution we can't using pure php,

 

I found tutorial on google but I'm still confuse to use them please see this code:

<? php if ([SCREEN SIZE CODE FROM JQuery] > 960px) {echo 'OK';}ELSE{echo 'no';}?>

for instance this filename is : tes.php.

 

on that tutorial they only show this :

if( $(window).width() > 960 ){  $.ajax({    url: 'js/nbw-parallax.js',    dataType: "script",    success: function() {        //success    }  });}

Q : about that jquery code, what I must do? (should I put this code on tes.php or should I put this code on another file such test.html or etc?)

 

note : my expectation only so that if I open tes.php from I can see the result 'ok' if the screen resolution is greather than 960px.

And I got this tutorial from : http://stackoverflow.com/questions/15142902/php-echo-statement-if-screen-is-a-certain-size

 

please someone help me

 

Thanks

Edited by gong
Link to comment
Share on other sites

The poster wanted to use php to identify that the screen size was of a specific width from a value passed to it from jquery, then it would create link to parallax js filename.The answer was not to use the php example the poster gave, but to use jquery only solution to identify screen size and open parallax js file.To use the php example you would have send the value retrived from $(window).width() to the php file using ajax, tben the php file would use $_GET to retrive value and use in php if condition.

Edited by dsonesuk
Link to comment
Share on other sites

Or, like one of the responses to that question notes, you can also use Javascript to set a cookie containing the dimensions and then check that cookie in PHP in later requests. It won't work for the first request, but it will work for later requests.

Link to comment
Share on other sites

html with jquery ajax

<!DOCTYPE html><html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" />        <title>http://w3schools.invisionzone.com/index.php?showtopic=53354#entry293760</title>        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>        <script  type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>        <script type="text/javascript">            $(function() {                $.ajax({                    type: 'GET',                    url: 'tes.php',                    data: {ScreenWidth: $(window).width()},                    success: function(data) {                        // alert(data);                        $('#php_screen_width').html(data);                    }                });            });        </script>        <style type="text/css">        </style>    </head>    <body>        <div id="php_screen_width">TODO write content</div>    </body></html>

PHP tes.php

<?php$jq_ajax_screen_width = $_GET['ScreenWidth'];if ($jq_ajax_screen_width > 960) {    echo 'OK width = ' . $jq_ajax_screen_width;} else {    echo 'no width = ' . $jq_ajax_screen_width;}

The point is! you don't need php cuz you can do what php does with jquery alone, and it still relies on JavaScript being enabled and also JavaScript created content is not accessible to web bots yet!

Link to comment
Share on other sites

Hello everyone,

 

Guys I think I post wrong question, please see this code :

using javascript / jquery we can get screen size var width = $(window).width(), height = $(window).height();if ((width <= 1023) && (height >= 768)) {document.write('responsive');} else {document.write('no');}

and usually we give value on php variable like this :

<?php$example = 'ok';echo $example;?>

code on above will display 'ok',

Q: how to pass value that generated from Jquery (whether 'responsive' or 'no') into php variable?

 

so that :

<?php$example = 'value from jquery code';?>

when I put echo command , it will display value from jquery

 

please help me

 

Thanks

Link to comment
Share on other sites

Basically you use same code in post #4, but place ajax code in a function.Replace document.write code with function call passing the value required in php.dothis(‘responsive'); or dothis(‘no'); this will transfer to ajax code function

function dothis(result){$.ajax({ type: 'GET', url: 'tes.php', data: {ScreenWidth: result}, success: function(data) { // alert(data); $('#php_screen_width').html(data); } });}
The php file will get value past with $_GET and you just echo $jq_ajax_screen_width;
Link to comment
Share on other sites

Hello thanks for answer

 

but sorry I'm rather confuse with new code, I think I need to show all of my file :

 

cart.php (past code before update)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Portofolio Book Store</title><?php include('template/css_style.php'); ?><?php include('template/javascript_library.php');?><script type="text/javascript">$(function() {           $.ajax({               type: 'GET',               url: '<?php echo base_url('index.php/user/ajax');?>',               data: {ScreenWidth: $(window).width()},              success: function(data) {               // alert(data);               $('#php_screen_width').html(data);             }           });        });</script></head><body>

ajax.php

<?php$jq_ajax_screen_width = $_GET['ScreenWidth'];if ($jq_ajax_screen_width > 960) {  echo 'ok' .$jq_ajax_screen_width ;} else {   echo 'no'.$jq_ajax_screen_width ;}?>

on cart.php if I put code :

<div id ='php_screen_width'></div>

it will shown the result of ajax.php 'ok' if screen width greater than 960px and 'no' if otherwise.

 

my expecation : I can get the value from jquery ($jq_ajax_screen_width) into cart.php so :

if ($jq_ajax_screen_width > 960) {  echo 'ok' .$jq_ajax_screen_width ;} else {   echo 'no'.$jq_ajax_screen_width ;}

or

if ($jq_ajax_screen_width > 960) {  $value = 'ok';} else {  $value = 'no';}echo $value;

so when I put echo $value like on above, I can get the result correctly.

 

and finally for details so that I can make :

<?phpif($value=='ok') {  echo 'this ok';}else{  echo 'this no';}?>

on cart.php

 

please help me

 

Thank you

Edited by gong
Link to comment
Share on other sites

Can't be done, php is server side language, any php is processed and return as html and then its finished and done, any jquery ajax won't be able to process php before the page is completed and just showing plain html, any update with php will require a page reload where the response from jquery must be set already, maybe using cookie or session which will require the page to load twice before retrieving a value for screen size.

Link to comment
Share on other sites

I think i got a solution, but it involves redirects and cookies.

 

This first checks if $_COOKIE['IsResponsive'] has been set, if not redirect to tes4.php page which determines width, height, and sets up cookie to hold result, and it then redirects back, as the cookie is now set it retrieves value and assign it to $testhis which is echoed out in page, it also has resize detection to redirect to tes4.php to re-evaluate.

 

Also NOTE it does reload every time as redirected from what will be cart.php to ajax.php and back again.

 

this would be cart.php file

<?php$testthis = "";if (!isset($_COOKIE['IsResponsive'])) {    header('Location: ' . 'http://localhost/web_testing/jquery/tes4.php'); //ajax.php} else {    $testhis = $_COOKIE['IsResponsive'];}?><!DOCTYPE html><html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" />        <title>http://w3schools.invisionzone.com/index.php?showtopic=53354#entry293760</title>        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>        <script  type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>        <script type="text/javascript">            $(function() {                $(window).resize(function() {                    location.href = 'http://localhost/web_testing/jquery/tes4.php'; //ajax.php                });            });        </script>        <style type="text/css">        </style>    </head>    <body>        <?php echo $testhis;        ?>    </body></html>

tes4.php (this would be your ajax file even though it does not use ajax, its html javascript)

<html>    <head>        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>        <script  type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>        <style>            html, body{height:100%;}        </style>        <script>            function CheckScreenSize()            {                var IsResponsive = "";                var width = $(window).width();                var height = $(window).height();                if ((width <= 1023) && (height >= 768)) {                    IsResponsive = 'responsive';                } else {                    IsResponsive = 'no';                }                setCookie('IsResponsive', IsResponsive, 1);            }            function setCookie(cname, cvalue, exdays) {                var d = new Date();                d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));                var expires = "expires=" + d.toUTCString();                document.cookie = cname + "=" + cvalue + "; " + expires;                location.href = 'http://localhost/web_testing/jquery/php-media-screen4.php'; //cart.php            }            CheckScreenSize();        </script>    </head></html>

NOTE: the 100% height for html, body, this is required else height shows as 0.

Edited by dsonesuk
Link to comment
Share on other sites

Because cookies are treating unfavourably, and more than likely be disabled. tested version in IE11 and it didn't work, ten mins later checked cookie setup and all cookie were disabled, i can't remember doing it, so it might be default. so just in case.

<?phpsession_start();$testthis = "";if (!isset($_SESSION['IsResponsive']) && !isset($_POST['IsResponsive'])) {    header('Location: ' . 'http://localhost/web_testing/jquery/tes5.php');    exit;} else {    if (isset($_POST['IsResponsive']) && !empty($_POST['IsResponsive'])) {        $_SESSION['IsResponsive'] = $_POST['IsResponsive'];    }    $testhis = $_SESSION['IsResponsive'];}?><!DOCTYPE html><html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" />        <title>http://w3schools.invisionzone.com/index.php?showtopic=53354#entry293760</title>        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>        <script  type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>        <script type="text/javascript">            $(function() {                $(window).resize(function() {                    //location.assign('http://localhost/web_testing/jquery/tes5.php');                    window.location.href = 'http://localhost/web_testing/jquery/tes5.php';                });            });        </script>        <style type="text/css">        </style>    </head>    <body>        <?php echo $testhis;        ?>    </body></html>
<!DOCTYPE html><html>    <head>        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>        <script  type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>        <style>            html, body{height:100%;}        </style>        <script>            function CheckScreenSize()            {                //var IsResponsive = "";                var width = $(window).width();                var height = $(window).height();                if ((width <= 1023) && (height >= 768)) {                    IsResponsive('responsive');                } else {                    IsResponsive('no');                }            }            function IsResponsive(result) {                $('#IsResponsive').val(result);                $('#myform').submit();            }            $(function() {                CheckScreenSize();            });        </script>    </head><body>        <form id="myform" method="POST" action="http://localhost/web_testing/jquery/php-media-screen5.php">            <input type="hidden" name="IsResponsive" id="IsResponsive">        </form>    </body></html>
Link to comment
Share on other sites

no redirects, just reload and no JavaScript detection

<?phpsession_start();$testhis = "no JavaScript";if (isset($_POST['IsResponsive']) && !empty($_POST['IsResponsive'])) {    $_SESSION['IsResponsive'] = $_POST['IsResponsive'];}if (isset($_SESSION['IsResponsive']) && !empty($_SESSION['IsResponsive'])) {    $testhis = $_SESSION['IsResponsive'];}?><!DOCTYPE html><html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" />        <title>http://w3schools.invisionzone.com/index.php?showtopic=53354#entry293760</title>        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>        <script  type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>        <script type="text/javascript"><?phpif (!isset($_SESSION['IsResponsive']) && !isset($_POST['IsResponsive']) || isset($_SESSION['IsResponsive']) !== isset($_POST['IsResponsive'])) {    ?>                function CheckScreenSize()                {                    var width = $(window).width();                    var height = $(window).height();                    if ((width <= 1023) && (height >= 768)) {                        IsResponsive('responsive');                    } else {                        IsResponsive('no');                    }                }                function IsResponsive(result) {                    $('#IsResponsive').val(result);                    $('#myform').submit();                }                $(function() {                    CheckScreenSize();                });    <?php}?>            $(function() {                $(window).resize(function() {                    window.location.href = '<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>';                });            });        </script>        <style type="text/css">        </style>    </head>    <body>        <form id="myform" method="POST" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>"><input type="hidden" name="IsResponsive" id="IsResponsive"></form>            <?php echo $testhis; ?>    </body></html>
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...