HTML/CSS Responsive question

Skythrust

Member
Jul 9, 2019
133
7
Hi there!

I am busy with a project to show who's online. Everything is working fine but have some responsivity questions

  • Screen needs to be responsive for all ways of screens
  • If Div is full of blocks that it needs to start a virtual page which will switch per page every x seconds.

Inside my css there is already an @media query started but it doesn't work in the way which I am expect.

The idea is that there is some output (JSON based) every record does have his own TextDiv and based on online = true;false the color is green or grey.

Here the fullcode pasted in Codepen

In the spoilers below 3 screenshots the Windows Screen is the one which is okay. The text inside the blocks is blurred because of the privacy.

You must be registered for see images attach

You must be registered for see images attach

You must be registered for see images attach
 

Weasel

👄 I'd intercept me
Nov 25, 2011
4,128
2,456
I'm not really sure what you mean with "virtual page", what is it exactly what you want to achieve? Going to try to illustrate it. So let's say you have 8 boxes, is this how you want it to be?

Windows:
BOX - BOX - BOX - BOX
BOX - BOX - BOX - BOX

Mobile view:
BOX - BOX
BOX - BOX
BOX - BOX
BOX - BOX
 

Skythrust

Member
Jul 9, 2019
133
7
I'm not really sure what you mean with "virtual page", what is it exactly what you want to achieve? Going to try to illustrate it. So let's say you have 8 boxes, is this how you want it to be?
Windows:
BOX - BOX - BOX - BOX
BOX - BOX - BOX - BOX

Mobile view:
BOX - BOX
BOX - BOX
BOX - BOX
BOX - BOX

That is correct! Like if we say there are 16 records. On the Windows screen all of them will be visible because there is much more screen space. On Mobile view you will see 8 records, if the screen is full that there is a second page which will load after 30 seconds to show to other 8 records. Or when there are 32 records that Windows acts the same that he will show the first 16 records and after 30 seconds the other 16 records.

Windows:
BOX - BOX - BOX - BOX
BOX - BOX - BOX - BOX
BOX - BOX - BOX - BOX
BOX - BOX - BOX - BOX

Mobile view: [PAGE1]
BOX - BOX
BOX - BOX
BOX - BOX
BOX - BOX

Mobile view: [PAGE2]
BOX - BOX
BOX - BOX
BOX - BOX
BOX - BOX
 

Skythrust

Member
Jul 9, 2019
133
7
Already fixed part 1 by using @media
CSS:
@media screen and (max-width: 1280px) { }

Now just only the part if the wrapper is full with boxes to fill a second page

Mobile view: [PAGE1]
BOX1 - BOX2
BOX3 - BOX4
BOX5 - BOX6
BOX7 - BOX8

Mobile view: [PAGE2] (after 30 seconds)
BOX9 - BOX10
BOX11 - BOX12
BOX13 - BOX14
BOX15 - BOX16
Post automatically merged:

I mean like i would like it works as a carrousel

Mobile view: [PAGE1/TAB1]
BOX1 - BOX2
BOX3 - BOX4
BOX5 - BOX6
BOX7 - BOX8

Mobile view: [PAGE2/TAB2] (after 30 seconds)
BOX9 - BOX10
BOX11 - BOX12
BOX13 - BOX14
BOX15 - BOX16

But I have no idea how to realize this.
Post automatically merged:

Back again..

I have found the function where I am looking for. It calls Pagination.
There are a couple option like array_slice() which I have found on StackOverflow.

I have found this code below, but I have no idea where I can call my array.

Array Persons
JSON:
$persons = '[ 
    {"FrstName":"Henry","Middlename":"","LastName":"Walton","Online":true,"DeptId":"4"},
    {"FrstName":"Klaus","Middlename":"","LastName":"Mikaelson","Online":true,"DeptId":"2"},
    {"FrstName":"Kylo","Middlename":"","LastName":"Ren","Online":false,"DeptId":"4"},
    {"FrstName":"Stan","Middlename":"","LastName":"Lee","Online":false,"DeptId":"3"},
    {"FrstName":"Kevin","Middlename":"","LastName":"McNally","Online":false,"DeptId":"3"},
    {"FrstName":"Katherine","Middlename":"","LastName":"Pierce","Online":false,"DeptId":"2"},
    {"FrstName":"Clint","Middlename":"","LastName":"Barton","Online":true,"DeptId":"3"},
    {"FrstName":"Hope","Middlename":"van","LastName":"Dyne","Online":false,"DeptId":"3"}
]';

