I have created following pagination (see image);
here I want to display "Next>>" and "Last" at the end of 28. I cannot change the code to achieve that order because I am using if else block in my PHP code;
Here is the code part;
echo "<ul class='pagination'>";
echo "Page: $page of $last <br>";
echo "Record count: ". $rec_count. "<br>";
echo "Left count: ". $left_rec. "<br>";
echo "Record limit: ". $rec_limit. "<br>";
if( ($page==1) && ($left_rec>0) ){ //this is first page
echo '<li> Next >> <br> </li>';
echo "<li> Last </li>";
}
else if( ($page>1) && ($left_rec>0) ){
echo "<li> First <br> </li>";
echo '<li> << Previous <br> </li>';
echo '<li> Next >> <br> </li>';
echo "<li> Last </li>";
}
else if( ($page>1) && ($left_rec<$rec_limit) ){
echo "<li> First </li>";
echo '<li> << Previous <br> </li>';
}
/* Displaying page numbers (optional) */
for( $i=1; $i<=$last; $i++ ){
if( $i==$page ){
echo "<li> <a class=\"current\" href=\"{$_SERVER['PHP_SELF']}?page=$i\"> $i </a> </li>";
}
else{
echo "<li> $i </li>";
}
}
echo "</ul>";
How can I achieve that using CSS? I have my CSS used so far:
<style>
ul.pagination{
text-align:center;
color:#829994;
}
ul.pagination li{
display:inline;
padding: 0px 3px; /* here we cannot specify padding for top and bottom because inline display does not support margins and
paddings top and bottom*/
}
ul.pagination a{
color:#0d7963;
display:inline-block;
border:1px solid #cde0dc;
margin:3px 0;
padding:5px 10px;
text-decoration: none;
}
ul.pagination a:hover,
ul.pagination a.current{
background:#0d7963;
color:#fff;
}
</style>
Related
I want to generate a list of links to other pages for my website (using a mix of PHP/HTML/CSS) and align them on the right side of the page without them overlapping. I am able to generate the links/pictures, but the problem I am having is they overlap on top of each other when I try to use position absolute.
<style>
body{
background: lightblue;
margin: 25px;
}
.title{
font-size: 20px;
}
.recipe{
width: 60%;
}
.related{
position: absolute;
float: right;
right: 10px;
width: 25%;
list-style-position: inside;
}
.a{
float: right;
right: 5px;
}
.relatedImages{
}img{
width: 15%;
height: 17%;
}
</style>
<title><?php $recipeInfo['title']; ?></title>
<body>
<br>
<?php
//Title and image of recipe
echo '<br><br><div class="title">' .$recipeInfo['title']. '</div><br>
<div class="mainImage"><image src="' . $recipeInfo['image']. '"> </div>
<br><h2> Ingredients </h2>';
//Unfinished (Needs to be styled correctly)
//Generating related links with clickable images
for($r = 0; $r < $relatedLinks[$r]; $r++){
echo '<div class = "related">
<a href = "recipeInfo.php?id='.$relatedLinks[$r]['id']. '">'.$relatedLinks[$r]['title'].'<br>
<image src = "https://spoonacular.com/recipeImages/' . $relatedLinks[$r]['image'] . '"></a>
<br>
</div>';
};
;
//Loop that generates a list of the ingredients used
for($i = 0; $i < $recipeInfo['extendedIngredients'][$i]; $i++){
$amount = $recipeInfo['extendedIngredients'][$i]['amount'];
$unit = $recipeInfo['extendedIngredients'][$i]['unit'];
$ingrName = $recipeInfo['extendedIngredients'][$i]['name'];
echo '<div class = "ingredients">' . $amount , " " , $unit , " " , $ingrName .' </div>';
}
//Instructions with error handling for no instructions found
$instructions = $recipeInfo['instructions'];
if($instructions == ""){
$instructions = "Whoops, there are no available instructions for this recipe.";
}
echo '<br><h2> Insructions </h2>
<div class="recipe">' . $instructions . '</div><br>';
//Unfinished, but will hopefully print a better list of instructions than just a dense paragraph
//for($j = 0; $j < sizeOf($recipeInstr); $j++){
// echo '<h3>' .$recipeInstr[$j]['name'].'</h3>';
// for($n = 0; $n < $recipeInstr[$j]['steps']; $n++){
// echo '<div class="instruction">'. $n , " " , $recipeInstr[$j]['steps'][$n]['step'] . '<div>';
// }
//}
?>
</body>
</html>
The intended effect I am going for is one similar to how youtube has related videos on the right side of the page.
Well cou could try this code:
<body>
<br>
<div class="maincontent">
<div class="main">
<?php
//Title and image of recipe
echo '<br><br><div class="title">' .$recipeInfo['title']. '</div><br>
<div class="mainImage"><image src="' . $recipeInfo['image']. '"> </div>
<br><h2> Ingredients </h2>';
//Loop that generates a list of the ingredients used
for($i = 0; $i < $recipeInfo['extendedIngredients'][$i]; $i++){
$amount = $recipeInfo['extendedIngredients'][$i]['amount'];
$unit = $recipeInfo['extendedIngredients'][$i]['unit'];
$ingrName = $recipeInfo['extendedIngredients'][$i]['name'];
echo '<div class = "ingredients">' . $amount , " " , $unit , " " , $ingrName .' </div>';
}
//Instructions with error handling for no instructions found
$instructions = $recipeInfo['instructions'];
if($instructions == ""){
$instructions = "Whoops, there are no available instructions for this recipe.";
}
echo '<br><h2> Insructions </h2>
<div class="recipe">' . $instructions . '</div><br>';
//Unfinished, but will hopefully print a better list of instructions than just a dense paragraph
//for($j = 0; $j < sizeOf($recipeInstr); $j++){
// echo '<h3>' .$recipeInstr[$j]['name'].'</h3>';
// for($n = 0; $n < $recipeInstr[$j]['steps']; $n++){
// echo '<div class="instruction">'. $n , " " , $recipeInstr[$j]['steps'][$n]['step'] . '<div>';
// }
//}
?>
</div>
<div class="sidelinks">
<?php
//Unfinished (Needs to be styled correctly)
//Generating related links with clickable images
for($r = 0; $r < $relatedLinks[$r]; $r++){
echo '<div class = "related">
<a href = "recipeInfo.php?id='.$relatedLinks[$r]['id']. '">'.$relatedLinks[$r]['title'].'<br>
<image src = "https://spoonacular.com/recipeImages/' . $relatedLinks[$r]['image'] . '"></a>
<br>
</div>';
};
;
</div>
</div>
</body>
</html>
and css code:
<style>
.maincontent {
display: grid;
grid-template-columns: 70% 30%;
}
body{
background: lightblue;
margin: 25px;
}
.title{
font-size: 20px;
}
.recipe{
width: 60%;
}
.related{
list-style-position: inside;
}
.a{
float: right;
right: 5px;
}
.relatedImages{
}img{
width: 15%;
height: 17%;
}
</style>
this should work, i couldnt test it
I have database table with the following columns (id, title, image, text). So far I only have 3 rows they are:
1 Lorem ipsum dolor [Image-Link] [Text is blank here]
2 [title is blank here] [Image-Link] [Text is blank here]
3 Mediocrem voluptaria [Image-Link] detraxit eleifend pr
This is my code:
HTML/PHP
<?php
$resultSet = $db->query("SELECT * FROM table");
if ($resultSet->num_rows != 0)
{
while ($rows = $resultSet->fetch_assoc())
{
$id = $rows["id"];
if ($id <= 3)
{
$images = $rows["image"];
$title = $rows["title"];
echo "<div id=main>";
if ($id == 1)
{
echo "<div id=mainImg>";
echo "<img src=$images>";
echo "<div id=mainTitle>";
echo "<h2>$title</h2>";
echo "</div>";
echo "</div>";
}
echo "<div id=secDiv>";
if ($id == 2)
{
echo "<img id=secImg src=$images>";
}
else
{
echo "<img id=thirdImg src=$images>";
echo "<h2>$title</h2>";
}
echo "</div>";
echo "</div>";
}
}
}
?>
CSS
body{
position: relative;
}
#main{
position: relative;
width: 70%;
height: auto;
margin: 0 auto;
}
#mainImg{
position: absolute;
width: 65%;
}
#mainImg img{
width: 100%;
}
#mainTitle{
position: absolute;
width: 100%;
height: 25%;
bottom: 1.5%;
background-color: rgba(100, 0, 0, 0.7);
}
#mainTitle h2{
color: white;
text-align: center;
font-family: sans-serif;
font-size: 150%;
opacity: 1;
}
#secDiv{
position: absolute;
right: 0%;
top: 0%;
width: 30%;
height: auto;
}
#secImg{
width: 45%;
float: left;
}
#thirdImg{
width: 45%;
float: right;
}
#secDiv h2{
clear: both;
font-size: 12px;
}
The problem that I am having is that the h2 tag in the else statement is printing the first Title and the third title for some reason. Even when the first title got printed already in the first if statement, it still shows up when $id has to be at least 3. What am I doing wrong?
If we go over your code real fast
if ($id <= 3)
{
//Executes for ID: 1, 2 and 3
if ($id == 1)
{
//Executes for ID: 1
}
if ($id == 2)
{
//Executes for ID: 2
}
else
{
//Executes if ID !== 2
//So this part executes for ID: 1 and 3
}
}
If I understand correctly, you want your last else to execute only for the ID 3. In that case you'll need another IF, or better, take a look at PHP's switch statement (http://php.net/manual/en/control-structures.switch.php).
You script that
if $id == 2 them show secImg else show thirdImg. So if $id != 2, thirdImg shows. So also if $id == 1 thirdImg shows. You should use
elseif($id == 3)
Maybe you want a
else if ($id == 2)
instead of
if ($id == 2)
because if Id == 1
if ($id == 1)
{
// go in here
echo "<div id=mainImg>";
echo "<img src=$images>";
echo "<div id=mainTitle>";
echo "<h2>$title</h2>";
echo "</div>";
echo "</div>";
}
echo "<div id=secDiv>";
if ($id == 2)
{
echo "<img id=secImg src=$images>";
}
else
{
// go in here
echo "<img id=thirdImg src=$images>";
echo "<h2>$title</h2>";
}
if Id == 2
if ($id == 1)
{
echo "<div id=mainImg>";
echo "<img src=$images>";
echo "<div id=mainTitle>";
echo "<h2>$title</h2>";
echo "</div>";
echo "</div>";
}
echo "<div id=secDiv>";
if ($id == 2)
{
// go in here
echo "<img id=secImg src=$images>";
}
else
{
echo "<img id=thirdImg src=$images>";
echo "<h2>$title</h2>";
}
if Id == 3
if ($id == 1)
{
// go in here
echo "<div id=mainImg>";
echo "<img src=$images>";
echo "<div id=mainTitle>";
echo "<h2>$title</h2>";
echo "</div>";
echo "</div>";
}
echo "<div id=secDiv>";
if ($id == 2)
{
echo "<img id=secImg src=$images>";
}
else
{
// go in here
echo "<img id=thirdImg src=$images>";
echo "<h2>$title</h2>";
}
Your are using if condition in a wrong manner. Look at this logic:
$id = 1;
if ($id == 1)
echo "id is 1";
if ($id == 2)
echo "id is 2";
else
echo "id is something else";
If you execute the above snippet it will print both "id is 1" and "id is something else". This is because $id=1 matches with the else part of the if ($id == 2).
The logic should be:
if ($id == 1 )
echo "id is 1"
else
if ($id == 2)
echo "id is 2"
else
echo "id is something else"
If you have all three IDs in result than you can also try this:
if($id <= 3){
if($id == 1){
// code here for id 1
}
elseif($id == 2){
// code here for id 2
}
else{
// code if id is not either 1 or 2
}
}
if(!empty($interest)){
foreach ($interest as $key => $value) {
echo "<div style='float:left; height:130px; width:100px; margin-left:10px; border:solid #f8f8f8; background-color: #f8f8f8;'>";
echo "<a class='avatar' href='#'><img width='90' height='40' src=".$value['item_image']."></a>";
echo "<div><i>".$value['item_name']."</i></div>";
echo "<a href='#' style='text-decoration: none; outline: none;'><span class='label label-success' value=".$value['item_id']." id=".$value['item_id']." onClick='reply_click1(this.id)'>Added</span></a>";
echo " </div>";
}
}
this is my code I'm printing images horizontally here but i need to print two images per line !
this is my output .
I need two items per row
i tried to put <hr> and <br> it did not help me ! is there any way to do this?
$counter = 0;
foreach ($interest as $key => $value) {
$counter++;
if($counter%2==0){
echo '<div style="clear:both;"></div>';
}
echo "<div style='float:left; height:130px; width:100px; margin-left:10px; border:solid #f8f8f8; background-color: #f8f8f8;'>";
echo "<a class='avatar' href='#'><img width='90' height='40' src=".$value['item_image']."></a>";
echo "<div><i>".$value['item_name']."</i></div>";
echo "<a href='#' style='text-decoration: none; outline: none;'><span class='label label-success' value=".$value['item_id']." id=".$value['item_id']." onClick='reply_click1(this.id)'>Added</span></a>";
echo " </div>";
}
}
Because you have float:left css property, you must write a <br style="clear:both" />
easy way to define your div width:50% in style or use clear:both in br
I want make a pagination for my articles..
Here is class:
<?php
class Mynews {
public $conn;
public function __construct() {
$this->conn = mysqli_connect("localhost", "root", "", "mynews");
}
public function readAllarticles() {
$sql = "SELECT * FROM articles WHERE status='publish'";
$query = mysqli_query($this->conn, $sql);
return mysqli_fetch_all($query, MYSQLI_ASSOC);
}
}
$obj = new Mynews;
?>
display post: <?php
include('includes/crud.php');
foreach ($obj->readAllarticles() as $art) {
extract($art);
?>
<h3><?php echo $title; ?></h3>
<p>
<?php
$post = explode(" ", $content);
$slice = array_slice($post, 0, 10);
echo implode(" ", $slice), '...';
?>
</p>
<?php
}
?>
Now i want a function my class to make a pagination... and sorry for my bad eng.. :(
You use it:
<?php
class Pagination{
function Paginate($values,$per_page){
$total_values = count($values);
if(isset($_GET['page'])){
$current_page = $_GET['page'];
}else{
$current_page = 1;
}
$counts = ceil($total_values / $per_page);
$param1 = ($current_page - 1) * $per_page;
$this->data = array_slice($values,$param1,$per_page);
for($x=1; $x<= $counts; $x++){
$numbers[] = $x;
}
return $numbers;
}
function fetchResult(){
$resultsValues = $this->data;
return $resultsValues;
}
}
// Sample Usage
$pag = new Pagination();
$data = array("Hello","Rex","Prosper","Adrivan","Hehe");
$numbers = $pag->Paginate($data,2);
$result = $pag->fetchResult();
foreach($result as $r){
echo '<div>'.$r.'</div>';
}
foreach($numbers as $num){
echo ''.$num.'';
}
?>
I use this and it works for me
PHP
function pagination_one($webpage, $total_pages,$page){
// Maximum number of links per page. If exceeded, google style pagination is generated
$max_links = 6;
$h=1;
if($page>$max_links){
$h=(($h+$page)-$max_links);
}
if($page>=1){
$max_links = $max_links+($page-1);
}
if($max_links>$total_pages){
$max_links=$total_pages+1;
}
echo '<div class="page_numbers">
<ul>';
if($page>"1"){
echo '<li class="current">First</li>
<li class="current">Prev</li> ';
}
if($total_pages!=1){
for ($i=$h;$i<$max_links;$i++){
if($i==$page){
echo '<li><a class="current">'.$i.'</a></li>';
}
else{
echo '<li>'.$i.' </li>';
}
}
}
if(($page >="1")&&($page!=$total_pages)){
echo '<li class="current">Next</li>
<li class="current">Last</li>';
}
echo '</ul> </div>';
}
function pagination_one($webpage, $total_pages,$page){
// Maximum number of links per page. If exceeded, google style pagination is generated
$max_links = 6;
$h=1;
if($page>$max_links){
$h=(($h+$page)-$max_links);
}
if($page>=1){
$max_links = $max_links+($page-1);
}
if($max_links>$total_pages){
$max_links=$total_pages+1;
}
echo '<div class="page_numbers">
<ul>';
if($page>"1"){
echo '<li class="current">First</li>
<li class="current">Prev</li> ';
}
if($total_pages!=1){
for ($i=$h;$i<$max_links;$i++){
if($i==$page){
echo '<li><a class="current">'.$i.'</a></li>';
}
else{
echo '<li>'.$i.' </li>';
}
}
}
if(($page >="1")&&($page!=$total_pages)){
echo '<li class="current">Next</li>
<li class="current">Last</li>';
}
echo '</ul> </div>';
}
// get the pagenum. If it doesn't exist, set it to 1
if(isset($_GET['pagenum']) ? $page = $_GET['pagenum']:$page = 1);
// set the number of entries to appear on the page
$entries_per_page = 6;
// total pages is rounded up to nearest integer
$total_pages = ceil($getresult/$entries_per_page);
// offset is used by SQL query in the LIMIT
$offset = (($page * $entries_per_page) - $entries_per_page);
$sql = "SELECT * FROM articles WHERE status='publish' LIMIT $offset,$entries_per_page";
// do your query results
pagination_one('articles.php', $total_pages,$page);
and CSS
.page_numbers {
width:100%;
background:#fff9f0;
overflow:hidden;
position:relative;
padding:50px 0;
}
.page_numbers ul, .pagenums ul {
clear:left;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
left:50%;
text-align:center;
}
.page_numbers ul li,.pagenums ul li {
display:block;
float:left;
list-style:none;
margin:1px;
padding:0;
position:relative;
right:50%;
background: #a8a189;
width:25px;
}
.page_numbers ul li a, .pagenums ul li a {
display:block;
background: #fff;
border: 1px solid #a8a189;
padding:3px 6px;
text-decoration: none;
color: #7a7564;
font:bold 11px arial, verdana,sans-serif;
}
.page_numbers li.current,
.pagenums li.current{
width:50px;
}
.page_numbers a.current, .page_numbers li a:hover,
.pagenums a.current, .pagenums li a:hover {
background: #a8a189;
color: #fff;
}
i have pagination system on my echo results however, the page numbers are being echo'ed underneath eachother
e.g.
1
2 3 4 5
this is my code:
for($i=0;$i < $count1;$i=$i+$limit)
{
if($i <> $start)
{
echo "<a href='view.php?search=$search&start=$i&limit=$limit&price=$price&category=$category'><font face='Verdana' size='2'><b> $l </b></font></a> ";
}
else
{
echo "<center><font face='Verdana' size='4' color=#2E9AFE ><b> $l </b></font></center>";
}
MODIFIED CODE:
$i=0;
$l=1;
echo "<p align='left'>";
for($i=0;$i < $count1;$i=$i+$limit)
{
if($i <> $start)
{
echo '$i';
}
else
{
echo '<span class="current">$i</span>';
}
$l=$l+1;
}
echo "</p>";
}
<?php for($i=0;$i < $count1;$i=$i+$limit): ?>
<?php if($i <> $start): ?>
<a href="view.php?search=<?php echo $search;?>&start=<?php echo $i;?>&limit=<?php echo $limit;?>&price=<?php echo $price;?>&category=<?php echo $category;?>">
<?php echo $i; ?></a>
<?php else: ?>
<span class="current"><?php echo $i;?></span>
<?php endif; ?>
<?php endfor; ?>
CSS:
a,span.current{font-weight:bold;font-family:Verdana;}
All are inline elements, so they'll stay...inline. Add paddings, text-decoration, colors and whatever in your CSS. I could help you to achieve exactly what you want if you are more clear in your intentions (center?). Stay away from old html and tables :)
Here is another way of doing the above, with a few added extras:
$count1 = 10;
$menu = '';
$link = array(
'search' => ( isset($search) ? $search : $search = '' ),
'start' => ( isset($start) ? $start : $start = 0 ),
'limit' => ( isset($limit) ? $limit : $limit = 1 ),
'price' => ( isset($price) ? $price : $price = '' ),
'category' => ( isset($category) ? $category : $category = '' ),
);
foreach( range(0, $count1, $limit) as $i ) {
$menu .= ( ($link['start'] = $i) == $start ?
'<span class="current">'.$i.'</span>' :
''.$i.''
) . PHP_EOL;
}
echo $menu;
(the above requires php5+)
With regards to neeko's comment, to seperate the $start variable from the text displayed in the link - all you have to do is either introduce another variable that counts up with each loop - or, as we already have the key of the range array, we can use that:
foreach( range(0, $count1, $limit) as $key => $i ) {
$menu .= ( ($link['start'] = $i) == $start ?
'<span class="current">Page'.($key+1).'</span>' :
'Page'.($key+1).''
) . PHP_EOL;
}
I've used $key + 1, because $key will be zero-based (i.e. counting up from Zero) but the +1 just shifts things so we count up from 1 instead.
I think it is because center is a block element which means it won't be inline with the other numbers (but that isn't my specialty so I might be wrong. You could put them in a table.
echo "<table><tr>";
for($i=0;$i < $count1;$i=$i+$limit)
{
echo "<td>";
if($i <> $start)
{
echo "<a href='view.php?search=$search&start=$i&limit=$limit&price=$price&category=$category'><font face='Verdana' size='2'><b> $l </b></font></a> ";
}
else
{
echo "<center><font face='Verdana' size='4' color=#2E9AFE ><b> $l </b></font></center>";
}
echo "</td>";
}
echo "</tr></table>";
Try this:
for($i=0;$i < $count1;$i=$i+$limit)
{
if($i <> $start)
{
echo "<a href='view.php?search=$search&start=$i&limit=$limit&price=$price&category=$category'><div style='font-family: verdana; font-size: 12px; font-weight: bold; float: left; position: relative; padding: 5px; margin-right: 5px;'>$l</div></a>";
}
else
{
echo "<div style='font-family: verdana; font-size: 14px; font-weight: bold; float: left; position: relative; color: #2E9AFE; padding: 5px; margin-right: 5px;'>$l</div>";
}
I have changed your html part of code to display in div elements with float: left and some other css tweaks so now it should be placed in one line...