Text Input in HTML Form won't show up - php

I am working on a text-based online game (that is horribly incomplete), and I'm using PHP mainly. In my HTML I have a form (text input) for commands for my game, but it just won't show up. This is my HTML:
<div class="container">
<div class="main">
<?php
include_once 'game.php';
?>
</div>
<FORM NAME="form1" METHOD="POST" ACTION="">
<INPUT TYPE="TEXT" VALUE="" name="input"
style="width: 600; position: absolute; bottom: 0; z-index: 2;">
</INPUT>
</FORM>
<?php
$input = $_POST["input"];
?>
</div>
So it's really the FORM and the INPUT that screws me over since it doesn't show up. I also have this as my CSS, if it helps:
.main {
width: 600px;
height: 400px;
background-color: white;
border: 1px solid black;
position: absolute;
top:0;
left: 0;
right: 0;
z-index: 1;
}
.container {
width: 602px;
height: 500px;
background-color: white;
border: 1px solid blue;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 0;
margin: 0 auto;
}
And of course I have my game.php but I don't feel like that's the problem.
Any help would be appreciated.
EDIT: Based on people's answers, it's probably the PHP. Here's the entire code for the game.php file, I have no idea what's wrong.
<?php
include_once 'index.php';
$World = simplexml_load_file("gameworld.xml");
$CurrentPos = 0;
$Done = 0;
print "<br>";
printplace();
function printplace() {
GLOBAL $World, $CurrentPos;
$Room = $World->ROOM[$CurrentPos];
$Name = $Room->NAME;
$Desc = wordwrap((string)$Room->DESC);
print "$Name<br>";
print str_repeat('-', strlen($Name));
print "<br>$Desc<br>";
if ((string)$Room->NORTH != '-') {
$index = (int)$Room->NORTH;
print "North: {$World->ROOM[$index]->NAME}<br>";
}
if ((string)$Room->SOUTH != '-') {
$index = (int)$Room->SOUTH;
print "South: {$World->ROOM[$index]->NAME}<br>";
}
if ((string)$World->ROOM[$CurrentPos]->WEST != '-') {
$index = (int)$Room->WEST;
print "West: {$World->ROOM[$index]->NAME}<br>";
}
if ((string)$World->ROOM[$CurrentPos]->EAST != '-') {
$index = (int)$Room->EAST;
print "East: {$World->ROOM[$index]->NAME}<br>";
}
print "<br>";
}
while (!$Done) {
print "<br>"; // add another line break after the user input
$input = split(' ', $input);
switch(trim($input[0])) {
case 'north':
if ((string)$World->ROOM[$CurrentPos]->NORTH != '-') {
$CurrentPos = (int)$World->ROOM[$CurrentPos]->NORTH;
printplace() ;
} else {
print "You cannot go north!<br>";
}
break;
case 'south':
if ((string)$World->ROOM[$CurrentPos]->SOUTH != '-') {
$CurrentPos = (int)$World->ROOM[$CurrentPos]->SOUTH;
printplace() ;
} else {
print "You cannot go south!<br>";
}
break;
case 'west':
if ((string)$World->ROOM[$CurrentPos]->WEST != '-') {
$CurrentPos = (int)$World->ROOM[$CurrentPos]->WEST;
printplace() ;
} else {
print "You cannot go west!<br>";
}
break;
case 'east':
if ((string)$World->ROOM[$CurrentPos]->EAST != '-') {
$CurrentPos = (int)$World->ROOM[$CurrentPos]->EAST;
printplace() ;
} else {
print "You cannot go east!<br>";
}
break;
case 'look':
printplace() ;
break;
case 'quit':
$Done = 1;
break;
}
}
print "<br>Thanks for playing!<br>";
?>
Really, it's just a branch off of http://www.hackingwithphp.com/21/4/2/text-game-v1
that I tried to port to browsers but it failed horribly...

It shows up fine in Chrome and in Firefox. See below.
.main {
width: 600px;
height: 400px;
background-color: white;
border: 1px solid black;
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 1;
}
.container {
width: 602px;
height: 500px;
background-color: white;
border: 1px solid blue;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 0;
margin: 0 auto;
}
<div class="container">
<div class="main">
</div>
<FORM NAME="form1" METHOD="POST" ACTION="">
<INPUT TYPE="TEXT" VALUE="" name="input" style="width: 600; position: absolute; bottom: 0; z-index: 2;">
</INPUT>
</FORM>
</div>

Related

PHP/HTML: How I could change my image source depending on the value from the database

