0

What I want to do is to make my site get the current width of the window that the visitor has. Then I want to have two different options. Something like this:

<script>
if (screen.width < 768) {
<?php $a = 1; ?>
} else {
<?php $a = 2; ?>
}
</script>

What I'm trying to do is that my php variable should change based on device width.

Which way is the easiest way to do this? I can't write or understand a single row of AJAX so if that's the only way I would be very satisfied with some kind of guide to make this as easy as possible.

And to make it with CSS is not the right way. So please, don't tell me something that has to got anything to do with CSS.

Edit:

I'm not sure if you guys understand what I really want to get out of this code.

So I will write it more specific.

I have a site which has an image-slider on top that shows the 2 latest news. Right under this I have a query of posts that are set to offset 2, because I don't want to query the same news that I have in my slider.

So my code is something like this:

<?php 
$offset = 2;
$showposts = 10; 
?>
    
    <?php query_posts(array('offset' => $offset, 'showposts' => $showposts,'cat' => '8')); ?>

And I can't make two different queries because I have ad-scripts that can't be loaded more than 1 time, because then they will not show at all. So it all need to be done in one query, and that's why it has to be changed based on device width.

Now I forgot to tell that on my version for width < 768 I make my slider disappear and therefore I want to have the offset to 0 instead of 2.

I hope this makes more sense...

Jason Aller
  • 3,541
  • 28
  • 38
  • 38
Henric Åkesson
  • 140
  • 1
  • 2
  • 11
  • You can't mix javascript with PHP. You could only $_GET or $_POST back to the script (or some form of AJAX). – Sablefoste Sep 17 '13 at 15:21
  • 1
    You can't get the screen width until after the page has been sent to the client. You could emit both values to the client-side code and only use one based on the screen width there. But it depends on what these values are meant to do. – David Sep 17 '13 at 15:21
  • Read this [question](http://stackoverflow.com/questions/1504459/getting-the-screen-resolution-using-php). Maybe it helps you to understand why, why not, and how you can achieve that from another pov. – Lan Sep 17 '13 at 15:26
  • Please check your code more carefully. Are you sure that your code can not be transformed in a way that you handle this on the client side? This check can be done easily CSS and JavaScript in the client. If not, you need a combination of AJAX and PHP. – Nick Louloudakis Sep 17 '13 at 15:56
  • The fact remains that any attempt to do this will require *two* requests in total. The first to render the page, the second to send the width value back to the server. Unless you want to re-load the whole page, you're looking at manipulating your UI based on the width in client-side code. Ideally you would render the page with the ability to show both styles, and choose which one to show in client-side code once the width is known. – David Sep 17 '13 at 17:36

3 Answers3

1

You can use cookies to communicate between JS and PHP.

Here's the JS to set or update the cookie:

document.cookie = "someKey=someVal; path=/;";

And then you can use $_COOKIE["someKey"] to access the data in PHP.

There are PHP scripts out there that attempt to detect the device type from the user-agent, that's what I use when this cookie isn't available (first page load). So I can change my UI before the page loads based on an intelligent guess.

Jasper
  • 75,717
  • 14
  • 151
  • 146
  • This answer depends on if the user has cookies enabled. They can be disabled in the browser and then you would not be able to determine the width. – tnschmidt Sep 17 '13 at 15:28
  • @schmidt382 True. Do you know of any standard way to detect if cookies are disabled? – Jasper Sep 17 '13 at 15:38
  • The most basic way is to validate it is in javascript first, attempt to set the cookie and check if that variable has the expected value set. If it does not, then cookies are probably not enabled. There have been a few tickets on ways to check if cookies are enabled: [here](http://stackoverflow.com/questions/8112634/jquery-detecting-cookies-enabled) and [here](http://stackoverflow.com/questions/531393/how-to-detect-server-side-whether-cookies-are-disabled) – tnschmidt Sep 17 '13 at 16:14
1

A simple way you have to do it is using AJAX. Then, you will be able to make a request to the server and execute certain script.

$.post("http://yoursite.com/script.json",  { windowsWidth:  screen.width });

You could receive the window width on a variable and then do whatever you want inside your script.

Alvaro
  • 40,778
  • 30
  • 164
  • 336
  • As I wrote before; I have no idea how to do this, and AJAX doesn't make any sense to me. Have you read my edited description for the problem? – Henric Åkesson Sep 17 '13 at 18:39
  • What you are looking for is usually accomplish using CSS3 queries or with jQuery and another style sheet. Nobody does what you are trying to do, it just makes no sense... Think about other ways and forget about using conditions in PHP with the width of the window. – Alvaro Sep 18 '13 at 08:50
-1

Try something like this: 

var w = $(document).width(); // if you are using jquery
var v;
if (w < 768)
    v = <?php echo $var;?>;
else
    v = <?php echo $var2;?>;
Andy Zee
  • 336
  • 4
  • 12
  • I didn't downvoted it, but... This way you are passing a PHP variable to a JavaScript variable. – Alvaro Sep 17 '13 at 15:31
  • You are right. Didn't catch topic starter's question correctly, though that might actually solve his problem, because noone actually knows what does he want – Andy Zee Sep 17 '13 at 15:35