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..

    CSS Positioning - How can you fix components in place?

    How to separate Text and HTML with CSS

    How to contents of div onclick tab

    How does Twitter put labels inside textboxes?

    How to remove an elements active state when a sub element is clicked

    How to apply CSS to HTML body element?

    How to add a CSS style to a specific node using Greasemonkey? [closed]

    How to Override bootstrap img height and width properties?

    how to place content to the right of the fixed img with css 100% height (no width given)

    How to hide a
    item with CSS?

    How to set % height in fluid layout?

    How do you associate a css/sass stylesheet to a view in rails?

    How to match a comment node with the Jsoup selector api?

    How to animate searchbox length from focusing on the textbox class CSS3?

    How to align the overlay with the list of icons on hover- JS /CSS

    How to override background image defined in CSS with another CSS?

    How can I achieve this transparency effect using css?

    How to horizontally center two divs within a header div?

    How to hide repeated content from search engines with CSS?

    css top nav - left nav (menu), title in center, right side (more buttons) - howto?

    How to allow my CSS slide out element to push its neighboring content?

    How to hide the rest of the contents using simple CSS and Javascript

    How can i include only custom css and js files in rails application

    How can I get an image to always appear to the right of some associated text using HTML and/or CSS?

    css: how to vertically align table within div

    How to make an element with opacity 0 unclickable

    CSS - How to set height of absolute div same with neighbor image?

    How to get the “text-justify:kashida” css property effect on to the arabic text excluding IE browsers

    How to prevent the button from submission the form after sending it?

    How to only make the opacity lower for the background and not the text in it?