Counter change based on device width

Question

I have using this php code for add clearfix div <div class="clearfix"></div> after 6 item in sequence. & it is working fine.

Here, I want to set Counter according to device width. that means, if, device width is more than 1024. So, Counter will calculate 6(add clearfix div after 6 item). & if device width is less than 1024 So. Counter will calculate 4(add clearfix div after 4 item).

I have this code: I have this code:

<?php $counter = 0; ?>
    <?php foreach ($categories as $category) { ?>

<div class="item"></div>
<?php 
        if(++$counter % 6 === 0) { ?>
          <div class="clearfix"></div>
        <?php  
        }
    } 
    ?>

It would look like this:

if device width is > 1024

    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="clearfix"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="clearfix"></div>
    <div class="item"></div>
    <div class="item"></div>

if device width is < 1024

    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="clearfix"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="clearfix"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="clearfix"></div>
    <div class="item"></div>
    <div class="item"></div>

Some help would be appreciated. Thank you!

You can't detect screen width with PHP : http://stackoverflow.com/questions/1504459/getting-the-screen-resolution-using-php You need some Javascript to do that. (Or explain the purpose of your code to find another way to achieve your goal) — ClmentM, Aug 04 '14 at 12:10

score 2 · Accepted Answer · answered Aug 04 '14 at 12:21

PHP runs on server. it doesn't know about the client machine width. howerver JS can get the width of the screen. so here is some trick to solve this

Step1: store width in cookie by JS on client machine when user comes on site by this code

var w = window.innerWidth;
document.cookie="screen_width="+w;

Step2: Now get cookie in php when needed the width of the screen

$screen_width = $_COOKIE['screen_width'];

Step3: Now you can use this width in your php code in the condition

<?php 
    $counter = 0;
    $screen_width = $_COOKIE['screen_width'];

    $limit = 4;
    if($screen_width>1024)
    {
        $limit = 6;
    }

    foreach ($categories as $category){
?>  
    <div class="item"></div>
        <?php 
        if(++$counter % $limit === 0) 
        { 
        ?>
          <div class="clearfix"></div>
        <?php  
        }
    } 
?>

nice way but for the `1st visit` there wont be any cookie named `screen_width` since server side execution takes place first and html is served which sets the cookie. `if its an ajax request it will work in such case too.` — Karan Thakkar, Aug 04 '14 at 12:43

score 1 · Answer 2 · answered Aug 04 '14 at 12:29

You can use this javascript code

I think this will work.

happyCoding :D

score 0 · Answer 3 · edited May 23 '17 at 11:53

0

Actuualy you would need to use javascript property screen.width and screen.height.Php cannot make any role in this.

See more answers and the opinions here

edited May 23 '17 at 11:53

Community

1
1

answered Aug 04 '14 at 12:15

Avinash Babu

5,752
2
17
24

Counter change based on device width

3 Answers3