I have HTML in my PHP file, because I'm using data from a database to display on my website. (This is my first time using PHP so my knowledge is really little)
My question is how I could change my image source depending on the value from the database.
The depending value I'm talking about is called = SENT_NUMBER_1
<?php
//This line will make the page auto-refresh each 15 seconds
$page = $_SERVER['PHP_SELF'];
$sec = "15";?>
<html>
<head>
<style>
div.image{
transform: rotate(90deg);
width:100px;
height:200px;
background: transparent;
position: absolute;
top:30%;
bottom: 0;
left: 0;
right: 0;
margin: auto;
content:url(photo) // This is the url I'm wanting to change into either: Empty.png / 25.png / 50.png / 75.png /100.png || like = content:url(/50.png)
}
</style>
<div class="image"></div>
i also have something like this but I don't know if this works, and where to put it.
if(SENT_NUMBER_1 <= 10){
photo = "10.png"
}
elseif(SENT_NUMBER_1 >= 11 && <=25){
photo = "25.png"
}
elseif(SENT_NUMBER_1 >= 26 && <=49){
photo = "50.png"
}
elseif(SENT_NUMBER_1 >= 50 && <=74){
photo = "75.png"
}
elseif(SENT_NUMBER_1 >= 75 && <=100){
photo = "100.png"
}
Here is a screenshot from the [website], the image I'm wanting to change is the battery you see on the screenshot.
Whole code for if I missed something
<?php
//This line will make the page auto-refresh each 15 seconds
$page = $_SERVER['PHP_SELF'];
$sec = "15";
?>
<html>
<head>
<link rel="shortcut icon" href="/favicon-16x16.ico" type="image/x-icon">
<title>Rattengifmelder</title>
<style>
#font-face {
font-family: Asket Extended; src: url('AsketExtended-Light.otf');
font-family: Asket Extended; font-weight: bold; src: url('AsketExtended-Light.otf');
}
body{
height: 200vh;
}
tbody{
text-align: center;
}
td{
background-color: transparent;
width: 70px;
height: 70px;
}
table, th, td{
font-size: 30px;
width: 100px;
margin-left: auto;
margin-right: auto;
background: transparent;
border: 10px solid white;
font-family: 'Asket Extended', sans-serif;
}
div.image{
transform: rotate(90deg);
width:100px;
height:200px;
background: transparent;
position: absolute;
top:30%;
bottom: 0;
left: 0;
right: 0;
margin: auto;
content:url(/100.png)
}
div.image2{
width:100px;
height:200px;
background: transparent;
content:url(/Empty.png)
}
div.image3{
width:100px;
height:200px;
background: transparent;
content:url(/Empty.png)
}
.center{
position: sticky;
top: 0px;
text-align: center;
font-family: 'Asket Extended', sans-serif;
font-size: 50px;
font-weight: bold;
padding-top: 50px;
background-color: white;
}
.footer {
position: fixed;
left: 0;
bottom: 0;
height: 10%;
width: 100%;
background-color: white;
color: white;
text-align: center;
border-top: 1px solid lightgrey ;
}
div.container {
float: left;
margin: 100px;
padding: 20px;
width: 100px;
}
.menu{
position: absolute;
left: 70px;
top: 65px;
width:20px;
height:20px;
content:url(/menu.png)
}
.battery{
position: absolute;
left: 93%;
top: 50px;
width: 30px;
height:60px;
transform: rotate(90deg);
content:url(/100.png)
}
.one{
}
.two{
}
.three{
}
</style>
<!--//I've used bootstrap for the tables, so I inport the CSS files for taht as well...-->
<meta http-equiv="refresh" content="<?php echo $sec?>;URL='<?php echo $page?>'">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<?php
include("database_connect.php"); //We include the database_connect.php which has the data for the connection to the database
// Check the connection
if (mysqli_connect_errno()) {
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
//Again, we grab the table out of the database, name is ESPtable2 in this case
$result = mysqli_query($con,"SELECT * FROM ESPtable2");//table select
//Now we create the table with all the values from the database
//loop through the table and print the data into the table
while($row = mysqli_fetch_array($result)) {
$column1 = "RECEIVED_BOOL1";
$column2 = "RECEIVED_BOOL2";
$column3 = "RECEIVED_BOOL3";
$column4 = "RECEIVED_BOOL4";
$column5 = "RECEIVED_BOOL5";
}
?>
<div class="center">
<div class="menu"></div>
<div class="battery"></div>
<p>Rattengifmelder</p>
</div>
<?php
include("database_connect.php");
if (mysqli_connect_errno()) {
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$result = mysqli_query($con,"SELECT * FROM ESPtable2");//table select
echo "<table>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr class='active'>
<td style='color: grey;'>Grasveld achter</td>
</tr>
";
while($row = mysqli_fetch_array($result)) {
$cur_sent_bool_1 = $row['SENT_BOOL_1'];
$cur_sent_bool_2 = $row['SENT_BOOL_2'];
$cur_sent_bool_3 = $row['SENT_BOOL_3'];
if($cur_sent_bool_1 == 1){
$label_sent_bool_1 = "label-success";
$text_sent_bool_1 = "Actief";
}
else{
$label_sent_bool_1 = "label-danger";
$text_sent_bool_1 = "Inactief";
}
/*echo "<tr class='info'>";
$unit_id = $row['id'];
echo "<td>" . $row['id'] . "</td>"; */
echo "<td>
<span class='label $label_sent_bool_1'>"
. $text_sent_bool_1 . "</td>
</span>";
}
echo "</table>";
?>
<?php
include("database_connect.php");
if (mysqli_connect_errno()) {
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$result = mysqli_query($con,"SELECT * FROM ESPtable2");//table select
echo "<table>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr class='active'>
</tr>
";
while($row = mysqli_fetch_array($result)) {
echo "<tr class='info'>";
echo "<td style='background-color: transparent;'>" . $row['SENT_NUMBER_1'] . "% </td>";
echo "</tr></tbody>";
}
echo "</table>
<br>
";
?>
<div class="footer">
<p></p>
</div>
<div class="image"></div> // this is where the image is displayed
I didn't get where you are getting value of SENT_NUMBER_1 in your php code ??
then
SENT_NUMBER_1 should be $SENT_NUMBER_1
photo should be $photo
if($SENT_NUMBER_1 <= 10){
$photo = "10.png";
}
if($SENT_NUMBER_1 >= 11 && $SENT_NUMBER_1 <=25){
$photo = "25.png";
}
if($SENT_NUMBER_1 >= 26 && $SENT_NUMBER_1 <=49){
$photo = "50.png";
}
if($SENT_NUMBER_1 >= 50 && $SENT_NUMBER_1 <=74){
$photo = "75.png";
}
if($SENT_NUMBER_1 >= 75 && $SENT_NUMBER_1 <=100){
$photo = "100.png";
}
and then
<div class="image"><img src="<?php echo $photo;?>"></div> // this is where the image is displayed
also declare full path of image.
e.g.
$photo = 'imagefolder/100.png';

Simulate a4 page in html PHP LOOP

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>

How to change form with animation css in php code

So, i have forms and php code. I know how change form with button click
(by the way, animation does not work if the button is in the form. But if the button in outside of the form, it works, but it doesn't matter.)
Like this
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js">
$('#btn_1').click(function(){
$('#formsss').toggleClass('flipped')
});
</script>
But I do not know how to make the animation turn on through the condition code in php
<div id="formsss">
<div id="form_1">
<h3>Form 1</h3><br>
<form action="" method="POST">
<input name="input1" value="<?php echo $_POST[input1]; ?>">
<br>
<?php
if ( isset($_POST['clicked_btn_1']) )
{
$errors = array();
if (trim($_POST['input1'] == ''))
{
$errors[] = 'Enter text';
}
if (R::count('test', 'input1 = ?', array($_POST['input1'])) > 0)
{
$errors[] = 'Such data is already in the database';
}
if (empty($errors))
{
// SWITCH ON FORM 2 .... HOW?????
session_start();
$_SESSION['input1'] = $_POST['input1'];
}
else
{
echo '<div style="color: red;">'.array_shift($errors).'</div>';
}
}
?>
<button id="btn_1" type="submit" name="clicked_btn_1">Button 1</button>
</form>
</div>
<div id="form_2">
<h3>Form 2</h3><br>
<form action="" method="POST">
<input name="input2" value="<?php echo $_POST[input2]; ?>"><br>
<?php
if ( isset($_POST['clicked_btn_2']) )
{
$errors = array();
if (trim($_POST['input2'] == ''))
{
$errors[] = 'Enter text';
}
if (R::count('test', 'input2 = ?', array($_POST['input2'])) > 0)
{
$errors[] = 'Such data is already in the database';
}
if (empty($errors))
{
// put in a database of two forms
$test = R::dispense('test');
$test->input1 = $_SESSION['input1'];
$test->input2 = $_POST['input2'];
R::store($test);
}
else
{
echo '<div style="color: red;">'.array_shift($errors).'</div>';
}
}
?>
<button id="btn_2" type="submit" name="clicked_btn_2">Button 2</button>
</form>
</div>
</div>
css animation
#form_2{
-moz-transform: rotateY(-180deg)scale(.1)translateY(-70px);
-webkit-transform: rotateY(-180deg)scale(.1)translateY(-70px);
-o-transform: rotateY(-180deg)scale(.1)translateY(-70px);
transform: rotateY(-180deg)scale(.1)translateY(-70px);
filter: alpha(opacity=0);
opacity: 0;
z-index: 1;
}
#form_2, #form_1 {
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
-moz-transition: .6s;
-webkit-transition: .6s;
-o-transition: .6s;
transition: 600ms 0ms;
transition-delay: 0.1s;
-o-transition-delay: 0.1s;
-webkit-transition-delay: 0.1s;
-moz-transition-delay: 0.1s;
}
#form_2 {
bottom: 20px;
top: 359px;
left: 20px;
right: 20px;
}
#form_2, pre {
position: absolute;
}
/*************************************************/
.flipped#formsss {
overflow: hidden;
}
.flipped #form_1 {
-moz-transform: rotateY(180deg)scale(.7);
-webkit-transform: rotateY(180deg)scale(.7);
-o-transform: rotateY(180deg)scale(.7);
transform: rotateY(180deg)scale(.7);
filter: alpha(opacity=0);
opacity: 0;
}
.flipped #form_2 {
-moz-transform: rotateY(0)scale(1);
-webkit-transform: rotateY(0)scale(1);
-o-transform: rotateY(0)scale(1);
transform: rotateY(0)scale(1);
filter: alpha(opacity=100);
opacity: 1;
z-index: 5;
display: block;
}
To trigger the flip annimation on startup just add the bellow script output inside the condition inisde the php code :
if (empty($errors)) {
session_start();
$_SESSION['input1'] = $_POST['input1'];
// SWITCH ON FORM 2 .... HOW ?? , bellow code will switch :)
echo "<script type='text/javascript'>";
//the above will be executed after dom load
echo "$( function(){ $('#formsss').toggleClass('flipped'); })";
echo "</script>";
}

