I want to create a loop that when it reaches 20th, just create a new page, then, again a new page and so until the cycle is done.
I have 5rows 4 columns (5x4 = 20 labels per page)
The peculiarity is that I have four prices and the number of labels depends on the total number. I give an example.
I have columns broi, price1, price2, price3, price4
With sample data:
broi: 90
price1: 4.85
price2: 7.90
price3: 9.30
price4: 11.10
We divide (broi)90/4 and we get that from 1 price we have to have 22.5, for example:
price1: 4,85 - 22pcs
price2: 7.90 - 24pcs
price3: 9.30 - 22pcs
price4: 11.10 - 22pcs
(total pcs 90 = broi)
Here's an example, by way of a snapshot,
And I want to be:
My php code is:
<?php
$mysqli = new mysqli('localhost', 'user', 'pass', 'db');
/* check connection */
if ($mysqli->connect_errno) {
printf("Connect failed: %s\n", $mysqli->connect_error);
exit();
}
$mysqli->set_charset("utf8");
/* разделяме на 4 и правиме второто число да компенсира остатъка */
function calculate_columns(int $total, int $size, int $prefer = 1): array {
$columns = [];
for ($i = 0; $i < $size; $i++) {
$columns[$i] = floor($total / $size);
}
$columns[$prefer] += $total - $columns[$prefer] * $size;
return $columns;
/*
Array (
[0] => 22
[1] => 24
[2] => 22
[3] => 22
)
*/
}
?><html>
<head>
<style>body {
background: rgb(204,204,204);
}
page {
background: white;
display: block;
margin: 0 auto;
margin-bottom: 0.5cm;
//box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
}
page[size="A4"] {
width: 21cm;
height: 29.7cm;
}
page[size="A4"][layout="landscape"] {
width: 29.7cm;
height: 21cm;
}
page[size="A3"] {
width: 29.7cm;
height: 42cm;
}
page[size="A3"][layout="landscape"] {
width: 42cm;
height: 29.7cm;
}
page[size="A5"] {
width: 14.8cm;
height: 21cm;
}
page[size="A5"][layout="landscape"] {
width: 21cm;
height: 14.8cm;
}
#media print {
body, page {
margin: 0;
box-shadow: 0;
}
}
/* Container holding the image and the text */
.container {
position: relative;
text-align: center;
margin-left:10px;
color: #000 ;
font-size:19px !important;
font-weight: bold; font: arial;
}
/* Centered text */
.centered {
position: absolute;
top: 70%;
left: 50%;
transform: translate(-50%, -50%);
margin-left:6px;
}
.A4 {
background: white;
width: 21cm;
height: 29.7cm;
display: block;
margin: 0 auto;
padding: 10px 25px;
margin-bottom: 0.5cm;
box-shadow: 0 0 0.5cm rgba(0, 0, 0, 0.5);
overflow-y: scroll;
box-sizing: border-box;
font-size: 12pt;
}
#media print {
.page-break {
display: block;
page-break-before: always;
}
size: A4 portrait;
}
#media print {
body {
margin: 0;
padding: 0;
}
.A4 {
box-shadow: none;
margin: 0;
width: auto;
height: auto;
}
.noprint {
display: none;
}
.enable-print {
display: block;
}
}
</style>
<script>
//window.print();
</script>
</head>
<body>
<?php
$lstoutput = array();
$sqlquery = $mysqli->query("SELECT * FROM items WHERE id=1");
while($row = $sqlquery->fetch_array()) {
$lstoutput[] = $row;
}
$labels = calculate_columns($lstoutput[0]['broi'], 4);
$page_much = $lstoutput[0]['broi']/20; //$labels[0]
$page_number = '0';
for(; $page_number < $page_much ; $page_number++){
echo '<page size="A4"><table cellpadding="6" style="padding-top: 30px"><tbody>';
if($lstoutput[0]['price1'] != null) {
$labels_number = 0;
for ($labels_number = 0; $labels_number <= $labels[0]; $labels_number++) {
if ($labels_number %4 === 0) {
echo("</tr>\n<tr style='margin:1px'>");
}
echo '<td style="margin:1px" class="container"><img src="label.png" alt="label" style="border:1px solid #333;width:184px;height:184px" /><div class="centered">'.$lstoutput[0]['price1'].'</div></td>';
}
}
if($lstoutput[0]['price2'] != null) {
$labels_number = 0;
for ($labels_number = 0; $labels_number <= $labels[0]; $labels_number++) {
if ($labels_number %4 === 0) {
echo("</tr>\n<tr style='margin:1px'>");
}
echo '<td style="margin:1px" class="container"><img src="label.png" alt="label" style="border:1px solid #333;width:184px;height:184px" /><div class="centered">'.$lstoutput[0]['price2'].'</div></td>';
}
}
echo '</tbody></table></page>';
}
?>
</body>
</html>
If you set the labels as divs with css display: inline-block instead of using a table, the browser itself will reflow the elements to fit on each page.
.label {
display: inline-block;
width: 200px;
height: 100px;
border: 1px solid black;
padding: 5px;
margin: 5px;
}
<div class="label">label</div>
<div class="label">label</div>
<div class="label">label</div>
<div class="label">label</div>
<div class="label">label</div>
...
This looks as this in my preview window:
#DinoCoderSaurus I set the code after I removed the cycle to create the number of pages, added the page-break-after function (css) but did not get it again, set the photo + code.
table { page-break-inside:auto }
tr { page-break-inside:avoid; page-break-after:auto }
<?php
$mysqli = new mysqli('localhost', 'USER', 'PASS', 'DATABASE');
/* check connection */
if ($mysqli->connect_errno) {
printf("Connect failed: %s\n", $mysqli->connect_error);
exit();
}
$mysqli->set_charset("utf8");
/* разделяме на 4 и правиме второто число да компенсира остатъка */
function calculate_columns(int $total, int $size, int $prefer = 1): array {
$columns = [];
for ($i = 0; $i < $size; $i++) {
$columns[$i] = floor($total / $size);
}
$columns[$prefer] += $total - $columns[$prefer] * $size;
return $columns;
/*
Array (
[0] => 22
[1] => 24
[2] => 22
[3] => 22
)
*/
}
?><html>
<head>
<style>body {
background: rgb(204,204,204);
}
page {
background: white;
display: block;
margin: 0 auto;
margin-bottom: 0.5cm;
//box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
}
page[size="A4"] {
width: 21cm;
height: 29.7cm;
}
page[size="A4"][layout="landscape"] {
width: 29.7cm;
height: 21cm;
}
page[size="A3"] {
width: 29.7cm;
height: 42cm;
}
page[size="A3"][layout="landscape"] {
width: 42cm;
height: 29.7cm;
}
page[size="A5"] {
width: 14.8cm;
height: 21cm;
}
page[size="A5"][layout="landscape"] {
width: 21cm;
height: 14.8cm;
}
#media print {
body, page {
margin: 0;
box-shadow: 0;
}
}
/* Container holding the image and the text */
.container {
position: relative;
text-align: center;
margin-left:10px;
color: #000 ;
font-size:19px !important;
font-weight: bold; font: arial;
}
/* Centered text */
.centered {
position: absolute;
top: 70%;
left: 50%;
transform: translate(-50%, -50%);
margin-left:6px;
}
.A4 {
background: white;
width: 21cm;
height: 29.7cm;
display: block;
margin: 0 auto;
padding: 10px 25px;
margin-bottom: 0.5cm;
box-shadow: 0 0 0.5cm rgba(0, 0, 0, 0.5);
overflow-y: scroll;
box-sizing: border-box;
font-size: 12pt;
}
#media print {
.page-break {
display: block;
page-break-before: always;
}
size: A4 portrait;
}
#media print {
body {
margin: 0;
padding: 0;
}
.A4 {
box-shadow: none;
margin: 0;
width: auto;
height: auto;
}
.noprint {
display: none;
}
.enable-print {
display: block;
}
}
table { page-break-inside:auto }
tr { page-break-inside:avoid; page-break-after:auto }
</style>
<script>
//window.print();
</script>
</head>
<body>
<?php
$lstoutput = array();
$sqlquery = $mysqli->query("SELECT * FROM items WHERE id=1");
while($row = $sqlquery->fetch_array()) {
$lstoutput[] = $row;
}
$labels = calculate_columns($lstoutput[0]['broi'], 4);
echo '<page size="A4"><table cellpadding="5" style="padding-top: 10px"><tbody>';
if($lstoutput[0]['price1'] != null) {
$labels_number = 0;
for ($labels_number = 0; $labels_number <= $labels[0]; $labels_number++) {
if ($labels_number %4 === 0) {
echo("</tr>\n<tr style='margin:1px'>");
}
echo '<td style="margin:1px" class="container"><img src="label.png" alt="label" style="border:1px solid #000;width:90%;height:90%" /><div class="centered">'.$lstoutput[0]['price1'].'</div></td>';
}
}
if($lstoutput[0]['price2'] != null) {
$labels_number = 0;
for ($labels_number = 0; $labels_number <= $labels[1]; $labels_number++) {
if ($labels_number %4 === 0) {
echo("</tr>\n<tr style='margin:1px'>");
}
echo '<td style="margin:1px" class="container"><img src="label.png" alt="label" style="border:1px solid #000;width:90%;height:90%" /><div class="centered">'.$lstoutput[0]['price2'].'</div></td>';
}
}
echo '</tbody></table></page>';
?>
</body>
</html>
Related
I am trying to insert a CSS grid layout within a flexbox layout so that 3 "grids" flex across a page row then the next three "grids" fill another row etc. At the moment all the "grids" line up in the centre of the page in one column when they should flex into rows of three abreast.
php code for itinery list page
<?php
include("assets/includes/header.inc.php");
include("config.php");
include("classes/ItineryResultsProvider.php");
if(isset($_GET['location'])) {
$location = $_GET['location'];
}
else {
exit("You must select an itinery location");
}
$page = isset($_GET["page"]) ? $_GET["page"] : 1;
?>
<body>
<section class="PageWrapper">
<section class='PageContentContainer'>
<?php
$resultsProvider = new ItineryListProvider($conn);
$pageSize = 18;
$numResults = $resultsProvider->getNumResultsItineryList($location);
$removeUnderscoreLocation = str_replace('_', ' ', $location);
echo "<div class='PageContentListCount'>
<h2>This page shows a list of $numResults suggested itineries for $removeUnderscoreLocation.</h2>
</div>";
echo $resultsProvider->getResultsItineryList($page, $pageSize, $location)
?>
<div class="PaginationGridContainer">
<div class="PaginationGridLogo">
<img src="assets/logos/Page_Numbering.png">
</div>
<div class="PaginationGridNumbering">
<?php
$pagesToShow = 10;
$numPages = ceil($numResults / $pageSize);
$pagesLeft = min($pagesToShow, $numPages);
$currentPage = $page - floor($pagesToShow / 2);
if($currentPage < 1) {
$currentPage = 1;
}
if($currentPage + $pagesLeft > $numPages + 1) {
$currentPage = $numPages + 1 - $pagesLeft;
}
while($pagesLeft != 0 && $currentPage <= $numPages) {
if($currentPage == $page) {
echo "<div class='PageNumberContainer'>
<span class='PageNumber'>$currentPage</span>
</div>";
}
else {
echo "<div class='PageNumberContainer'>
<a href='ItineryList.php?location=$location&page=$currentPage'>
<span class='PageNumber'>$currentPage</span>
</a>
</div>";
}
$currentPage++;
$pagesLeft--;
}
?>
</div>
</div>
</section>
</section>
</body>
</html>
php code for itinery list page classes
<?php
class ItineryListProvider {
private $conn;
public function __construct($conn) {
$this->conn = $conn;
}
public function getNumResultsItineryList($location) {
$query = $this->conn->prepare("SELECT COUNT(*) as total
FROM bth_itn_tbl WHERE ITN_STATUS='1'
AND ITN_LOCATION LIKE :location");
$searchTerm = $location;
$query->bindParam(":location", $searchTerm);
$query->execute();
$row = $query->fetch(PDO::FETCH_ASSOC);
return $row["total"];
}
public function getResultsItineryList($page, $pageSize, $location) {
$fromLimit = ($page - 1) * $pageSize;
$query = $this->conn->prepare("SELECT *
FROM bth_itn_tbl WHERE ITN_STATUS='1'
AND ITN_LOCATION LIKE :location
ORDER BY ITN_CLICK_COUNT DESC
LIMIT :fromLimit, :pageSize");
$searchTerm = $location;
$query->bindParam(":location", $searchTerm);
$query->bindParam(":fromLimit", $fromLimit, PDO::PARAM_INT);
$query->bindParam(":pageSize", $pageSize, PDO::PARAM_INT);
$query->execute();
$resultsItineryList = "<div>";
while($row = $query->fetch(PDO::FETCH_ASSOC)) {
$id = $row["ITN_KEY"];
$itnImg = $row["ITN_IMG_PATH"];
$title = $row["ITN_TITLE"];
$resultsItineryList .= "<div class='ItineryListFlexbox'>
<div class='ItineryListGrid'>
<a class='IntineryListGridImage'>
<img src='$itnImg' height='169' width='225'>
</a>
<a class='ItineryListGridTitle'>$title</a>
</div>
</div>";
}
$resultsItineryList .= "</div>";
return $resultsItineryList;
}
}
?>
CSS code. Note that the PageWrapper and PageContentContainer is generic for all pages and works fine. The issue is with the ItineryListGrid which is supposed to flex within ItineryListFlexbox. At the moment it is a vertical centred column within the PageContentContainer
.PageWrapper {
padding-top: 100px;
margin-bottom: 20px;
width: 100%;
display: flex;
justify-content: center;
flex-flow: row;
}
.PageContentContainer {
float: left;
margin: 0px 5px 5px 5px;
width: 710px;
border: 2px solid #111;
border-radius: 4px;
box-shadow: 6px 6px 4px #888888;
}
.PageContentListCount h2 {
margin: 20px 10px 20px 10px;
margin-left: 10px;
font-family: Catamaran;
font-size: 25px;
line-height: 30px;
font-weight: 900;
color: #111;
justify-content: left;
}
.PageContentContainer h3 {
margin: 0 0 15px 10px;
font-family: Catamaran;
font-size: 18px;
font-weight: 900;
color: #111;
}
.AdvertisingContainer {
float: right;
margin: 0px 15px 5px 5px;
width: 320px;
border: 2px solid #111;
border-radius: 4px;
box-shadow: 6px 6px 4px #888888;
height: auto;
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: auto;
}
.ItineryListFlexbox {
display: flex;
flex-flow: row wrap;
justify-content: center;
height: auto;
}
.ItineryListGrid {
margin: 10px;
display:grid;
grid-template-columns: 225px;
grid-template-rows: 169px 50px;
grid-template-areas:
"IntineryListGridImage"
"ItineryListGridTitle";
}
.IntineryListGridImage {
grid-area: IntineryListGridImage;
}
.ItineryListGridTitle {
grid-area: ItineryListGridTitle;
text-align: left;
margin: 5px 0 5px 0;
text-decoration: none;
font-family: Catamaran;
font-size: 18px;
line-height: 20px;
font-weight: 900;
text-align: center;
color: #111;
}
I am trying to make a web application in PHP and I have designed my initial index.php with a login page with other header and footer design.
I want to keep the header and footer design throughout the pages and just want to change the included .phpfile as per the user redirection.
Please see the snippets below.
P.S. it is not complete code and it is work in progress.
session_start();
ob_start();
header('Content-Type: text/html; charset=utf-8');
header('Cache-Control: private');
require_once ('lib/php/connection.php');
require_once ('lib/php/global.php');
require_once ('lib/php/session.php');
require_once ('lib/php/function.php');
$aController = array_values( array_diff( explode('/', $_SERVER['REQUEST_URI']), explode('/', $_SERVER['SCRIPT_NAME'])));
if (isset($aController[0])) {
switch (strtolower($aController[0])) {
/*case 'login';
$setPage = 'dir_login/index.php';
$setTitle = 'Login';
break;*/
case 'forgot-password';
$setPage = 'dir_content/forgotPassword.php';
$setTitle = 'Forgot your password';
break;
default:
$setPage = 'dir_content/error.php';
$setTitle = '404 Error';
break;
}
} else {
//for all the default cases
$setPage = 'dir_login/index.php';
$setTitle = 'Login';
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<?php
echo '<title>';
if (isset($setTitle)) {
echo $setTitle;
echo ' - ';
}
echo D_COMPANY_NAME;
echo '</title>';
if (defined ('D_PROJECT_TITLE')) {
echo '<meta name="project-title" lang="en" content="'.htmlspecialchars(D_PROJECT_TITLE, ENT_QUOTES).'" />';
}
if (defined ('D_PROJECT_DESCRIPTION')) {
echo '<meta name="project-description" lang="en" content="'.htmlspecialchars(D_PROJECT_DESCRIPTION, ENT_QUOTES).'" />';
}
echo '<meta name="publisher" content="'.htmlspecialchars(D_COMPANY_OWNER, ENT_QUOTES).'" />';;
echo '<meta name="copyright" content="'.htmlspecialchars(D_COMPANY_NAME, ENT_QUOTES).'" />';
?>
<meta name="author" content="Saurabh Gupta, IT System Developer # Somex Automation Ltd." />
<meta name="language" content="english" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-script-type" content="text/javascript" />
<meta http-equiv="Content-style-type" content="text/css" />
<meta http-equiv="Content-Language" content="en" />
<meta http-equiv="imagetoolbar" content="no" />
<link rel="stylesheet" type="text/css" media="screen" href="lib/css/reset.css" />
<link rel="stylesheet" type="text/css" media="screen" href="lib/css/custom.css"/>
<script language="JavaScript" type="text/javascript" src="lib/js/modernizr.custom.18450.js"></script>
<script language="JavaScript" type="text/javascript" src="lib/js/cookie.js" ></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.0.2.min.js" ></script>
<script language="JavaScript" type="text/javascript" >
<!-- Google Tag, Hotjar Tag -->
</script>
</head>
<body>
<?php
$aBgImages = array(
'signup_bg.png'
);
?>
<div id="header"<?php echo ((!isset($aController[0]) || (strpos($aController[0], '?') !== false)) ? ' class="front" style="background-image: url(gfx/'.getRandomImage($aBgImages).'"' : ''); ?>>
<div id="top">
<div id="nav">
<?php
echo '<div id="logo-position">';
echo ' <img src="gfx/logo.png" style="margin-left: 10%; margin-top: 2%; padding-bottom: 20px;" />';
echo '» Home';
echo '</div>';
?>
<div class="clearfix"></div>
</div>
</div>
</div>
<div id="wrapper" <?php echo ((!isset($aController[0]) || (strpos($aController[0], '?') !== false)) ? ' class="front"' : ''); ?>>
<?php
include ($setPage);
?>
</div>
<div class="clearfix"></div>
<div id="footer">
<div class="clearfix"></div>
<div id="copyright">
<span>
<div="footer-back">
Phone: +353 (0) 26 65770 Email: automation#somexautomation.ie<br />
Fax: +353 (0) 26 65780 ©<?php echo date('Y').' '. D_COMPANY_NAME; ?> - Reg No. 584538<br />
</div>
</span>
</div>
</div>
</body>
</html>
My dir_login->index.php is populated on the index.php as a start page.
<?php
/**
* Created by PhpStorm.
* User: sgupta
* Date: 28/09/2017
* Time: 15:46
*/
$pageName = 'dir_login/index.php';
$pageLink = '/';
if (isset($_SESSION['sEmployeeID'])) {
header('Location: /');
exit();
}
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$aErrorClass = ' class="text-error"';
$aError = array();
if (!isset($_POST['employeeID']) || trim($_POST['employeeID']) == '') {
$aError['employeeID'] = 'Please type in your Employee ID';
}
if (!isset($_POST['password']) || trim($_POST['employeeID'])) {
$aError['password'] = 'Please type in your password';
} elseif (!isset($_POST['password']) || (strlen($_POST['password']) < 5)) {
$aError['password'] = 'This password is wrong';
}
if (count($aError) == 0) {
$sQueryLogin = "
SELECT employeeID, name, rate, payRate. password, level, email, type
FROM tblemployees
WHERE employeeID = ? AND
password = ?
";
if ($stmtLogin = $mysqli->prepare($sQueryLogin)) {
$sEmployeeID = $_POST['employeeID'];
$sPassword = $_POST['password'];
$stmtLogin->bind_param('ss', $sEmployeeID, $sPassword);
if ($stmtLogin->execute() === false) {
trigger_error('stmtLogin execution failed '.$stmtLogin->error, E_USER_ERROR);
}
$stmtLogin->store_result();
$numLogin = $stmtLogin->num_rows;
$stmtLogin->bind_result($employeeID, $name, $rate, $payRate, $password, $level, $email, $type);
$stmtLogin->fetch();
if ($numLogin == 1) {
}
}
}
}
//echo 'This Page';
?>
<h1>Log in your Somex Timesheets account</h1>
<form action="<?php echo $pageLink; ?>" method="post" enctype="multipart/form-data" name="loginForm" class="shadow">
<?php echo (isset($sLoginError) ? '<h2 class="text-error">'.$sLoginError.'<h2>' : ''); ?>
<ul>
<li>
<label for="employeeID" <?php echo (isset($aError['employeeID'])? $aErrorClass : ''); ?>>Your Employee ID</label>
<input type="text" name="employeeID" id="employeeID" value="<?php (isset($_POST['employeeID']) ? htmlspecialchars($_POST['employeeID'], ENT_QUOTES) : ''); ?>" />
<?php echo (isset($aError['employeeID']) ? '<div class="info-line">'.$aError['employeeID'].'</div>' : ''); ?>
</li>
<li>
<label for="password"<?php echo (isset($aError['password']) ? $aErrorClass : ''); ?>>Your password</label>
<input type="password" name="password" id="password" />
<div class="info-line"><?php echo (isset($aError['password']) ? $aError['password'].'<br />' : ''); ?>I forgot my password</div>
</li>
</ul>
<div class="clearfix"></div>
<input name="send" type="submit" class="button" value="» Log in"/>
<div class="clearfix"></div>
</form>
The initial page works fine but when I switch to other pages like forgetpassword.phpor error.php, the page gets populated with the code but design is not maintained.
Regardless the undefined links are populating with the design.
The default case in the switch statement is working as per I want but not the other pages.
CSS:
body {
font-size: 12pt;
font-family: Verdana, Geneva, sans-serif;
background-color: #fff;
color: #000;
margin: 0;
padding: 0;
}
h1, h2, h3, label, input, textarea, #nav, .button, #footer, .item, .availability, #place .desc {
font-family: Arial, Helvetica, sans-serif;
}
.button {
padding: 0 20px;
background-color: #ff6801;
font-size: 1.1em;
color: #fff;
text-align: center;
line-height: 40px;
text-decoration: none;
display: block;
border: 0;
border-radius: 10px;
}
.button:hover {
background-color: #ff1700;
}
.button.fright {
margin-left: 20px;
}
.fright {
float: right !important;
}
.button.fright {
margin-left: 20px;
float: right;
margin-right: 18%;
margin-top:60px;
}
#wrapper.front {
padding: 100px 0;
}
#footer {
margin-top: 60px;
text-align: center;
padding: 40px 0;
font-size: large;
background: url(/gfx/signup_bg.png);
background-repeat: no-repeat;
background-size: 100%;
height: 50px;
}
#header {
background: url(/gfx/signup_bg.png);
background-repeat: no-repeat;
background-size: 100%;
}
.shadow {
/*
box-shadow: 0 0 7px 2px rgba(0,0,0,.35);
-webkit-box-shadow: 0 0 7px 2px rgba(0,0,0,.35);
-moz-box-shadow: 0 0 7px 2px rgba(0,0,0,.35);
*/
border: 1px solid #D6D6D6;
}
.text-error, .error {
color: #e84b31;
}
.text-success, .success {
color: #2aa00b;
}
input[type="text"]:disabled, select:disabled {
/*border: 1px solid transparent !important;
background: transparent;*/
cursor: not-allowed;
}
input[type="text"]:disabled:hover, select:disabled:hover {
border: 1px solid #e84b31;
}
input[type="text"], input[type="password"], input[type="file"], textarea {
width: 400px;
}
input[type="text"], input[type="password"], input[type="file"], textarea, select {
font-size: 1em;
border: 1px solid #000;
padding: 10px;
}
select {
padding: 8px 8px 9px !important;
float: left;
}
input[type="checkbox"], input[type="radio"] {
margin: 15px 15px 15px 340px;
float: left;
}
input[type="checkbox"] + label, input[type="radio"] + label {
float: left;
width: 450px !important;
text-align: left;
}
input[type="text"]:hover, input[type="password"]:hover, input[type="file"]:hover, textarea:hover, select:hover,
input[type="text"]:focus, input[type="password"]:focus, input[type="file"]:focus, textarea:focus, select:focus,
input[type="text"]:active, input[type="password"]:active, input[type="file"]:active, textarea:active, select:active {
border: 1px solid #00CC66;
}
input[type="text"], input[type="password"], textarea {
cursor: text;
}
input[type="submit"] {
padding: 0 30px;
cursor: pointer;
}
form {
background-color: #f5f6f6;
border: 1px solid #f1f3f3;
}
form {
border: 0;
padding: 30px;
}
.front form {
width: 920px;
}
.intro {
margin: 40px 0;
text-align: center;
font-size: 1.25em;
}
.front form h1 {
margin: 40px 0 20px !important;
}
form h2 {
margin-bottom: 60px;
}
.front .column h2 {
background: #6db7da url(/gfx/arc-small.png) no-repeat center top;
text-align: center;
display: block;
padding: 30px 20px 20px;
text-transform: uppercase;
color: #fff;
letter-spacing: 1px;
}
#search h2 {
color: #053c71;
}
#search h2, #search h3 {
margin-bottom: 10px;
}
form ul li {
vertical-align: middle;
margin: 0 30px 30px 0;
}
.front form ul li {
float: left;
margin: 0 30px 30px 0;
}
.front form ul li:last-child {
margin-right: 0;
}
form li.header {
padding: 40px 0 0 340px;
border-top: 1px solid #D6D6D6;
margin: 40px 0 0 !important;
}
form li.header.no-line {
border-top: 0;
padding-top: 0;
}
form input[type="submit"] {
text-align: center;
width: 100%;
}
form .info-line {
font-size: 0.9em;
padding: 10px 0 10px 340px;
line-height: 150%;
}
.front form .info-line {
padding: 10px 0 0 0 !important;
width: auto;
margin-right: 0;
}
h1 {
font-size: 1.6em;
margin-bottom: 40px;
}
h2 {
font-size: 1.4em;
}
h3 {
font-size: 1.2em;
}
h1 + h2, h1 + h3 {
margin-top: -20px;
}
p {
line-height: 200%;
font-size: 1em;
font-family: Verdana, Geneva, sans-serif;
margin: 20px 0;
}
p.warning {
background-color: #f9f99b;
padding: 10px 20px;
}
ul.warning {
line-height: 200%;
font-size: 0.9em;
display: block;
background-color: #f9f99b;
padding: 20px 30px;
list-style: square inside;
margin: 20px 0;
}
ul.warning li.header {
list-style: none;
font-weight: bold;
margin-bottom: 10px;
}
#nav ul {
list-style: none;
display: inline-block;
padding: 0;
overflow: hidden;
margin: 16px 0;
}
#nav ul li {
float: left;
}
strong {
font-weight: bold;
}
i {
font-style: italic;
}
.front p {
margin: 0;
}
#wrapper {
width: 980px;
margin: 0 auto;
padding: 20px 0 100px;
}
#wrapper.front {
padding: 100px 0;
}
label {
display: block;
font-size: 1.1em;
float: left;
width: 300px;
text-align: right;
margin-right: 40px;
line-height: 40px;
}
.front label {
float: none;
width: auto;
text-align: left;
margin-right: 0;
}
.front form h1 {
margin: 40px 0 20px !important;
}
form h2 {
margin-bottom: 60px;
}
form ul li {
vertical-align: middle;
margin: 0 30px 30px 0;
}
.front form ul li {
float: left;
margin: 0 30px 30px 0;
}
.front form ul li:last-child {
margin-right: 0;
}
#menu ul {
list-style: none;
margin: 0;
display: inline-block;
padding: 0;
overflow: hidden;
}
#menu ul li {
float: left;
}
.filter ul {
padding: 20px;
border-top: 1px solid #3cb3e7;
}
.filter ul li {
margin: 0 0 8px 0;
display: block;
}
#booking ul {
padding: 20px;
border-top: 1px solid #62a903;
}
#booking ul li {
margin: 0 0 8px 0;
display: block;
}
#booking ul li.availability {
padding-top: 15px;
line-height: 140%;
font-size: 1.2em;
text-align: center;
}
#booking ul li.dates {
font-size: 0.8em;
text-align: center;
}
#booking ul li.subtotal-price, .subtotal-price {
padding-top: 10px;
line-height: 140%;
font-weight: bold;
}
#booking ul li.total-price, .total-price {
padding-top: 10px;
line-height: 140%;
font-size: 1.3em;
font-weight: bold;
}
#booking ul li span {
display: block;
float: right;
}
#message-reply ul li {
margin: 0 0 30px 0;
display: block;
}
.filter ul li.item {
font-weight: bold;
padding-bottom: 10px;
line-height: 140%;
}
form li.header {
padding: 40px 0 0 340px;
border-top: 1px solid #D6D6D6;
margin: 40px 0 0 !important;
}
form li.header.no-line {
border-top: 0;
padding-top: 0;
}
form input[type="submit"] {
text-align: center;
width: 100%;
}
form .info-line {
font-size: 0.9em;
padding: 10px 0 10px 340px;
line-height: 150%;
}
.front form .info-line {
padding: 10px 0 0 0 !important;
width: auto;
margin-right: 0;
}
Apologies for my English.
Need help
Added Screenshots: index.php, forgotpassword.php
I am looking to have the below code to dynamically change the box-shadow to match the image orientation. . . either landscape or portrait. Here is a link to an example: http://gbamedical.com/test3.php It currently looks funny when a portrait image is left orientated with landscape box. Also looking to have thumbnails the same height which would require portrait thumbnails to be narrower.
The CSS:
style>* {
margin: 0;
padding: 0;
}
.slider {
width: 640px;
position: relative;
padding-top: 480px;
margin: 20px auto;
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75);
}
.slider > img {
position: absolute;
left: 0;
top: 0;
transition: all 0.5s;
}
.slider input {
display: none;
}
.slider label {
width: 60px;
margin: 20px 2px;
float: left;
border: 2px solid #999;
cursor: pointer;
transition: all 0.5s;
opacity: 0.6;
box-sizing: border-box;
}
.slider label img {
width: 100%;
display: block;
}
.slider input:checked + label {
border-color: #666;
opacity: 1;
}
.slider input ~ img {
opacity: 0;
transform: scale(1.1);
}
.slider input:checked + label + img {
opacity: 1;
transform: scale(1);
}
</style>
The PHP code:
<div class="slider">
<?php
$array = glob('ebayimg/8851gba050516/size_2/*');
$i = 1;
foreach($array as $image) {
?>
<input type="radio" name="slide" id="image<?php echo $i ?>" <?php if($i == 1){ ?> checked <?php } ?>/>
<label for="image<?php echo $i ?>">
<img src="http://www.gbamedical.com/<?php echo $image ?>"/>
</label>
<img src="http://www.gbamedical.com/<?php echo $image ?>" height="480"/>
<?php
$i++;
}
?>
You may have to use javascript to change it on the fly by getting the width of the image and changing the .slider width accordingly:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(e) {
$("label").on('click',function() {
var preview = $(this).next();
var getW = preview.width();
$(".slider").css({"width":getW*.91});
});
});
</script>
Here is a jsFiddle Demo
EDIT
Try this set of styles:
* {
margin: 0;
padding: 0;
}
.slider {
max-width: 640px;
position: relative;
padding-top: 480px;
margin: 20px auto;
display: block;
text-align: center;
}
.slider > img {
position: absolute;
left: 0;
top: 0;
transition: all 0.5s;
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75);
}
.slider input {
display: none;
}
.slider label {
height: 60px;
margin: 20px 2px;
float: left;
border: 2px solid #999;
cursor: pointer;
transition: all 0.5s;
opacity: 0.6;
box-sizing: border-box;
}
.slider label img {
max-height: 60px;
display: block;
}
.slider input:checked + label {
border-color: #666;
opacity: 1;
}
.slider input ~ img {
opacity: 0;
transform: scale(1.1);
}
.slider input:checked + label + img {
opacity: 1;
transform: scale(1);
}
Here is a jsFiddle demo with the css above.
I am trying to move the thumbnails which are displayed vertically on the right hand side of the main image.
I would like to display them horizontally below the main image.
Slideshow is dynamic from a mysql database.
Php from the display page:
<?php $sqli3 = "SELECT * FROM pro_img WHERE pro_id='$pid' ORDER BY img_id ASC LIMIT 0,1";
$resulti3 = mysql_query($sqli3);
$rs3 = mysql_fetch_array($resulti3);
$description = str_replace( ' <br /><br /><br />', '</p>', $rs[pro_desc]);
$description = str_replace( "<br /><br /><br />\r\n", "\n\r<p>", $description);
?>
<div id=show class=slideshow>
<div class=slideshow-images>
<?php $sqli2 = "SELECT * FROM pro_img WHERE pro_id='$pid' ORDER BY img_id";
$resulti2 = mysql_query($sqli2);
$i=0;
while($rsi2 = mysql_fetch_array($resulti2)){?>
<a href=><img id=slide-<?php print $i?> src=images/pro-photo/normals/<?php print $rsi2[img_name]?> alt="<?php print $title.' Image '.($i+1)?>"/></a>
<?php $i++;}?>
</div>
<div class=slideshow-thumbnails><ul> <?php $sqli2 = "SELECT * FROM pro_img WHERE pro_id='$pid' ORDER BY img_id";
$resulti2 = mysql_query($sqli2);
$i=0;
while($rsi2 = mysql_fetch_array($resulti2)){?>
<li><a href=#slide-<?php print $i?>><img src=images/pro-photo/thumbnails/<?php print $rsi2[img_name]?> alt="<?php print $title.' Slide '.($i+1)?>"/></a></li><?php $i++;}?>
</ul></div>
</div>
And this is the slideshow CSS
.slideshow {
display: block;
position: relative;
z-index: 0;
}
.slideshow-images {
display: block;
overflow: hidden;
position: relative;
}
.slideshow-images img {
display: block;
position: absolute;
z-index: 1;
}
.slideshow-thumbnails {
overflow: hidden;
}
.slideshow {
width: 508px;
height: 375px;
margin: 0 0 20px 0;
}
.slideshow a img {
border: 0;
}
.slideshow-images {
width: 508px;
height: 381px;
}
.slideshow-images-visible {
opacity: 1;
}
.slideshow-images-prev {
opacity: 0;
}
.slideshow-images-next {
opacity: 0;
}
.slideshow-images img {
float: left;
left: 0;
top: 0;
position: static;
}
.slideshow-thumbnails * {
margin: 0;
padding: 0;
}
.slideshow-thumbnails li {
float: left;
list-style: none;
margin: 15px 0 0 16px;
position: relative;
}
.slideshow-thumbnails a {
display: block;
float: left;
position: relative;
}
.slideshow-thumbnails a:hover {
/*background-color: #005b79 !important;*/
opacity: 1 !important;
}
.slideshow-thumbnails img {
display: block;
height: 81px;
width: 108px;
}
.slideshow-thumbnails-active {
background-color: #0081ac;
opacity: 1;
}
.slideshow-thumbnails-inactive {
background-color: #FFF;
opacity: .5;
}
.slideshow-thumbnails {
height: 381px;
left: auto;
right: -133px;
top: 0;
position: absolute;
width: 135px;
overflow: auto;
}
.slideshow-thumbnails ul {
height: 100%;
position: absolute;
width: 120px;
}
Any help would be great.
Thank you
Javascript here:
function VisualSlideShow(options){
if(options.effect&&options.effect.toLowerCase()=="fade"){options.effect="";}var path="";var regexp=/^(.*)visualslideshow\.js$/;$each($$("script"),function(item,index,object){if(regexp.test(item.src)){var res=regexp.exec(item.src);path=res[1];}});function writeScript(src,text){document.write("<scr"+"ipt type=\"text/javascript\""+(src?" src=\""+path+src+"\"":"")+">"+(text||"")+"</scr"+"ipt>");}writeScript("slideshow.js");if(options.effect){writeScript("slideshow."+options.effect.toLowerCase()+".js");}if(options.sound){writeScript("swfobject.js");}window.addEvent("domready",function(){if(options.sound){window.vssSoundListener={onInit:function(){}};$(options.id).grab(new Element("div",{id:"vssSound"}));swfobject.createSWF({data:path+"player_mp3_js.swf",width:"1",height:"1"},{allowScriptAccess:"always",loop:true,FlashVars:"listener=vssSoundListener&loop=1&autoplay=1&mp3="+options.sound},"vssSound");}var Instance;if(options.effect){Instance=new Slideshow[options.effect](options.id,null,options);}else{Instance=new Slideshow(options.id,null,options);}if(!window.visualslideshow){window.visualslideshow=[];}window.visualslideshow[window.visualslideshow.length]=Instance;var h=$$("#"+options.id+" div.slideshow-images");if(h&&t){var c=new Element("div",{styles:{position:"absolute",right:0,bottom:0,padding:"0 3px 2px",'background-color':"#EEE",'z-index':999999},events:{contextmenu:function(eventObject){return false;}}});
}});}
VisualSlideShow({"duration":2000,"delay":5000,"id":"show","width":508,"height":381,"captions":true,"controller":false,"thumbnails":true,"loop":true,"paused":false,"effect":"Fade"});
I have worked out the solution to this problem.
The PHP does not change only the css and the javascript.
Both are below.
CSS
.slideshow {
display: block;
position: relative;
z-index: 0;
}
.slideshow-images {
display: block;
overflow: hidden;
position: relative;
}
.slideshow-images img {
display: block;
position: absolute;
z-index: 1;
}
.slideshow-thumbnails {
overflow: hidden;
}
.slideshow {
width: 630px;
height: 600px;
margin: 0 auto;
}
.slideshow a img {
border: 0;
}
.slideshow-images {
width: 630px;
height: 434px;
left: 0px;
top: 0px;
}
.slideshow-images-visible {
opacity: 1;
}
.slideshow-images-prev {
opacity: 0;
}
.slideshow-images-next {
opacity: 0;
}
.slideshow-images img {
float: left;
left: 0;
top: 0;
position: static;
}
.slideshow-thumbnails * {
margin: 0;
padding: 0;
}
.slideshow-thumbnails li {
float: left;
list-style: none;
margin: 0px 0px 0px 0;
position: relative;
}
.slideshow-thumbnails a {
display: block;
float: left;
padding: 3px;
position: relative;
}
.slideshow-thumbnails a:hover {
background-color: #CCC !important;
opacity: 1 !important;
}
.slideshow-thumbnails img {
display: block;
height: 83px;
width: 120px;
}
.slideshow-thumbnails-active {
background-color: #7A7A7A;
opacity: 0.8;
}
.slideshow-thumbnails-inactive {
background-color: #FFF;
opacity: .5;
}
.slideshow-thumbnails {
top: 420px;
height: 180px;
left: 0;
position: absolute;
width: 630px;
overflow: auto;
}
.slideshow-thumbnails ul {
height: 100px;
left: 0;
position: absolute;
top: 0;
width: 630px;
}
.slideshow {
margin-top: 0px;
}
.slideshow-captions {
background: #000;
bottom: 20px;
color: #FFF;
font: normal 12px/22px Arial, sans-serif;
left: 20px;
overflow: hidden;
position: absolute;
padding: 0 10px;
width: 580px; /* 100% */
z-index: 10000;
}
.slideshow-captions-hidden {
opacity: 0;
}
.slideshow-captions-visible {
opacity: .7;
}
.slideshow-controller {
background: url(../images/controller.png) no-repeat;
height: 70px;
left: 50%;
margin: -21px 0 0 -96px;
overflow: hidden;
position: absolute;
bottom: 50%;
width: 192px;
z-index: 10000;
}
.slideshow-controller * {
margin: 0;
padding: 0;
}
.slideshow-controller-hidden {
opacity: 0;
}
.slideshow-controller-visible {
opacity: 1;
}
.slideshow-controller a {
cursor: pointer;
display: block;
height: 32px;
overflow: hidden;
position: absolute;
top: 15px;
}
.slideshow-controller a.active {
background-position: 0 32px;
}
.slideshow-controller li {
list-style: none;
}
.slideshow-controller li.first a {
background-image: url(../images/controller-first.png);
left: 13px;
width: 32px;
}
.slideshow-controller li.prev a {
background-image: url(../images/controller-prev.png);
left: 46px;
width: 32px;
}
.slideshow-controller li.pause a {
background-image: url(../images/controller-pause.png);
left: 79px;
width: 32px;
}
.slideshow-controller li.play a {
background-position: 32px 0;
}
.slideshow-controller li.play a.active {
background-position: 32px 32px;
}
.slideshow-controller li.next a {
background-image: url(../images/controller-next.png);
left: 112px;
width: 32px;
}
.slideshow-controller li.last a {
background-image: url(../images/controller-last.png);
left: 145px;
width: 32px;
}
.slideshow-loader {
height: 28px;
right: 0;
position: absolute;
top: 0;
width: 28px;
z-index: 10001;
}
.slideshow-loader-hidden {
opacity: 0;
}
.slideshow-loader-visible {
opacity: 1;
}
Javascript:
function VisualSlideShow(options){
if(options.effect&&options.effect.toLowerCase()=="fade"){options.effect="";}var path="";var regexp=/^(.*)visualslideshow\.js$/;$each($$("script"),function(item,index,object){if(regexp.test(item.src)){var res=regexp.exec(item.src);path=res[1];}});function writeScript(src,text){document.write("<scr"+"ipt type=\"text/javascript\""+(src?" src=\""+path+src+"\"":"")+">"+(text||"")+"</scr"+"ipt>");}writeScript("slideshow.js");if(options.effect){writeScript("slideshow."+options.effect.toLowerCase()+".js");}if(options.sound){writeScript("swfobject.js");}window.addEvent("domready",function(){if(options.sound){window.vssSoundListener={onInit:function(){}};$(options.id).grab(new Element("div",{id:"vssSound"}));swfobject.createSWF({data:path+"player_mp3_js.swf",width:"1",height:"1"},{allowScriptAccess:"always",loop:true,FlashVars:"listener=vssSoundListener&loop=1&autoplay=1&mp3="+options.sound},"vssSound");}var Instance;if(options.effect){Instance=new Slideshow[options.effect](options.id,null,options);}else{Instance=new Slideshow(options.id,null,options);}if(!window.visualslideshow){window.visualslideshow=[];}window.visualslideshow[window.visualslideshow.length]=Instance;var h=$$("#"+options.id+" div.slideshow-images");if(h&&t){var c=new Element("div",{styles:{position:"absolute",right:0,bottom:0,padding:"0 3px 2px",'background-color':"#EEE",'z-index':999999},events:{contextmenu:function(eventObject){return false;}}});
}});}
VisualSlideShow({"duration":2000,"delay":5000,"id":"show","width":630,"height":420,"captions":false,"controller":false,"thumbnails":true,"loop":true,"paused":false,"effect":"Fade"});
I hope this helps other people looking for a mysql driven slideshow.
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>