How to let the user choose a page number?


Tags: php,html,css

Problem :

I've added information to some boxes, which are alligned with the 'float' attribute.

The content of all those boxes together is too big to fit in the webpage, so I want to put those boxes on different pages, and to let the user choose which page he wants to view.

E.g: Choose page: 1 2 3... (last page)

The contents of these 'pages' must be in divisions.

For reference, see my css code:

.clear {
clear: both;
}

#over-ons .imagebox,
#over-ons .contentbox
{
background-color: #C4C4A6;
float: left;
margin: 0 10px 40px 0;
padding: 10px;
border: 2px solid black;
}

#over-ons .imagebox {
width: 100px;
text-align: center;
}

#over-ons .contentbox {
width: 200px;
}

Also, see my HTML code of the 'boxes' I mentioned:

<div class="imagebox"><img src="media/images/overons/bas.png" /></div>
<div class="contentbox">
  Function: blablablabla<br />
  Name: blablabla<br />
  City: Breda<br />
  Education: HBO Informatica<br />
</div>

<div class="clear"></div>

How do I create the ability to let the user view 3 different boxes, depending on the page number he wants to see?

Edit:

My current solution looks like this, only nothing happens when I click 'page 2':

<?php
//Vraag pagina op
$page = 1;
if (isset($_POST['page']) && is_numeric($_POST['page']))
$page = $_POST['page'];
?>

<? if ($page == 1) { ?>
<div class="imagebox"><img src="media/images/overons/pieter.png" /></div>
<div class="contentbox">
  Functie: Bedrijfsleider<br />
  Naam: Pieter<br />
  Stad: Deurne<br />
  Opleiding: HBO Informatica<br />
</div>

<div class="clear"></div>

<div class="imagebox"><img src="media/images/overons/patrick.png" /></div>
<div class="contentbox">
  Functie: Verkoper<br />
  Naam: Patrick<br />
  Stad: Roosendaal<br />
  Opleiding: HBO Bedrijfskundige Informatica<br />
</div>

<div class="clear"></div>

<div class="imagebox"><img src="media/images/overons/rick.png" /></div>
<div class="contentbox">
  Functie: Ontwikkelaar<br />
  Naam: Rick Gommers<br />
  Stad: Oosterhout<br />
  Opleiding: HBO Informatica<br />
</div>

<div class="clear"></div>
<? } 
else if ($page == 2) { ?>
<div class="imagebox"><img src="media/images/overons/bas.png" /></div>
<div class="contentbox">
  Functie: Salesmanager<br />
  Naam: Bas<br />
  Stad: Breda<br />
  Opleiding: HBO Informatica<br />
</div>

<div class="clear"></div>

<div class="imagebox"><img src="media/images/overons/robbert.png" /></div>
<div class="contentbox">
  Functie: Administrateur<br />
  Naam: Robbert Tuerlings<br />
  Stad: Goirle<br />
  Opleiding: HBO Bedrijfskundige Informatica<br />
</div>

<div class="clear"></div>    

<div class="imagebox"><img src="media/images/overons/timothee.png" /></div>
<div class="contentbox">
  Functie: Implementatie Technicus<br />
  Naam: Timothee<br />
  Stad: Breda<br />
  Opleiding: HBO Informatica<br />
</div>

<div class="clear"></div>
<? } 
else { ?>
<div class="contentbox">
You didn't select a proper page!
</div>
<? } ?>


Solution :

Imagine your current page is called index.php. So first of all you want to create the links to your pages in your HTML as the following:

<a href="index.php?page=1">Page 1</a>
<a href="index.php?page=2">Page 2</a>
<a href="index.php?page=3">Page 3</a>

And for a clear code you can simply put the content of your "boxes" in an array and then output the corresponding entry for the page:

<?php
   $content = array{ "Page 1 data", "Page 2 data", "Page 3 data" };

   //Fetch the page
   $page = 1;
   if (isset($_GET['page']) && is_numeric($_GET['page']))
      $page = $_GET['page'];
?>
<div class="contentbox">
   <? echo $content[($page - 1)]; ?>
</div>

Another solution (less easy to read and to maintain, but easier if your content is really complex) you can simply fetch the page number and in a regular if else display the box they requested.

<?php
   //Fetch the page
   $page = 1;
   if (isset($_GET['page']) && is_numeric($_GET['page']) && $_GET['page'] > 0)
      $page = $_GET['page'];
?>

<? if ($page == 1) { ?>
<div class="contentbox">
   Your first box for page 1
</div>
<? } 
   else if ($page == 2) { ?>
<div class="contentbox">
   Your second box for page 2
</div>
<? }
   else if ($page == 3) { ?>
<div class="contentbox">
   Your third box for page 3
</div>
<? } 
   else { ?>
<div class="contentbox">
   You didn't select a proper page!
</div>
<? } ?>

But ye, there are 1001 ways to do this. It really depends on your needs and the way you want to do it. The more you hardcode, the uglier the code usually gets.. ;-)


    CSS Howto..

    I want to make a circle graph how to make it in javascript and css

    How to make a hidden border side inherit border properties in CSS

    How to show parts of sprite with CSS keyframes to create animation?

    How to add another text decoration definition with Javascript?

    How to make jquery click() work with css button?

    Bootstrap and CSS: how to make a text area (div) behave like a responsive image

    How do I make background-size work in IE8?

    How to style just one type of input field without also affecting other input types with CSS

    Whats a good way to show large background images on css

    How to make a div align with a specific td on the page?

    How to get a div text from html content

    How can I make the CSS-hover animation to stay?

    How to pick with css multiple select tags that has at least one option selected?

    how to add items into a CSS based text rotator (similar to news ticker)

    How to only use jquery .css() on a specific media query?

    How can I set up my menu to slide out, only when the header is hovered on?

    How to reveal content behind a div with pure css?

    How to handle PNG image loading time in html, css

    how to change css style for every second data (picture) from database?

    How to arrange div structure with radius using CSS

    How do i move an image from left to right and right to left in javascript for infinite time?

    How do I line up my textboxes without using a table? html/css

    How does css scale transform affect document flow?

    How to get website to show better in iPhone and iPad? (width too little)

    How to keep the footer docked at the bottom of the page considering following structure? [duplicate]

    PHP: How to style session output [closed]

    How do I put a clear button inside my HTML text input box like the iPhone does?

    How can I center three tables in a div?

    How to change the font size in table cells according to cells content?

    How to check multiple conditions within a td in Angular table?