PHP Code
PHP:
<?php
$page = ! empty( $_GET['page'] ) ? (int) $_GET['page'] : 1;
$total = count( $persons ); //total items in array   
$limit = 20; //per page   
$totalPages = ceil( $total/ $limit ); //calculate total pages
$page = max($page, 1); //get 1 page when $_GET['page'] <= 0
$page = min($page, $totalPages); //get last page when $_GET['page'] > $totalPages
$offset = ($page - 1) * $limit;
if( $offset < 0 ) $offset = 0;

$yourDataArray = array_slice( $persons, $offset, $limit );


$link = 'index.php?page=%d';
$pagerContainer = '<div style="width: 300px;">';   
if( $totalPages != 0 )
{
  if( $page == 1 )
  {
    $pagerContainer .= '';
  }
  else
  {
    $pagerContainer .= sprintf( '<a href="' . $link . '" style="color: #c00"> &#171; prev page</a>', $page - 1 );
  }
  $pagerContainer .= ' <span> page <strong>' . $page . '</strong> from ' . $totalPages . '</span>';
  if( $page == $totalPages )
  {
    $pagerContainer .= '';
  }
  else
  {
    $pagerContainer .= sprintf( '<a href="' . $link . '" style="color: #c00"> next page &#187; </a>', $page + 1 );
  }           
}                   
$pagerContainer .= '</div>';

echo $pagerContainer;
?>

Source:
 
Last edited:

Solar

Member
Jan 24, 2012
135
10
Hello Skythrust,

I've never done a pagination yet with arrays and JSON so I wanted to give my input on it!

Get the JSON file and decode it into an array.
PHP:
$file = file_get_contents("persons.json");
$persons = json_decode($file,true);
//print_r($persons);

The json_decode (above) has an extra parameter "true" to help us iterate through the object (below) easier.

PHP:
$page = ! empty( $_GET['page'] ) ? (int) $_GET['page'] : 1;
$total = count( $persons ); //total items in array
$limit = 2; //per page
$totalPages = ceil( $total/ $limit ); //calculate total pages
$page = max($page, 1); //get 1 page when $_GET['page'] <= 0
$page = min($page, $totalPages); //get last page when $_GET['page'] > $totalPages
$offset = ($page - 1) * $limit;
if($offset < 0) $offset = 0;

$persons = array_slice($persons,$offset,$limit);

foreach($persons as $p){
  echo $p['FrstName'].'<br/>';
}

$link = 'index.php?page=%d';
$pagerContainer = '<div style="width: 300px;">';
if($totalPages != 0){
  if($page == 1){
    $pagerContainer .= '';
  }else{
    $pagerContainer .= sprintf( '<a href="' . $link . '" style="color: #c00"> &#171; prev page</a>', $page - 1 );
  }
  $pagerContainer .= ' <span> page <strong>' . $page . '</strong> from ' . $totalPages . '</span>';
  if($page == $totalPages){
    $pagerContainer .= '';
  }else{
    $pagerContainer .= sprintf( '<a href="' . $link . '" style="color: #c00"> next page &#187; </a>', $page + 1 );
  }
}       
$pagerContainer .= '</div>';

echo $pagerContainer;

I left the pagination almost the same as yours. I would totally do something different but seeing how you're settled on this code, we'll stick to it.

and the persons.json
JSON:
[
[{
        "FrstName": "Henry",
        "Middlename": "",
        "LastName": "Walton",
        "Online": true,
        "DeptId": "4"
    },
    {
        "FrstName": "Klaus",
        "Middlename": "",
        "LastName": "Mikaelson",
        "Online": true,
        "DeptId": "2"
    },
    {
        "FrstName": "Kylo",
        "Middlename": "",
        "LastName": "Ren",
        "Online": false,
        "DeptId": "4"
    },
    {
        "FrstName": "Stan",
        "Middlename": "",
        "LastName": "Lee",
        "Online": false,
        "DeptId": "3"
    },
    {
        "FrstName": "Kevin",
        "Middlename": "",
        "LastName": "McNally",
        "Online": false,
        "DeptId": "3"
    },
    {
        "FrstName": "Katherine",
        "Middlename": "",
        "LastName": "Pierce",
        "Online": false,
        "DeptId": "2"
    },
    {
        "FrstName": "Clint",
        "Middlename": "",
        "LastName": "Barton",
        "Online": true,
        "DeptId": "3"
    },
    {
        "FrstName": "Hope",
        "Middlename": "van",
        "LastName": "Dyne",
        "Online": false,
        "DeptId": "3"
    }
]
]

Hope this helps!
 
Last edited:

Users who are viewing this thread

Top