How to fix "Parse error: syntax error, unexpected ':'"? [duplicate]

This question already has answers here:
PHP parse/syntax errors; and how to solve them
(20 answers)
Closed 7 years ago.
I don't see any error on line 190: $query = “https://www.googleapis.com/youtube/v3/search?part=snippet&q=$search&maxResults=$per_page&videoCategoryId=$category&safesearch=strict&key=$apikey”;
<?php
error_reporting(1);
$movie = $_GET[movie];
$tmdb_api_key = '9366d6385a1a15cab92bdde8de2b98af'; // change it with your themoviedb.com API
$aff_link = 'http://google.com'; // your offer link
$image_host = 'http://image.tmdb.org/t/p/';
$json_tmdb = 'http://api.themoviedb.org/3/movie/'.$movie.'?api_key='.$tmdb_api_key.'&append_to_response=credits,images,trailers,keywords,releases,similar_movies';
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $json_tmdb);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, TRUE);
curl_setopt($ch, CURLOPT_HEADER, FALSE);
curl_setopt($ch, CURLOPT_HTTPHEADER, array("Accept: application/json"));
$response = curl_exec($ch);
curl_close($ch);
$data = json_decode($response);
if ($data->title == null) {
die;
}
$backdrop_to_background = $backdrop_to_player = 0;
$backdrops = count($data->images->backdrops);
if ($backdrops > 1) {
$backdrop_to_player = rand(0, $backdrops-1);
$backdrop_to_background = $backdrop_to_player;
while ($backdrop_to_background == $backdrop_to_player) {
$backdrop_to_background = rand(0, $backdrops-1);
}
}
$movie_title = $data->title;
$movie_runtime = $data->runtime;
$n = count($data->genres);
$i = 0;
$movie_genres = '';
while ($i <= $n-1) {
$movie_genres .= $data->genres[$i]->name;
if ($i < $n-1) {
$movie_genres .= ', ';
}
$i++;
}
$n = count($data->credits->cast);
$i = 0;
$movie_cast = '';
while ($i <= $n-1) {
$movie_cast .= $data->credits->cast[$i]->name . ' (' . $data->credits->cast[$i]->character . ')';
if ($i < $n-1) {
$movie_cast .= ', ';
}
$i++;
}
$movie_plot = $data->overview;
$movie_poster = $image_host.'w185'.$data->poster_path;
$movie_player = $image_host.'w780'.$data->images->backdrops[$backdrop_to_player]->file_path;
$movie_background = $image_host.'w780'.$data->images->backdrops[$backdrop_to_background]->file_path;
?>
<html>
<head>
<title>Watch <?php echo $movie_title;?> Full Movie</title>
<link href="img/favicon.ico" rel="shortcut icon">
<link href="http://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Cabin" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(
function(){
$("#player-play").click(
function(){
$("#player-container").attr("style","background: url(img/stripes.png); background-repeat : repeat; z-index: 1; width: 854px; height: 480px; margin: 100px auto; position: absolute; top:0; left:0; bottom:0; right:0; z-index: 1; opacity: 0.9; filter:alpha(opacity=90); border: 20px solid rgba(255, 0, 0, 0.3);");
$("#player-play").addClass("player-hidden");
$("#player-error").removeClass("player-hidden")
}
)
}
)
</script>
<style>
body {
margin : 0px 0px 0px 0px;
background-color: #060606;
}
.player-play {
width: 854px;
height: 480px;
background: url(img/inactive-button.png) no-repeat;
background-size: cover;
cursor: pointer;
z-index: 2;
}
.player-play:hover {
background : url(img/active-button.png) no-repeat;
}
.player-error {
padding-top : 22%;
max-width : 854px;
margin : 0 auto;
text-align : center;
line-height : 5px;
z-index : 2
}
.player-error p {
color : #fff;
font-size : 18px;
margin : 20px auto;
}
.player-error a {
color : #fff;
font-size : 22px;
text-decoration:underline;
}
.player-hidden {
display:none!important;
visibility:hidden!important;
}
.movie-title {
font-family: 'Lobster', Georgia, Times, serif;
font-size: 40px;
line-height: 50px;
color : #fff;
text-align: center;
margin-top: 15px;
}
.movie-plot {
font-family: 'Cabin', Helvetica, Arial, sans-serif;
font-size: 15px;
line-height: 20px;
color : #ffffff;
width: 854px;
margin : 570px auto;
text-align: justify;
}
</style>
</head>
<body>
<div class="movie-title">"<?php echo $movie_title; ?>" Full Movie</div>
<div style="background: url(<?php echo $movie_background;?>); background-attachment: fixed; background-repeat: no-repeat; background-size: cover; opacity: 0.3; filter:alpha(opacity=30); position:absolute; top:0; left:0; width:100%; height:100%;"></div>
<div style="background: url(<?php echo $movie_player;?>); background-repeat : no-repeat; background-size: cover; z-index: 1; width: 854px; height: 480px; margin: 100px auto auto; position: absolute; top:0; left:0; bottom:0; right:0; z-index: 1; border: 20px solid rgba(255, 0, 0, 0.3);" id="player-container">
<div class="player-play" id="player-play"></div>
<div class="player-error player-hidden" id="player-error">
<img src="img/error.png" alt="error">
<p>A plugin is needed to display this video.</p>
Install plugin...
</div>
</div>
<div class="movie-plot">
<img src="<?php echo $movie_poster;?>" style="float: left; width: 120px; margin:0px 10px 10px 0px;">
<p><b>Title : </b> <?php echo $movie_title; ?></p>
<p><b>Genre : </b> <?php echo $movie_genres; ?></p>
<p><b>Cast : </b> <?php echo $movie_cast; ?></p>
<p><b>Movie Plot : </b><?php echo $movie_plot;?><br><br></p>
</div>
<?php
$apikey = “my api deleted for post”;
$per_page = 6;
$search = “lucy”;
$category = “2”; //autos
$query = “https://www.googleapis.com/youtube/v3/search?part=snippet&q=$search&maxResults=$per_page&videoCategoryId=$category&safesearch=strict&key=$apikey”;
$json_file3 = file_get_contents(“$query”);
$jfo3 = json_decode($json_file3,true);
foreach($jfo3[‘items’] as $val) {
$title = $val[‘snippet’][‘title’];
$description = $val[‘snippet’][‘description’];
$id = $val[‘id’][‘videoId’];
$thumbnail_url = $val[‘snippet’][‘thumbnails’][‘default’][‘url’];
echo <<<EOF
<p><img width = “250” src = “$thumbnail_url” align = “right”></a>
<a href =”video-viewer.php?v=$id”>$title<BR>
$description</p><br clear=”all”><HR>
EOF;
?>
</body>
</html>
$query = "https://www.googleapis.com/youtube/v3/search?part=snippet&q=".$search."&maxResults=".$per_page."&videoCategoryId=".$category."&safesearch=strict&key=".$apikey;
This should work

CSS: Overflow in a DIV horizontally

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>

Categories