How can I insert pagination in my search engine search.php page?
If there is 1 page, I do not want the Previous button and the Next button.
If there are 2 pages and I am on the first page, I hope that I can have the Next button.
If there are 2 pages and I am on the second page, I also hope that I can only have the Previous button.
This is my current code, hope that you can help me:
<?php
//php code goes here
include 'connect.php'; // for database connection
include 'script_suggestion.php';
include 'script_close_suggestion_box.php';
$query = $_GET['q']; // query
$button = $_GET ['submit'];
$page_number = $_GET['page'];
if (!$page_number);
$page_number = 0;
$results_per_page = 10;
$next = $page_number + $results_per_page;
$prev = $page_number - $results_per_page;
?>
<html>
<head>
<title>
Brandon's Search Engine
</title>
<style type="text/css">
#title a {
font-size: 17pt;
margin: 5px;
padding: 2px;
border-color: black;
text-decoration: underline;
width: 544px;
}
#search-result {
display: block;
border: 1px solid grey;
border-color: grey;
}
#search-result:hover {
background-color: #dddddd;
width: 544px;
}
#link {
font-size: 17pt;
margin: 5px;
padding: 2px;
width: 544px;
}
#description {
font-size: 17pt;
margin: 5px;
padding: 2px;
width: 544px;
}
#search-page-number {
display: block;
width: auto;
height: auto;
border: 1px solid gray;
margin: 2px;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 2px;
padding-top: 2px;
list-style: none;
float: left;
text-align: center;
}
#search-page-number:hover {
background-color: #dddddd;
}
#suggestion {
border: 1px solid black;
visibility: hidden;
position: fixed;
background-color: white;
z-index: 10;
}
#suggestion a {
font-size: 12pt;
color: black;
text-decoration: none;
display: block;
width: 548px;
height: auto;
text-align: left;
padding: 2px;
}
#suggestion a:hover {
background-color: #dddddd;
width: 544px;
padding: 2px;
}
</style>
</head>
<body>
<form method="GET" action="search.php">
<table>
<tr>
<td>
<h2>
Brandon's Search Engine
</h2>
</td>
</tr>
<tr>
<td>
<input type="text" value="<?php echo htmlspecialchars($_GET['q']); ?>" name="q" style="height: 27px; width: 550px; padding: 2px" name="q"
onkeyup="getSuggestion(this.value)" autocomplete="off" onblur="closeBox()" placeholder="Search Now"/>
<input type="submit" value="Search" name="submit" style="height: auto; width: 60px; padding: 2px" />
<div id="suggestion" style="width: 548px">
</div>
</td>
</tr>
</table>
<br>
<hr>
<table>
<tr>
<td>
<?php
//SQL query
$stmt = "SELECT * FROM searchengine WHERE title LIKE '%" . mysqli_real_escape_string($con,$query) . "%' OR keywords LIKE '%" . mysqli_real_escape_string($con,$query) . "%' OR link LIKE '%" . mysqli_real_escape_string($con,$query) . "%' LIMIT " . $page_number . " , $results_per_page";
$result = mysqli_query($con,$stmt) or die(mysqli_error($con));
$number_of_result = mysqli_num_rows($result);
$x++;
if($x==1)
if ($number_of_result < 1) {
echo "<b>No results found!</b>";
echo "<p>";
echo "Your search - <b>$query</b>" . " - did not match any documents. Please try different keywords.";
} elseif ($number_of_result > 1) {
echo "<b>$number_of_result results found!</b>";
echo "<p>";
//results found here and display them
$index = 1;
while (($row = \mysqli_fetch_assoc($result)) && ($index < 10)) {//10 results per page
$title = $row["title"];
$description = $row["description"];
$link = $row["link"];
echo "<div id='search-result'>";
echo "<div id='title'><a href='$link'>" . $title . "</a></div>";
//echo "<br />";
echo "<div id='link'><small>" . $link . "</small></div>";
//echo "<p>";
echo "<div id='description'><small>" . $description . "</small></div>";
echo "</div>";
echo "<br />";
$index++;
}
} elseif ($number_of_result = 1) {
echo "<b>$number_of_result result found!</b>";
echo "<p>";
//results found here and display them
$index = 1;
while (($row = \mysqli_fetch_assoc($result)) && ($index < 10)) {//10 results per page
$title = $row["title"];
$description = $row["description"];
$link = $row["link"];
echo "<div id='search-result'>";
echo "<div id='title'><a href='$link'>" . $title . "</a></div>";
//echo "<br />";
echo "<div id='link'><small>" . $link . "</small></div>";
echo "<br />";
echo "<div id='description'><small>" . $description . "</small></div>";
echo "</div>";
echo "<br />";
$index++;
}
}
?>
</td>
</tr>
<tr>
<td>
<input type="hidden" name="page" value="<?php echo 1; ?>" />
<div id="page-number">
Select Page Number:
<?php
//ie if 35 results are therer then we require 4 pages that are 0 to max_page_number
//current page number is equal to page_number
$max_page_number = $number_of_result / 10;
//echo $max_page_number;
echo "<ul>";
//both the condition are not the neccesary
if(!$page_number <= 0)
{
//print the link to previous page
echo "<li id='search-page-number'>";
echo "Previous";
echo "</li>";
}
$i = 1;
for($index = 0; $index < $number_of_result; $index=$index+$results_per_page)
{
echo "<li id='search-page-number'>";
echo "<a href=search.php?q=$query&page=$i>";
echo $i++ . "</a>";
echo "</li>";
}
if($page_number < $number_of_result - $results_per_page)
{
//print the link to next page
echo "<li id='search-page-number'>";
echo "Next";
echo "</li>";
}
echo "</ul>";
?>
</div>
</td>
</tr>
<tr>
<td align="center">
To insert your site in result fill in the form at here.
</td>
</tr>
</table>
</form>
</body>
</html>
Thanks in advance.
<?php
//php code goes here
include 'connect.php'; // for database connection
include 'script_suggestion.php';
include 'script_close_suggestion_box.php';
$query = $_GET['q']; // query
$button = $_GET ['submit'];
$page_number = (int)$_GET['page'];
if (!$page_number)
$page_number = 0;
$results_per_page = 10;
$next = $page_number + $results_per_page;
$prev = $page_number - $results_per_page;
?>
<html>
<head>
<title>
Brandon's Search Engine
</title>
<style type="text/css">
#title a {
font-size: 17pt;
margin: 5px;
padding: 2px;
border-color: black;
text-decoration: underline;
width: 544px;
}
#search-result {
display: block;
border: 1px solid grey;
border-color: grey;
}
#search-result:hover {
background-color: #dddddd;
width: 544px;
}
#link {
font-size: 17pt;
margin: 5px;
padding: 2px;
width: 544px;
}
#description {
font-size: 17pt;
margin: 5px;
padding: 2px;
width: 544px;
}
#search-page-number {
display: block;
width: auto;
height: auto;
border: 1px solid gray;
margin: 2px;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 2px;
padding-top: 2px;
list-style: none;
float: left;
text-align: center;
}
#search-page-number:hover {
background-color: #dddddd;
}
#suggestion {
border: 1px solid black;
visibility: hidden;
position: fixed;
background-color: white;
z-index: 10;
}
#suggestion a {
font-size: 12pt;
color: black;
text-decoration: none;
display: block;
width: 548px;
height: auto;
text-align: left;
padding: 2px;
}
#suggestion a:hover {
background-color: #dddddd;
width: 544px;
padding: 2px;
}
</style>
</head>
<body>
<form method="GET" action="search.php">
<table>
<tr>
<td>
<h2>
Brandon's Search Engine
</h2>
</td>
</tr>
<tr>
<td>
<input type="text" value="<?php echo htmlspecialchars($_GET['q']); ?>" name="q" style="height: 27px; width: 550px; padding: 2px" name="q"
onkeyup="getSuggestion(this.value)" autocomplete="off" onblur="closeBox()" placeholder="Search Now"/>
<input type="submit" value="Search" name="submit" style="height: auto; width: 60px; padding: 2px" />
<div id="suggestion" style="width: 548px">
</div>
</td>
</tr>
</table>
<br>
<hr>
<table>
<tr>
<td>
<?php
//count
$count_sql = "SELECT count(*) as c FROM searchengine WHERE title LIKE '%" . mysqli_real_escape_string($con,$query) . "%' OR keywords LIKE '%" . mysqli_real_escape_string($con,$query) . "%' OR link LIKE '%" . mysqli_real_escape_string($con,$query) . "%' ";
$search_count = mysqli_fetch_array(mysqli_query($con,$count_sql));
$number_of_result = $search_count['c'];
//SQL query
$stmt = "SELECT * FROM searchengine WHERE title LIKE '%" . mysqli_real_escape_string($con,$query) . "%' OR keywords LIKE '%" . mysqli_real_escape_string($con,$query) . "%' OR link LIKE '%" . mysqli_real_escape_string($con,$query) . "%' LIMIT " . $page_number . " , $results_per_page";
$result = mysqli_query($con,$stmt) or die(mysqli_error($con));
//$number_of_result = mysqli_num_rows($result);
$x++;
if($x==1)
if ($number_of_result < 1) {
echo "<b>No results found!</b>";
echo "<p>";
echo "Your search - <b>$query</b>" . " - did not match any documents. Please try different keywords.";
} elseif ($number_of_result > 1) {
echo "<b>$number_of_result results found!</b>";
echo "<p>";
//results found here and display them
$index = 1;
while (($row = \mysqli_fetch_assoc($result)) && ($index < 10)) {//10 results per page
$title = $row["title"];
$description = $row["description"];
$link = $row["link"];
echo "<div id='search-result'>";
echo "<div id='title'><a href='$link'>" . $title . "</a></div>";
//echo "<br />";
echo "<div id='link'><small>" . $link . "</small></div>";
//echo "<p>";
echo "<div id='description'><small>" . $description . "</small></div>";
echo "</div>";
echo "<br />";
$index++;
}
} elseif ($number_of_result == 1) {
echo "<b>$number_of_result result found!</b>";
echo "<p>";
//results found here and display them
$index = 1;
while (($row = \mysqli_fetch_assoc($result)) && ($index < 10)) {//10 results per page
$title = $row["title"];
$description = $row["description"];
$link = $row["link"];
echo "<div id='search-result'>";
echo "<div id='title'><a href='$link'>" . $title . "</a></div>";
//echo "<br />";
echo "<div id='link'><small>" . $link . "</small></div>";
echo "<br />";
echo "<div id='description'><small>" . $description . "</small></div>";
echo "</div>";
echo "<br />";
$index++;
}
}
?>
</td>
</tr>
<tr>
<td>
<input type="hidden" name="page" value="0" />
<div id="page-number">
Select Page Number:
<?php
//ie if 35 results are therer then we require 4 pages that are 0 to max_page_number
//current page number is equal to page_number
$max_page_number = ceil($number_of_result / $results_per_page);
//echo $max_page_number;
echo "<ul>";
//both the condition are not the neccesary
if ($max_page_number > 2) { // if more than 2 pages
if ($page_number > 0 ) { //Previous
echo "<li id='search-page-number'>";
echo "Previous";
echo "</li>";
}
for($index = 0 ; $index < $max_page_number ; $index++)
{
echo "<li id='search-page-number'>";
echo "<a href=search.php?q=$query&page=".($index * $results_per_page).">";
echo ($index + 1) . "</a>";
echo "</li>";
}
if (($page_number + $results_per_page) < $number_of_result ) { //Next
echo "<li id='search-page-number'>";
echo "Next";
echo "</li>";
}
} elseif (($max_page_number == 2 ) ) {
echo "<li id='search-page-number'>";
echo "".($page_number == 0 ? "Next":"Previous" )."";
echo "</li>";
} elseif (($max_page_number == 1 ) ) {
echo "<li id='search-page-number'>";
echo "<a href=search.php?q=$query&page=0>1</a>";
echo "</li>";
}
echo "</ul>";
?>
</div>
</td>
</tr>
<tr>
<td align="center">
To insert your site in result fill in the form at here.
</td>
</tr>
</table>
</form>
</body>
</html>
Related
I'm developing a webpage that has many forms with some text close to form. This form and text are generated by a function, but I get this
As you can see the forms and the text are not aligned with forms and text below. I would like to have this:
(this work because I put spaces manually). This is how I create forms.
function add_form($product,$name,$productp)
{
$productpt = "X";
echo $name;
echo '<input type="text" name="'. $product. '" id="'. $product. '" style="font-size:12pt;height:30px"/> x'.$productp. '€
price:'.$productpt.'€<br>';
}
echo '<form method="post" name="form1" id="form1" autocomplete="off">'; //start form
echo '<div class="leftpane">'; //start leftpane
echo '<h1>';
echo '<font size="6" color="red"> ALIMENTS </font><br>';
//ADD ELEMENTS IN MY MENU
//The first argument is the form name and id, the second is the name that will be printed(to the left of the form), the third argument is the price.
$menu[] = new Menu("pasta", "Pasta", 2);
$menu[] = new Menu("spaghetti", "Spaghetti", 1.50);
$menu[] = new Menu("pizza", "Pizza", 5);
$menu[] = new Menu("chicken_wings_x4", "Chicken Wings X4", 4.50);
$menu[] = new Menu("cheeseburger", "Cheeseburger", 6);
$menu[] = new Menu("Sandwich", "Sandwich", 2);
$menu[] = new Menu("hamburger", "Hamburger", 4.50);
$menu[] = new Menu("stuff", "stuff", 15.50);
//FOR EACH ELEMENT CREATE A FORM
for($i=0; $i<count($menu); $i++){
add_form($menu[$i]->form_name, $menu[$i]->name, $menu[$i]->price);
}
echo '</h1>';
echo '</div>'; //Close leftpane
...Do Others stuff in middlepane and in rightpane
To be clearer in html, for example the first form will be:
<input type="text" name="pasta" id="pasta" style="font-size:12pt;height:30px"/> x2€ price:X€<br>
I thought to divide in 3 parts my leftpane and to place $name to the left, the form to the middle and the price to the right. But the problem is that i create form in function, so I do not know how to do it.
This is my css:
<style>
input[type=text] {
width: 10%;
margin: 7.5px 0;
box-sizing: border-box;
}
input[type=submit].class1 {
width: 50%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
input[type=submit].class2 {
width: 50%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
body, html {
width: 100%;
height: 100%;
margin: 0;
}
.container {
width: 100%;
height: 100%;
}
.leftpane {
width: 33%;
height: 100%;
float: left;
border-collapse: collapse;
}
.middlepane {
width: 33%;
height: 100%;
float: left;
border-collapse: collapse;
}
.rightpane {
width: 33%;
height: 100%;
position: relative;
float: right;
border-collapse: collapse;
}
form {
display: inline-block;
}
h1 {
font-size: 19.5px;
}
</style>
I would suggest you to use a table. https://www.w3schools.com/html/html_tables.asp
Or you could wrap every section into a div-container and define its width.
I think your output code would really benefit from some additional HTML structure with classes that allow you to control their layout in a consistent way with CSS. I would update the add_form() function:
function add_form($product,$name,$productp) {
$productpt = "X";
echo '<div class="form-wrap">';
echo '<span class="form-name">' . $name . '</span>';
echo '<input type="text" name="'. $product. '" id="'. $product. '"/> <span class="form-label">x'.$productp. '€</span> <span class="form-price">price:'.$productpt.'€</span>';
echo '</div>';
}
Then with the output having more targetable HTML structure you can do this with CSS:
.form-wrap input {
font-size: 12pt;
height: 30px
}
.form-name {
display: inline-block;
width: 100px;
margin-right: 20px;
}
.form-label {
display: inline-block;
margin-left: 5px;
margin-right: 20px;
}
<div class="form-wrap">
<span class="form-name">Something</span>
<input type="text" name="something" id="somethingId" />
<span class="form-label">x1€</span>
<span class="form-price">price:1€</span>
</div>
<div class="form-wrap">
<span class="form-name">Another one</span>
<input type="text" name="anotherone" id="somethingId2" />
<span class="form-label">x2€</span>
<span class="form-price">price:2€</span>
</div>
<div class="form-wrap">
<span class="form-name">Number Three</span>
<input type="text" name="thirdone" id="somethingId3" />
<span class="form-label">x3€</span>
<span class="form-price">price:3€</span>
</div>
Try this.
function add_form($product,$name,$productp)
{
$productpt = "X";
echo "<table><tr>";
echo "<td width='20%'>" . $name . "</td>";
echo "<td width='20%'><input type='text' name='". $product . "' id='" . $product . "' style='font-size:12pt;height:30px;' /></td>";
echo "<td width='20%'>x" . $productp . "€</td>";
echo "<td width='20%'>price:" . $productpt . "€</td>";
echo "</tr></table>";
}
I have a table called idean5 which has my data.And i'm displaying that data using php on my webpage ,now i want to add a tick box for each row of my data,actually i want to move particular rows from this table idean5 to other table called idean4. so when some one ticks the boxes and click on a move hyperlink button.this data should be moved.
code for this:
<?php
include('db.php');
require_once('auth.php'); //include of db config file
include ('paginate.php'); //include of paginat page
$per_page = 15; // number of results to show per page
$result = mysql_query("SELECT * FROM idean5");
$total_results = mysql_num_rows($result);
$total_pages = ceil($total_results / $per_page);//total pages we going to have
//-------------if page is setcheck------------------//
if (isset($_GET['page'])) {
$page = intval($_GET['page']);
if ($page <= 0){
$page = 1;}
$show_page = $_GET['page']; //it will telles the current page
if ($show_page > 0 && $show_page <= $total_pages) {
$start = ($show_page - 1) * $per_page;
$end = $start + $per_page;
} else {
// error - show first set of results
$start = 0;
$end = $per_page;
}
} else {
// if page isn't set, show first set of results
$start = 0;
$end = $per_page;
}
// display pagination
$tpages=$total_pages;
?>
<!DOCTYPE html>
<html>
<head>
<style>
body { background: #eee url() no-repeat center 0px; padding-top:5px;}
ul {
list-style-type: none;
margin: center;
padding: center;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: green;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/style.css" />
<style type="text/css">
.logo
{
text-align: center;
}
.container{
}
</style>
<h3 align="right">WELCOME <?php echo $_SESSION['SESS_FIRST_NAME'];?>!</h3>
</head>
<body>
<ul>
<li>REQUEST FOR TND</li>
<li class="dropdown">
UPLOAD TND
<div class="dropdown-content">
TND REQUESTS
UPLOAD TND
</div>
</li>
<li>STATUS SEARCH</li>
<li>SEARCH</li>
<li>APPROVAL</li>
<li>LOGOUT</li>
</ul>
<div class="container">
<div class="row">
<div class="logo">
</a>
</div>
</div>
<div class="row">
<?php
$reload = $_SERVER['PHP_SELF'] . "?tpages=" . $tpages;
echo '<div class="pagination"><ul>';
if ($total_pages > 1) {
echo paginate($reload, $show_page, $total_pages);
}
echo "</ul></div>";
// display data in table
echo "<table border='1'>
<tr>
<th>TND ID</th>
<th>Site Name S1</th>
<th>Site Name S2</th>
<th>Idea ID S1</th>
<th>Idea ID S2</th>
<th>O N M Remarks</th>
<th>Planning Remarks</th>
<th>Projects Remarks</th>
</tr>";
// loop through results of database query, displaying them in the table
for ($i = $start; $i < $end; $i++) {
// make sure that PHP doesn't try to show results that don't exist
if ($i == $total_results) {
break;
}
// echo out the contents of each row into a table
echo "<tr>";
echo '<td>' . mysql_result($result, $i, 'TND_ID') . '</td>';
echo '<td>' . mysql_result($result, $i, 'Site_name_S1') . '</td>';
echo '<td>' . mysql_result($result, $i, 'Site_name_S2') . '</td>';
echo '<td>' . mysql_result($result, $i, 'Idea_ID_S1') . '</td>';
echo '<td>' . mysql_result($result, $i, 'Idea_ID_S2') . '</td>';
if (mysql_result($result, $i, 'O_M_Remarks')) {
echo '<td>' . mysql_result($result, $i, 'O_M_Remarks').'</td>';
}
else {
echo '<td>' . mysql_result($result, $i, 'O_M_Remarks') . 'O N M remarks </td>';
}
if (mysql_result($result, $i, 'Planning_Remarks')) {
echo '<td>' . mysql_result($result, $i, 'Planning_Remarks').'</td>';
}
else {
echo '<td>' . mysql_result($result, $i, 'Planning_Remarks') . 'Planning remarks </td>';
}
if (mysql_result($result, $i, 'O_M_Remarks')) {
echo '<td>' . mysql_result($result, $i, 'Projects_Remarks').'</td>';
}
else {
echo '<td>' . mysql_result($result, $i, 'Projects_Remarks') . 'Projects remarks </td>';
}
echo "</tr>";
}
// close table>
echo "</table>";
// pagination
?>
</div>
</div>
</div>
</div>
</body>
</html>
In "//echo out the contents of each row into a table" portion. try this at this.
<td>input type="checkbox"></td>
For loop will automatically add checkbox in each row.
I'm developing an application that contains a table made by div. The divs are filled according to the results database.
As you can see in the image below.
However, if I put one more item on the bench, just disrupting the entire table. What I would do is to put a rod horizontally so that it could rotate it and so see the other items in the database without messing up the structure.
CODE
CSS
#fundo {
display: block;
height: 550px;
margin-left: -3%;
overflow: scroll;
overflow-y: hidden;
width: 1150px;
}
.vacina, .dose, .aplicacao {
background-color: #D3D3D3;
border-radius: 5px;
float: left;
height: 90px;
margin-top: 6px;
margin-left: 6px;
position: relative;
width: 100px;
}
.vacina {
height: 50px;
}
PHP
include_once ("db.php");
$sql = "SELECT nomeVacina FROM vacina ORDER BY cod";
$ds1=mysql_query($sql);
if ($ds1) {
if (mysql_num_rows($ds1) > 0) {
$x = 0;
///////////////////////////////////////////////
////////////////// DIV VACINA /////////////////
while($linha=mysql_fetch_assoc($ds1)) {
$x++;
if(!($linha['nomeVacina'] == "Outras")) {
echo "<div class='vacina' id='".$x."'>";
echo "<br>".$linha['nomeVacina'];
echo "</div>";
}
}
}
///////////////////////////////////////////////
////////////////// FIM DIV VACINA /////////////
///////////////////////////////////////////////
////////////////// DIV DOSE ///////////////////
for($i = 1; $i < 6; $i++) {
echo "<br><br><br><br><br><br>";
echo "<div class='dose'>";
if($i == 4 || $i == 5) {
echo "<br>Reforco";
}
else {
echo "<br>Dose ".$i;
}
echo "</div>";
///////////////////////////////////////////////
////////////////// FIM DIV DOSE ///////////////
///////////////////////////////////////////////
////////////////// DIV APLICACAO //////////////
$z=0;
for($j = 1; $j <= $x; $j++) {
$sql2 = "SELECT DATE_FORMAT(dataAplicacao, '%d/%m/%Y') AS dataAplicacao, loteVacina, descricaoVacina FROM vacinaaplicada WHERE dose = ".$i." AND codigoVacina = ".$j." AND codPaciente = '".$cns."'";
$ds2=mysql_query($sql2);
$linha2=mysql_fetch_assoc($ds2);
$z++;
echo "<div class='aplicacao' id='".$z.$i."'>";
if($linha2 == "") {
echo "";
}
else {
echo "<div style='margin-top:10px;'>". $linha2['descricaoVacina']."<div class='fonte'><b>Data</b><br></div>". $linha2['dataAplicacao'] . "<div class='fonte'><b>Lote</b><br></div>".$linha2['loteVacina']."</div>" ;
}
echo "</div>";
}
///////////////////////////////////////////////
////////////////// FIM DIV APLICACAO /////////////
}
As you can see in the previous image, has 9 div class Vacina.
If I add a div class Vacina the most, will mess up the table.
What I'd like is to insert more than 9 div class Vacina causing the background div (div class includes all div) increase in width, but leaving it the same way the image, just putting a scroll bar horizontally to display whole div.
If I understood you correctly, I'd try this:
To #fundo, add
white-space: nowrap;
And I replaced float: left; with:
display: inline-block;
Maybe that's what you're looking for.
EDIT:
Okay, I've built an example from scratch (but using javascript, not php, I can't test php atm): JSFiddle.
It's a bit messy but you should be able to code it in PHP if you like to.
Let me know if you've got trouble with this.
EDIT 2:
Just to have it in the answer (not just in its comments), the final solution is: this JSFiddle.
HTML + PHP
<?php
include_once("sessao.php");
if (!isset($_SESSION['funcionario']['cpfFuncionario'])) {
header("Location:index.html");
}
else if($_SESSION['funcionario']['adicionarDireito'] == 0) {
header("Location:funcionario.php");
}
?>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"></script>
<title>Vacina Digital - Cadastrar Vacinação</title>
<script type="text/javascript" src="template/js/script.js"></script>
<link rel="stylesheet" href="template/css/reset.css">
<link rel="stylesheet" href="template/css/fonts.css">
<style>
body {
background-color: #fdfdfd;
overflow-y: auto;
}
#form {
margin-left: 50px;
padding-left: 7%;
padding-top: 50px;
padding-bottom: 10px;
margin-right: 50px;
border: 1px solid #0F935A;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-moz-box-shadow: 2px 2px 2px #cccccc;
-webkit-box-shadow: 2px 2px 2px #cccccc;
box-shadow: 2px 2px 2px #cccccc;
}
#form h1 {
text-align: center;
margin-right: 150px;
font-family: "RobotoCondensed";
font-size: 30px;
}
</style>
</head>
<body>
<?php
include_once 'menufuncionario.php';
?>
<div id="form">
<fieldset>
<?php
include_once("db.php");
if(isset($_POST['cns'])) {
$cns = $_POST['cns'];
$_SESSION['paciente'] = $cns;
}
else{
$cns = $_SESSION['paciente'];
}
$sql = "SELECT *, DATE_FORMAT(dataNascimento, '%d/%m/%Y') AS 'data' FROM populacao WHERE codigoCns = ".$cns;
$ds1=mysql_query($sql);
if ($ds1) {
if (mysql_num_rows($ds1) > 0) {
$sql2 = "SELECT * FROM vacinaaplicada WHERE codPaciente = ".$cns;
$ds2 = mysql_query($sql2);
$linha=mysql_fetch_assoc($ds2);
$linha2=mysql_fetch_assoc($ds1);
$data_nasc = $linha2['data'];
$data_nasc=explode("/",$data_nasc);
$data=date("d/m/Y");
$data=explode("/",$data);
$anos=$data[2]-$data_nasc[2];
if ($data_nasc[1] > $data[1]) {
$anos = $anos-1;
} if ($data_nasc[1] == $data[1]) {
if ($data_nasc[0] <= $data[0]) {
$anos = $anos;
} else {
$anos = $anos-1;
}
} if ($data_nasc[1] < $data[1]) {
$anos = $anos;
}
$data2=date("d/m/Y");
echo "<h1>Carteira de Vacinação - ".$linha2['nomeCrianca']."</h1>";
/*echo "
<div id='caderneta' style='margin-left:-6%'>
";*/
include_once 'caderneta.php';
echo "
</div>";
} else {
echo "<h1>CNS Inválido</h1><br><br>
<center><a href='javascript:window.history.go(-1)'><button style='margin-left:-150px' class='button button-red' href='javascript:window.history.go(-1)'>Voltar</button></a></center>
";
}
}
?>
</div>
</body>
</html>
Caderneta
<html>
<head>
<link rel="stylesheet" href="template/css/fonts.css">
<style type="text/css">
#fundo {
min-width: 800px;
display: block;
overflow: scroll;
overflow-y: hidden;
margin-left: -3%;
height: 550px;
white-space: nowrap;
}
#pinguim, .vacina, .dose, .aplicacao {
width: 100px;
height: 90px;
background-color: #D3D3D3;
margin-top: 6px;
margin-left: 6px;
border-radius: 5px;
position: relative;
float: left;
}
#pinguim, .vacina {
height: 50px;
}
.vacina, .dose{
background: green;
font-family: RobotoCondensed;
font-size: 14pt;
text-align: center;
color: #ffffff;
}
.vacina{
padding-top: -14px;
line-height: 15px;
}
.dose, .aplicacao{
margin-top: -32px;
}
.dose{
line-height: 29px;
}
.aplicacao, .fonte {
font-family: "RobotoLight";
text-align: center;
}
</style>
</head>
<body>
<div id = "fundo">
<div id = "pinguim">
</div>
<?php
include_once ("db.php");
$sql = "SELECT nomeVacina FROM vacina ORDER BY cod";
$ds1=mysql_query($sql);
if ($ds1) {
if (mysql_num_rows($ds1) > 0) {
$x = 0;
$k = 0;
while($linha=mysql_fetch_assoc($ds1)) {
$x++;
if(!($linha['nomeVacina'] == "Outras")) {
echo "<div class='vacina' id='".$x."'>";
echo "<br>".$linha['nomeVacina'];
echo "</div>";
}
}
for($i = 1; $i < 6; $i++) {
echo "<br><br><br><br><br><br>";
echo "<div class='dose'>";
if($i == 4 || $i == 5) {
echo "<br>Reforco";
}
else {
echo "<br>Dose ".$i;
}
echo "</div>";
$z=0;
for($j = 1; $j <= $x; $j++) {
$sql2 = "SELECT DATE_FORMAT(dataAplicacao, '%d/%m/%Y') AS dataAplicacao, loteVacina, descricaoVacina FROM vacinaaplicada WHERE dose = ".$i." AND codigoVacina = ".$j." AND codPaciente = '".$cns."'";
$ds2=mysql_query($sql2);
$linha2=mysql_fetch_assoc($ds2);
$z++;
echo "<div class='aplicacao' id='".$z.$i."'>";
if($linha2 == "") {
echo "";
}
else {
echo "<div style='margin-top:10px;'>". $linha2['descricaoVacina']."<div class='fonte'><b>Data</b><br></div>". $linha2['dataAplicacao'] . "<div class='fonte'><b>Lote</b><br></div>".$linha2['loteVacina']."</div>" ;
}
echo "</div>";
}
}
echo"</div>";
}
}
?>
</div>
</div>
</body>
</html>
I have a comment system, it works by adding a row to a SQL database. Anyway That works, but then when I echo out the comment div gets all messed up.. Anyway here is the page it is on: http://learntc.net/index.php.
PHP:
while($row = mysql_fetch_array($result))
{
if ($count==1)
{
$bg == "33383C" ;
$count = 0;
}
echo "<div style='background-color: $bg; border: 1px soild silver;' class='comment'>";
echo "<div class='imageAndName'>";
echo "<img src='". $row["image"] ."' class='cPic'/>";
echo "<div class='UserLink'><a href='" . $row["page"] . "'>" . $row["username"] . "</a></div>";
echo "</div>";
echo "<div class='textStuff'>";
echo "<div class='post'>" . $row["comment"] . "</div>";
echo "<div style='color: gray; font-size: 8px'>" . $row["date"] . "</div>";
echo "</div>";
echo "</div>";
$bg = "#282C2F";
$count = $count + 1;
}
CSS:
.comments{
float: right;
padding: 10px;
width: 50%;
border: 1px solid #454D53;
}
.cPic{
width: 60px;
height: 60px;
}
.imageAndName{
width: 30%;
overflow: hidden;
float: left
}
.imageAndName a{
display: block;
}
.textStuff{
width: 70%;
float: right;
}
.post{
overflow: hidden;
width: 100%;
}
.comment{
padding-bottom: 5px;
}
Add clear: both to your .comment style.
Problem one:
$bg == "33383C" ;
should be
$bg = "#33383C";
I don't see anything else. The div is probably screwed up for this reason.
two questions:
--1-- it displays all the number of pages. but i'd like it to display as:
<< Prev . . 3 4 [5] 6 7 . . Next >>
--2-- when i hover on the current page no, it should change color or increase the font-size, but when i modify the css of a:hover, all the page nos change color or size instead of the one which i'm pointing to. also, when modifying a:active, nothing happens.
this is my paging code in php:
$self = $_SERVER['PHP_SELF'];
$limit = 2; //Number of results per page
$numpages=ceil($totalrows/$limit);
$query = $query." ORDER BY idQuotes LIMIT " . ($page-1)*$limit . ",$limit";
$result = mysql_query($query, $conn)
or die('Error:' .mysql_error());
?>
<div class="caption">Search Results</div>
<div class="center_div">
<table>
<?php while ($row= mysql_fetch_array($result, MYSQL_ASSOC)) {
$cQuote = highlightWords(htmlspecialchars($row['cQuotes']), $search_result);
?>
<tr>
<td style="text-align:right; font-size:15px;"><?php h($row['cArabic']); ?></td>
<td style="font-size:16px;"><?php echo $cQuote; ?></td>
<td style="font-size:12px;"><?php h($row['vAuthor']); ?></td>
<td style="font-size:12px; font-style:italic; text-align:right;"><?php h($row['vReference']); ?></td>
</tr>
<?php } ?>
</table>
</div>
<div class="searchmain">
<?php
//Create and print the Navigation bar
$nav="";
$next = $page+1;
$prev = $page-1;
if($page > 1) {
$nav .= "<span class=\"searchpage\"><a onclick=\"showPage('','$prev'); return false;\" href=\"$self?page=" . $prev . "&q=" .urlencode($search_result) . "\">< Prev</a></span>";
$first = "<span class=\"searchpage\"><a onclick=\"showPage('','1'); return false;\" href=\"$self?page=1&q=" .urlencode($search_result) . "\"> << </a></span>" ;
}
else {
$nav .= " ";
$first = " ";
}
for($i = 1 ; $i <= $numpages ; $i++) {
if($i == $page) {
$nav .= "<span class=\"searchpage\">$i</span>";
}else{
$nav .= "<span class=\"searchpage\"><a onclick=\"showPage('',$i); return false;\" href=\"$self?page=" . $i . "&q=" .urlencode($search_result) . "\">$i</a></span>";
}
}
if($page < $numpages) {
$nav .= "<span class=\"searchpage\"><a onclick=\"showPage('','$next'); return false;\" href=\"$self?page=" . $next . "&q=" .urlencode($search_result) . "\">Next ></a></span>";
$last = "<span class=\"searchpage\"><a onclick=\"showPage('','$numpages'); return false;\" href=\"$self?page=$numpages&q=" .urlencode($search_result) . "\"> >> </a></span>";
}
else {
$nav .= " ";
$last = " ";
}
echo $first . $nav . $last;
?>
</div>
and this is how it displays currently:
alt text http://img714.imageshack.us/img714/7184/pag1l.jpg
css:
.searchmain {
margin:30px;
text-align: center;
}
.searchpage {
border: solid 1px #ddd;
background: #fff;
text-align:left;
font-size: 16px;
padding:9px 12px;
color: #FEBE33;
margin-left:2px;
}
.searchpage a{
text-decoration: none;
color: #808080;
}
.searchpage a:hover {
color: #FEBE33;
border-color: #036;
text-decoration: none;
}
.searchpage a:visited {
color: #808080;
}
The solution to your first program seems pretty straightforward; you know the number of surrounding links you want to display so you can simply loop from current_page - surrounding_links to current_page + surrounding_links. Add some conditions for the beginning, the end and for when to show the dots and you're done.
For the css; I´m not entirely sure what you want to achieve but I think you can solve it by using just a tags, the surrounding spans seem redundant, you only need them for the items that are not links (.no_link in the example below):
a, .no_link {
float: left;
display: block;
padding:9px 12px;
border: solid 1px #ddd;
background: #fff;
text-align:left;
font-size: 16px;
}
a {
color: #808080;
}
a:hover {
color: #FEBE33;
border-color: #036;
}
.no_link {
color: #FEBE33;
}
1. Change the padding and border properties of this CSS:
.searchpage {
border: none;
background: #fff;
text-align:left;
font-size: 16px;
padding:3px;
color: #FEBE33;
margin-left:2px;
}
And add the codes for square brackets around $i.
for($i = 1 ; $i <= $numpages ; $i++) {
if($i == $page) {
$nav .= "<span class=\"searchpage\">[$i]</span>";
That should change the visuals of your numbers, I haven't tested it seeing as you don't have a live site but it should work.
2. Instead of .searchpage a:hover try searchmain a:hover.
None of this is tested, but best I could come up with after viewing your code. Hope it helps to at least point you in the right direction :)