0

I’m trying to send a cookie containing the device dimensions. If the device is a mobile device/small screen, I want to prevent the image slider from loading. The purpose is to reduce the amount of HTTP requests for mobile devices.

The second pageload/refresh the slider is shown, so I know the code is working to some degree.

My questions are; is this best way to implement such function? And is it possible to read the cookie and output the slider on first page load?

I have done some reading and it appears that the page would need to be refreshed for the cookie to work. To me this seems self-defeating as it increases the page load speed. Could something be done with session-variable?

Here’s my code: 

        document.cookie = "device_dimensions=" + screen.width + "x" + screen.height;

</head>


  $device_width = 0;
  $device_height = 0;

    // Read the device viewport dimensions
    if (isset($_COOKIE['device_dimensions'])) {
      $dimensions = explode('x', $_COOKIE['device_dimensions']);
      if (count($dimensions)==2) {
        $device_width = intval($dimensions[0]);
        $device_height = intval($dimensions[1]);
      }
    }
     if ($device_width > 0) {

    if ($device_width >= 640) {
       require('site/slider.php');
       }    

    else if ($device_width = 0) {
        require('site/slider.php');
      }
      }

And the working example: r.adamtoms.co.uk

Would really appreciate an explanation on how to solve this!

Adam

atoms
  • 2,993
  • 2
  • 22
  • 43

5 Answers5

1

The PHP is executed at the server side, while the JavaScript is at the browser, therefore the PHP parts of your code get executed first and only afterwards the JavaScript code is run.

Dovydas Bartkevičius
  • 1,721
  • 13
  • 19
1

Cookies are not really appropriate for your task. Best solution for your case would be to:

  1. Always load the slider block, hidden by default (i.e. using display:none; css-property);
  2. Detect screen dimensions using Javascript;
  3. Show hidden slider block, if dimensions are correct;

On step 3. you might want to load slider block using ajax, if you don't want to load it by default (i.e. to preserve network traffic).

After that, you can store screen dimensions to cookies or session to use them further.

Xardas
  • 142
  • 9
  • great thanks for this Xardas, have found http://stackoverflow.com/questions/10009040/getting-screen-width-into-javascript-variable-and-sending-it-through-ajax-to-a-p will have a play and report back. Cheers! – atoms Jan 09 '14 at 09:26
  • thanks for your help, following this I've managed to get it working as expected. Would you mind explaining the benefits of hiding the slider block by default? Cheers again, very helpful. – atoms Jan 09 '14 at 16:33
  • on second thoughts, would I be correct in saying; showing/hiding the slider block would allow users to start with a large device width, reduce down to 641px, and the slider would then be hidden. – atoms Jan 09 '14 at 16:38
  • You should choose default state (hidden/shown), as it suits best for your case :) – Xardas Jan 09 '14 at 16:39
  • I would choose the state, which will be used for most users, as the default. – Xardas Jan 09 '14 at 16:40
  • that's great thank you. Usage is split nearly 50/50 on the live site, so either would do I guess. Again many thanks for your help :) – atoms Jan 09 '14 at 16:51
0

For check value need to use ==

else if ($device_width == 0) {

you may consider js redirect as follows

<head>
<script type="text/javascript">
var x = screen.width;
if (x>=640) {
     window.location="http://www.yoursite.com/withslider.htm";
}
else
{
    window.location="http://www.yoursite.com/withoutslider.htm";
    }
</script>
</head>
user1844933
  • 3,296
  • 2
  • 25
  • 42
  • it doesnt appear to be working? Could have got the code wrong? Would you mind editing your answer to include the whole script? I'm new to all this, sorry. – atoms Jan 09 '14 at 09:17
0

Ok, I have decided to follow Xardas advice.

Here is the working code:

<style> @media screen and (max-width: 640px) {
.slider-content{display: none;}
}</style>

<div class="slider-content"></div>


$(window).width();   // returns width of browser viewport
var width = $(window).width(); 
if (width >= 642)  {
    $('.slider-content').load("/site/slider.php", function () {
        $('.slider-content').show(200);
    });
}

else {
    jQuery.noop()
}

will load "slider.php" if screen width is greater or equal to 642 (where my first media query kicks in).

Thanks for all the help people!

atoms
  • 2,993
  • 2
  • 22
  • 43
0

if you want use cookie (that changed value with JS) in first php page load, you must use setcookie in top of your php code. then cookie is created and can changed value in JS and use in first php page load.

example :

<?php
   setcookie('testCookie', 'testValue', 0, "/");
?>

<script type="javascript">
   document.cookie = "testCookie=123456;path=/";
</script>

<?php
   echo $_COOKIE['testCookie'];// return 123456
?>

in this example if you dont use setcookie in top of php code, in first page load $_COOKIE['TestCookie'] returns null. means php cant reach to value of cookie that changed in javascript (in first page load). this problem dont exist in second page load .

Saeed Abavisani
  • 1
  • 1