I have 3 divs ( Tables, Restaurants, Serveurs ( Waiters) )
so the scenario is :
1)create a table
2) drag it to restaurant div
3) drag waiters to the table
I use drag and drop functionality of html..
I wanted to sort the list of the waiters that are affected to a specific table.. I used Jquery plugin for that.. it worked properly
now I'm facing another issue that I couldn't remove a waiter from a table ( drop it back to list of waiters) just after adding that plugin...
This is the code..
<div class="col-md-6">
Restaurant
<div id="restaurant" class="restaurant" ondrop="drop(event,this)" ondragover="allowDrop(event)">
#for($i=1;$i<=count($tables);$i++)
<div id="table_{{$tables[$i-1]->id}}" style="height: {{count($tables[$i-1]->waitersAvailableTable)*80}}px;" class="table_restaurant sortable" draggable="true" ondragstart="drag(event)" ondragover="allowDrop(event)" ondrop="drop(event,this)">Table {{$tables[$i-1]->num_table}}
#foreach($tables[$i-1]->waitersAvailableTable as $waiterTable)
<div id="{{$waiterTable->waiter->id}}" class="waiter" draggable="true" ondragstart="drag(event)" table_id="table_{{$tables[$i-1]->id}}"><img src="{{asset($waiterTable->waiter->user->image)}}" height="40px;" />{{$waiterTable->waiter->user->name}} {{$waiterTable->waiter->user->surname}}</div>
#endforeach
</div>
#endfor
</div>
</div>
<div class="col-md-2">
<div>
<span>Serveurs </span>
</div>
<div id="waiters" class="waiters" ondrop="drop(event,this)" ondragover="allowDrop(event)">
#if(count($waiters)>0)
#foreach($waiters as $waiter)
<div id="{{$waiter->id}}" class="waiter" draggable="true" ondragstart="drag(event)" ><img src="{{asset($waiter->user->image)}}" height="40px;" />{{$waiter->user->name}} {{$waiter->user->surname}}</div>
#endforeach
#else
<li><span>Ajouter un serveur</span></li>
#endif
</div>
</div>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( ".sortable" ).sortable();
$( ".sortable" ).disableSelection();
} );
</script>
The sortable widget has a lot of drag and drop functionality built in, if you're using the widget, you should remove your own drag and drop code. Use the connectWith option to determine which lists should be allowed to have items drag and drop between them. You can use the events to hook in your own code to do things when items move between lists if necessary.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sortable</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style type="text/css">
.table_restaurant,
.waiters
{
min-height: 30px;
border: 1px solid #000;
}
.waiter
{
border: 1px solid #000;
padding: 5px;
margin: 5px;
}
</style>
</head>
<body>
<div class="row">
<div class="col-md-6">
Restaurant
<div id="restaurant" class="restaurant">
<div id="table_1" class="table_restaurant sortable connectedSortable" draggable="true""
ondrop="drop(event,this)">Table 1
<div id="waiter_1" class="waiter" draggable="true" ondragstart="drag(event)" table_id="table_1">Bob</div>
<div id="waiter_2" class="waiter" draggable="true" ondragstart="drag(event)" table_id="table_1">Alice</div>
</div>
</div>
<div id="table_2" class="table_restaurant sortable connectedSortable" draggable="true"">Table 1
<div id="waiter_3" class="waiter" draggable="true" ondragstart="drag(event)" table_id="table_2">Jim</div>
<div id="waiter_4" class="waiter" draggable="true" ondragstart="drag(event)" table_id="table_2">Zoe</div>
</div>
</div>
<div class="col-md-2">
<div>
<span>Serveurs </span>
</div>
<div id="waiters" class="waiters sortable connectedSortable" ondrop="drop(event,this)">
<div id="waiter_5" class="waiter" draggable="true" ondragstart="drag(event)">John</div>
<div id="waiter_6" class="waiter" draggable="true" ondragstart="drag(event)">Emily</div>
</div>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function () {
$(".sortable").sortable({
connectWith: '.connectedSortable'
}).disableSelection();
});
</script>
</body>
</html>
Consider the following example. If you really need to use <div> elements, you will have to adjust the items option for your Sortable.
$(function() {
$(".waiters").sortable({
connectWith: "ul.waiters",
placeholder: "target-drop"
});
$(".sortable").disableSelection();
});
.waiters {
list-style-type: none;
margin: 0;
padding: 0;
background: #eef;
min-height: 82px;
min-width: 82px;
}
.waiter {
height: 80px;
width: 80px;
text-align: center;
background: #CCCCCF;
margin: 1px;
padding: 4px 2px;
float: left;
}
.target-drop {
height: 78px;
width: 78px;
background: #EEE;
border: 1px dashed #ccc;
float: left;
margin: 1px;
padding: 4px 2px;
}
.waiter .waiter-name {
font-weight: normal;
font-size: .65em;
width: 60px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin: 0;
}
.r-table {
min-height: 90px;
border: 1px solid #CCC;
display: inline-block;
padding: 3px;
text-align: center;
}
.top4 {
width: 90px;
}
.top8 {
width: 172px;
}
.r-table .table-name {
font-weight: normal;
font-size: .65em;
line-height: 10px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="col-md-6">
Restaurant
<div id="restaurant" class="restaurant">
<div id="table-0" class="r-table top4">
<label class="table-name">Table 1</label>
<ul class="waiters">
</ul>
</div>
<div id="table-1" class="r-table top4">
<label class="table-name">Table 2</label>
<ul class="waiters">
</ul>
</div>
<div id="table-2" class="r-table top8">
<label class="table-name">Table 3</label>
<ul class="waiters">
</ul>
</div>
</div>
</div>
<div class="col-md-2">
<div>
<span>Serveurs</span>
</div>
<ul id="waiters" class="waiters" style="padding: 2px; min-height: 86px;">
<li id="waiter-1" class="waiter">
<img src="https://www.freeiconspng.com/uploads/bw-waiter-png-3.png" height="40px;" />
<label class="waiter-name">Bart Simpson</label>
</li>
<li id="waiter-2" class="waiter">
<img src="https://www.freeiconspng.com/uploads/bw-waiter-png-3.png" height="40px;" />
<label class="waiter-name">Lisa Simpson</label>
</li>
<li id="waiter-3" class="waiter">
<img src="https://www.freeiconspng.com/uploads/bw-waiter-png-3.png" height="40px;" />
<label class="waiter-name">Milhouse Van Houten</label>
</li>
<li id="waiter-4" class="waiter">
<img src="https://www.freeiconspng.com/uploads/bw-waiter-png-3.png" height="40px;" />
<label class="waiter-name">Martin Price</label>
</li>
</ul>
<p style="clear: both;">
<span>Ajouter un serveur</span>
</p>
</div>
This allows you to assign, move, or unassigned servers to tables. You did mention if you need to assign the same server to multiple tables or not.
Hope that helps.
Related
I've designated a background image for the whole page. On top of this I would like to have a header, with a solid background color, with my logo on the left side, business name in the middle, and my name on the right side.
Below this I would like 3 columns for the main page of my site, each probably with their own background color if that's possible.
I'm trying to use bootstrap to give my header three sections (logo-text-name), and I'd like the text to be centred.
The reason I have so much padding is because the logo kept hanging out the bottom of the header.
Now I'm sure there's a lot I'm doing wrong, but if anyone could help I'd be eternally grateful. Thanks.
body {
background-image: url(images/bg.jpg);
}
header {
background-color: #539e8a;
padding: 20px 10px 30px 10px;
color: #f6c5be;
border-radius: 25px;
margin-top: 10px;
height: 180px;
}
#logo {
width: 160px;
height: 140px;
float: left;
}
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<header>
<div class="container">
<div class="row">
<div class="col-xs-2">
<img id="logo" src="https://via.placeholder.com/160x140" alt="cakes 'n' bakes logo">
</div>
<div class="col-xs-8">
<h1>Cakes 'n' Bakes</h1>
</div>
<div class="col-xs-2">
<p>my name</p>
</div>
</div>
</div>
</header>
<div class="container">
<div id="main" class="row">
<div id="col1" class="col-sm-4">
<h2> col 1 </h2>
</div>
<div id="col2" class="col-sm-4">
<h2> col 2 </h2>
</div>
<div id="col3" class="col-sm-4">
<h2> col 3 </h2>
</div>
</div>
</div>
</body>
Bootstrap 5 really brings flexbox to the table, so I'd use that rather than wrestling with columns, which can be troublesome due to inflexibility.
Here I've replaced your container, row, and columns with a simple flex row. Item alignment on the cross axis centers things up. The center element has Bootstrap's flex-fill class on it to make it stretch.
Also notice that I've replaced your custom margin and padding with Bootstrap
spacing classes to clean things up.
body {
background-image: url(https://via.placeholder.com/1200);
}
header {
background-color: #539e8a;
color: #f6c5be;
border-radius: 25px;
}
#logo {
width: 160px;
height: 140px;
}
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<header class="mt-3">
<div class="d-flex align-items-center">
<img id="logo" src="https://via.placeholder.com/160x140" alt="cakes 'n' bakes logo" class="logo m-3">
<div class="flex-fill text-center">
<h1>Cakes 'n' Bakes</h1>
</div>
<div class="px-3">
<p>My Name</p>
</div>
</div>
</header>
<div class="container">
<div id="main" class="row">
<div id="col1" class="col-sm-4">
<h2> col 1 </h2>
</div>
<div id="col2" class="col-sm-4">
<h2> col 2 </h2>
</div>
<div id="col3" class="col-sm-4">
<h2> col 3 </h2>
</div>
</div>
</div>
</body>
I make some changes and add somethings to your code so I hope I hope I could help you!
body {
background-image: url(images/bg.jpg);
}
header {
background-color: #539e8a;
padding: 20px 10px 0px 0px;
color: #f6c5be;
border-radius: 25px;
margin-top: 10px;
height: 180px;
}
#logo {
width: 160px;
height: 140px;
}
#top-part-1 {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.col-xs-2 {
display: flex;
flex-direction: column;
justify-content: center;
}
.col-xs-8 {
display: flex;
flex-direction: column;
justify-content: center;
}
.header-2 {
padding: 20px 10px 0px 0px;
color: #000000;
border-radius: 25px;
margin-top: 10px;
height: 180px;
}
#top-part-2 {
display: flex;
flex-direction: row;
justify-content: space-between;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<header>
<div class="container" id="top-part-1">
<div class="col-xs-2">
<img id="logo" src="images/logo.png" alt="cakes 'n' bakes logo">
</div>
<div class="col-xs-8">
<h1>Cakes 'n' Bakes</h1>
</div>
<div class="col-xs-2">
<p>my name</p>
</div>
</div>
</header>
<div class="header-2">
<div class="container" id="top-part-2">
<div class="col-xs-2">
<h2> col 1 </h2>
</div>
<div class="col-xs-8">
<h2> col 2 </h2>
</div>
<div class="col-xs-2">
<h2> col 3 </h2>
</div>
</div>
</div>
code:
<style>
.center {
float: left;
text-align: center;
}
.center h3 {
color: #000;
font-weight: 600;
}
.left {
font-size: 14px;
float: left;
width: 30%;
color: #000;
}
.right {
font-size: 14px;
float: right;
width: 70%;
color: #000;
}
#bot {
margin-bottom: 2em;
}
#left {
font-size: 14px;
float: left;
width: 42%;
color: #000;
}
#right {
font-size: 14px;
float: right;
width: 58%;
color: #000;
}
table, td, th {
border: 1px solid #000;
text-align: left;
font-size: 14px;
font-weight: inherit;
}
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 15px;
}
#pp {
font-size:14px;
color:#000;
}
.table-responsive {
overflow-x: hidden!important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
padding:0px!important;
}
</style>
<div class="col-md-12">
<a href="javascript:void(0)" class="btn btn-success" style="float: right;" onclick='printDiv();'>Print Sheet</a>
</div>
<div id="print_wrapp">
<div class="col-md-12" id="bot">
<div class="col-md-2">
<img src="<?php echo base_url(); ?>uploads/images/Lingayas Vidyapeeth Logo.png" class="img-responsive" style="width: 110px;">
</div>
<div class="col-md-10">
<div class="center">
<h3>
Lingaya's Vidyapeeth, Fraidabad<br>
Award Sheet<br>
End Semester Examination<br>
(May-June, 2019)
</h3>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12" id="bot">
<div class="col-md-6">
<div class="left">
<p>Department: </p>
</div>
<div class="right">
<p><?php echo $award[0]['department_name']?></p>
</div>
<div class="left">
<p>Program/Course: </p>
</div>
<div class="right">
<p><?php echo $award[0]['classes']?></p>
</div>
<div class="left">
<p>Subject Name: </p>
</div>
<div class="right">
<p><?php echo $award[0]['subject']?></p>
</div>
<div class="left">
<p>Session: </p>
</div>
<div class="right">
<p><?php echo $award[0]['session']?></p>
</div>
</div>
<div class="col-md-6">
<div class="left">
<p>Semester: </p>
</div>
<div class="right">
<p><?php echo $award[0]['yearsOrSemester']?></p>
</div>
<div class="left">
<p>Subject Code: </p>
</div>
<div class="right">
<p><?php echo $award[0]['subject_code']?></p>
</div>
<div class="left">
<p>Maximum Marks: </p>
</div>
<div class="right">
<p></p>
</div>
</div>
</div>
<div class="col-md-12" id="bot">
<div class="col-md-12">
<div class="table-responsive">
<table id="example1" class="table table-striped table-bordered table-hover dataTable no-footer">
<thead>
<th>S.No.</th>
<th>Roll No.</th>
<th>Marks(In Figure)</th>
<th>Marks(in Words)</th>
</thead>
<tbody>
<?php
$i=1;
foreach($award as $row)
{
?>
<tr>
<td><?php echo $i; ?></td>
<td><?php echo $row['roll']; ?></td>
<td></td>
<td></td>
</tr>
<?php
$i++;
}
?>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-md-12" id="bot">
<div class="col-md-6">
<div id="left">
<p>Total No. of Student Pass: </p>
</div>
<div id="right">
<p></p>
</div>
</div>
<div class="col-md-6">
<div id="left">
<p>Total No. of Student Fail: </p>
</div>
<div id="right">
<p></p>
</div>
</div>
</div>
</div>
</div>
<script>
function printDiv()
{
var divToPrint=document.getElementById('print_wrapp');
var newWin=window.open('','Print-Window');
newWin.document.open();
newWin.document.write('<html><link rel="stylesheet" href="<?php echo base_url(); ?>assets/plugins/bootstrap/css/bootstrap.css" type="text/css" /><body onload="window.print()">'+divToPrint.innerHTML+'</body></html>');
newWin.document.close();
setTimeout(function(){newWin.close();},10);
}
</script>
In this code I am simply run print content inside div <div id="print_wrapp"> by click function i.e printDiv and its working properly but the problem is that print preview css not showing div content properly and an image is mention below:
and my original page look like:
So, How can I fix this problem? Please help me.
Thank You
You can apply the style sheet too both print and screen using media='screen,print'
<link ../bootstrap.min.css' rel='stylesheet' media='screen,print'>
or
<link ../bootstrap.min.css' rel='stylesheet' media='all'>
When we want to apply some style when printing a page, we need to apply the styles using #media print. Then only the style will apply for windows print function.
Style.css
#media print
{
.center {
float: left;
text-align: center;
}
.center h3 {
color: #000;
font-weight: 600;
}
.left {
font-size: 14px;
float: left;
width: 30%;
color: #000;
}
.right {
font-size: 14px;
float: right;
width: 70%;
color: #000;
}
}
Then link the css file where you want to print the page with style.
<link rel="stylesheet" type="text/css" href="Style.css">
Call the Print Function on Button Click
<button onclick="printPage()" class="center">Print</button>
<script>
function printPage()
{
print();
}
</script>
Hello i have a difficulty in setting up the width for the input radio button.
As you can see i'm using a ui-grid-b. the problem here is in the ui-block-c.. where in block-c i'm insert the control group for the radio button. I want to set the width for radio button for id 'full' is 60%, radio button id'half' is 20% and for the radio button id'one' is 20%.. which mean it total 100% that equal to the width for the ui-controlgroup-controls. i want to use the maximum width for the ui-controlgroup-controls with the different width for each radio button
<style>
.ui-grid-b>.ui-block-a {
width: 25%;
}
.ui-grid-b>.ui-block-b, .ui-grid-b>.ui-block-c {
width: 15%;
}
.ui-grid-b>.ui-block-c {
width: 60%;
}
#myGroup {
font-size: 84%;
}
#myGroup .ui-controlgroup-label{
float: none;
display: block;
text-align: center;
width: 100%;
}
#myGroup .ui-controlgroup-label legend{
font-weight: bold;
font-size: 130%;
width: 100%;
margin-bottom: 8px;
}
#myGroup .ui-controlgroup-controls {
float: none;
display: block;
width: 100%;
}
#myGroup .ui-radio{
width: 33.33%;
}
#myGroup .ui-radio label{
text-align: center;
white-space: nowrap;
}
</style>
</head>
<body>
<div data-role="page" id="login">
<div data-role="header" style="background-color:rgba(4, 165, 52, 0.86);">
<h1 align="center">
Header
</h1>
</div>
<div data-role="content" class="content">
<div class="ui-grid-b">
<div class="ui-block-a">
<input type="text" value="Input"/>
</div>
<div class="ui-block-b">
</div>
<div class="ui-block-c">
<div id="myGroup" data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="false" data-theme="b" data-corners="false"> <!-- strength -->
<input type="radio" name="full" id="full" value="" />
<label for="full" >Full</label>
<input type="radio" name="half" id="half" value="" />
<label for="radio-view-b" >Half</label>
<input type="radio" name="one" id="one" value="" />
<label for="one" >One</label>
</fieldset>
</div>
</div>
</div>
</div>
<div class="footer" data-role="footer" data-position="fixed">
<h1 align="center"><i>Footer</i></h1>
</div>
</div>
I have created this Bootstrap Form for my website so that clients can contact me. i am using PHP to send the form to my email address. The form gets sent to my email address but when i receive it, the information put into the text fields of the form doesn't show up.
Any help/advice would be greatly appreciated.
<?PHP
/* Subject & Email Variables */
$emailSubject = 'Photography Quote';
$webMaster = 'ryanandelissa#seawardphotography.com';
/* Gathering Data Variables*/
$firstname = $_POST['firstname'];
$lastname = $_POST['lastname'];
$email = $_POST['email'];
$hdyhau = $_POST['hdyhau'];
$message = $_POST['message'];
$body = <<<EOD
<br><hr><br>
First Name: $firstname <br>
Last Name: $lastname <br>
Email: $email <br>
How Did You Hear About Us?: $hdyhau <br>
Message: $message <br>
EOD;
$headers = "From: $email\r\n";
$headers .= "Content-type: text/html\r\n";
$headers = mail($webMaster, $emailSubject, $body, $headers);
/* Results Rendered As HTML */
$theResults = <<<EOD
<html>
<head>
<title>Contact Us</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="Contact.css">
<link href='http://fonts.googleapis.com/css?family=Lora' rel='stylesheet' type='text/css'>
<style type="text/css">
/*logo*/
img{
display: block;
margin-left: auto;
margin-right: auto;
}
/*navbar*/
#wrap{
text-align: center;
font-family: "Lora" serif;
font-size: 13px;
font-weight: normal;
padding-right: 48px;
padding-bottom: 40px;
}
.navbar li a{
display: block;
}
.navbar li{
display: inline-block;
list-style: none;
text-align: left;
}
.navbar a{
text-decoration: none;
color: #9c9c9c;
display: block;
padding: 8px;
background-color: white;
}
.navbar li ul{
position: absolute;
display: none;
margin: 0;
padding: 0;
height: auto;
}
.navbar li:hover, a:hover{
color: black;
}
.navbar li:hover ul{
display: block;
}
.navbar li ul li {
display: block;
}
h1{
text-align: center;
font-family: 'Lora' serif;
font-size: 25px;
padding-bottom: 30px;
}
input[type=button]{
border: 2px solid #9c9c9c;
background-color: white;
color: #9c9c9c;
display: block;
padding: 10px;
width: 100px;
margin-left: auto;
margin-right: auto;
}
input[type=button]:hover{
background-color: #9c9c9c;
color: white;
border: 2px #9c9c9c;
padding: 10px;
height: 41px;
}
/*footer*/
footer{
text-align: center;
font-family: "Lora" serif;
font-size: 10px;
font-weight: normal;
padding-top: 30px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-12">
<img src="Images/NewLogoBlack.png" class="img-responsive" width="250px" height="250px">
</div>
<div class="clearfix visible-sm-block"></div>
<div class="clearfix visible-md-block"></div>
<div class="clearfix visible-lg-block"></div>
<div class="col-sm-12 col-md-12">
<div id="wrap">
<ul class="navbar">
<li>HOME</li>
<li>PORTFOLIO
<ul>
<li>WEDDING</li>
<li>LOVE</li>
</ul>
</li>
<li>ABOUT
<ul>
<li>US</li>
</ul>
</li>
<li>BLOG
<ul>
<li>STORIES</li>
<li>ARCHIVE</li>
</ul>
</li>
<li>CONTACT</li>
</ul>
</div>
</div>
<div class="clearfix visible-sm-block"></div>
<div class="clearfix visible-md-block"></div>
<div class="clearfix visible-lg-block"></div>
<div class="col-sm-12 col-md-12">
<h1>Thank you for your inquiry. We'll be in contact shortly.</h1>
</div>
<div class="clearfix visible-sm-block"></div>
<div class="clearfix visible-md-block"></div>
<div class="clearfix visible-lg-block"></div>
<form action="Instagram.html">
<input type="button" value="HOME">
</form>
<div class="clearfix visible-sm-block"></div>
<div class="clearfix visible-md-block"></div>
<div class="clearfix visible-lg-block"></div>
<div class="col-sm-12 col-md-12"><footer>All images Copyright © Seaward Photography 2016. Based in San Diego, California. Available for destinations worldwide.</footer></div>
<div class="clearfix visible-sm-block"></div>
<div class="clearfix visible-md-block"></div>
<div class="clearfix visible-lg-block"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
</body>
</html>
EOD;
echo($theResults);
?>
/*logo*/
img{
display: block;
margin-left: auto;
margin-right: auto;
}
/*navbar*/
#wrap{
text-align: center;
font-family: "Lora" serif;
font-size: 13px;
font-weight: normal;
padding-right: 48px;
padding-bottom: 40px;
}
.navbar li a{
display: block;
}
.navbar li{
display: inline-block;
list-style: none;
text-align: left;
}
.navbar a{
text-decoration: none;
color: #9c9c9c;
display: block;
padding: 8px;
background-color: white;
}
.navbar li ul{
position: absolute;
display: none;
margin: 0;
padding: 0;
height: auto;
}
.navbar li:hover, a:hover{
color: black;
}
.navbar li:hover ul{
display: block;
}
.navbar li ul li {
display: block;
}
/*image*/
.contact img{
width: 70%;
}
/* form */
.form label{
padding-top: 30px;
padding-left: 400px;
display: block;
float: right;
padding-right: 189px;
font-family: "Lora" serif;
font-size: 12px;
}
input, textarea{
font: 1em "Lora" sans-serif;
width:300px;
}
textarea{
vertical-align: top;
height: 5em;
resize: vertical;
}
input[type=submit]{
border: 2px solid #9c9c9c;
background-color: white;
color: #9c9c9c;
display: block;
padding: 10px;
width: 100px;
margin-left: auto;
margin-right: auto;
}
input[type=submit]:hover{
background-color: #9c9c9c;
color: white;
border: 2px #9c9c9c;
padding: 10px;
height: 44px;
}
/*footer*/
footer{
text-align: center;
font-family: "Lora" serif;
font-size: 10px;
font-weight: normal;
padding-top: 10px;
}
<!DOCTYPE html>
<html>
<head>
<title>Contact Us</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="Contact.css">
<link href='http://fonts.googleapis.com/css?family=Lora' rel='stylesheet' type='text/css'>
<style type="text/css">
img{
padding-bottom: 30px;
}
.contact-form{
padding: 20px;
}
label{
font-family: "Lora" serif;
font-weight: 300;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-12">
<img src="Images/NewLogoBlack.png" class="img-responsive" width="250px" height="250px">
</div>
<div class="clearfix visible-sm-block"></div>
<div class="clearfix visible-md-block"></div>
<div class="clearfix visible-lg-block"></div>
<div class="col-sm-12 col-md-12">
<div id="wrap">
<ul class="navbar">
<li>HOME</li>
<li>PORTFOLIO
<ul>
<li>WEDDING</li>
<li>LOVE</li>
</ul>
</li>
<li>ABOUT
<ul>
<li>US</li>
</ul>
</li>
<li>BLOG
<ul>
<li>STORIES</li>
<li>ARCHIVE</li>
</ul>
</li>
<li>CONTACT</li>
</ul>
</div>
</div>
<div class="clearfix visible-sm-block"></div>
<div class="clearfix visible-md-block"></div>
<div class="clearfix visible-lg-block"></div>
<div class="col-sm-12 col-md-12">
<div class="img-list">
<img src="Images/ContactImage.jpg" class="img-responsive" width="750px" height="auto" />
</div>
</div>
<div class="clearfix visible-sm-block"></div>
<div class="clearfix visible-md-block"></div>
<div class="clearfix visible-lg-block"></div>
<form method="post" action="Contact%20Form.php" >
<div class="contact-form">
<div class="row">
<div class="col-md-6 ">
<div class="form-group">
<label for="firstname">First Name</label>
<input type="text" class="form-control" name="firstname">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="lastname">Last Name</label>
<input type="text" class="form-control" name="lastname">
</div>
</div>
<div class="clearfix visible-md-block"></div>
<div class="col-md-12">
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" name="email">
</div>
<div class="clearfix visible-md-block"></div>
<div class="form-group">
<label for="hdyhau">How Did You Hear About Us?</label>
<input type="text" class="form-control" name="hdyhau">
</div>
<div class="form-group">
<label for="message">Message</label>
<textarea class="form-control" rows="4" name="message"></textarea>
</div>
<div class="form-group">
<div class="col-sm-8 col-sm-offset-2">
<input id="submit" name="submit" type="submit" value="SEND!" class="btn btn-primary">
</div>
</div>
</div>
</form>
<div class="col-sm-12 col-md-12"><footer>All images Copyright © Seaward Photography 2016. Based in San Diego, California. Available for destinations worldwide.</footer></div>
<div class="clearfix visible-sm-block"></div>
<div class="clearfix visible-md-block"></div>
<div class="clearfix visible-lg-block"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
</body>
</html>
Even though this was a typo, missing a dot/concatenate in the following and "breaking the chain, as it were":
$headers = "From: $email\r\n";
$headers .= "Content-type: text/html\r\n";
$headers = mail($webMaster, $emailSubject, $body, $headers);
^ Missing a dot/concatenate and is "broken"
that should have read as:
$headers .= mail($webMaster, $emailSubject, $body, $headers);
You really should be checking for empty fields, as you risk in receiving empty emails.
For example and being a serverside method which is best to also use should a user disable JS, the following does that and checks if the submit button is also clicked:
if(isset($_POST['submit'])){
if(!empty($_POST['firstname'])
&& !empty($_POST['lastname'])
&& !empty($_POST['email'])
&& !empty($_POST['hdyhau'])
&& !empty($_POST['message']) )
{
// Send the mail here
}
}
You could also use the (HTML5) required attribute for your inputs.
I.e.:
<input type="text" class="form-control" name="firstname" required>
Also look into the following for a JS method:
Mark error in form using Bootstrap
how to disable a send button if fields empty bootstrap
Validate input text in bootstrap modal
I'm creating a webpage that contains tables that pull data from mysql database. When I want to add a footer, footer does not show up at the bottom of the page. I've tried html's regular footer class, bootstrap footer, sticky footer but none of them worked. I've also tried all position values. Even though I write random stuff at the bottom of the code, before the body closing tag, it still shows it at the beginning.
You can see the page from: http://sagtekin.com/letseat/donat.php
Thank you very much for your help.
Edit: Code is below:
<!DOCTYPE html>
<html>
<head>
<meta content="width=device-width, initial-scale=1" name="viewport" />
<meta content="text/html;charset=iso-8859-9" http-equiv="content-type">
<meta content="text/html;charset=windows-1254" http-equiv="content-type">
<meta content="text/html;charset=x-mac-turkish" http-equiv="content-type">
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.2/material.min.js"></script>
<link href="https://storage.googleapis.com/code.getmdl.io/1.0.2/material.indigo-pink.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<link href="http://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css" />
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link href="css/w3.css" rel="stylesheet" />
<title>Let's Eat - Donatello Pizza</title>
<style>
body {
background: url(background/bg-03.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
font-family: 'Roboto', sans-serif;
}
#infoCard {
background: #FAFAFA;
margin-top: 100px;
}
#header {
position: fixed;
width: 100%;
z-index: 1;
box-shadow: 0px 0px 10px 6px rgba(101, 94, 94, 0.75);
-moz-box-shadow: 0px 0px 10px 6px rgba(101, 94, 94, 0.75);
-webkit-box-shadow: 0px 0px 10px 6px rgba(101, 94, 94, 0.75);
}
div {
border-radius: 5px;
}
</style>
</head>
<body>
<header id="header" class="w3-container w3-teal">
<h1><b>LET'S EAT</b></h1>
</header>
<div class="w3-responsive">
<div class="w3-third w3-container">
</div>
<div class="w3-third w3-container">
<div id="infoCard" class="w3-card-16">
<header class="w3-container w3-teal">
<h1>Donatello Pizza</h1>
</header>
<p style="color: #4CAF50; text-align: center; margin-top: 10px; font-size: large; vertical-align: middle;">
<b>OPEN</b></p>
<hr />
<div>
<p id="textDisplay" style="text-align: center">Hover your mouse
over the buttons.</p>
</div>
<hr />
<div class="btn-group btn-group-justified">
<a class="btn btn-primary" href="tel:05338643695" onmouseout="resetText()" onmouseover="changeTextTurkcell()">
Turkcell</a>
<a class="btn btn-primary" href="tel:05488643695" onmouseout="resetText()" onmouseover="changeTextTelsim()">
Telsim</a>
<a class="btn btn-primary" href="tel:03927147083" onmouseout="resetText()" onmouseover="changeTextLandLine()">
Landline</a>
<script>
function changeTextTurkcell()
{
document.getElementById("textDisplay").innerHTML="<b>0533 864 3695</b>";
}
function changeTextTelsim()
{
document.getElementById("textDisplay").innerHTML="<b>0548 864 3695</b>";
}
function changeTextLandLine()
{
document.getElementById("textDisplay").innerHTML="<b>0392 714 7083</b>";
}
function resetText()
{
document.getElementById("textDisplay").innerHTML="Hover your mouse over the buttons.";
}
</script>
</div>
</div>
</div>
<div class="w3-third w3-container">
</div>
</div>
<div class="w3-quarter w3-container">
</div>
<div class="w3-half w3-container">
<div class="w3-responsive w3-card-16" style="margin-top: 50px; background-color: #FAFAFA">
<header class="w3-container w3-pink">
<h3>Breakfast</h3>
</header>
<table class="table">
<!--Table contents-->
</table>
</div>
<div class="w3-responsive w3-card-16" style="margin-top: 30px; background-color: #FAFAFA">
<header class="w3-container w3-pink">
<h3>Pizzas</h3>
</header>
<table class="table">
<!--Table contents-->
</table>
</div>
<div class="w3-responsive w3-card-16" style="margin-top: 30px; background-color: #FAFAFA">
<header class="w3-container w3-pink">
<h3>Chicken</h3>
</header>
<table class="table">
<!--Table contents-->
</table>
</div>
<div class="w3-responsive w3-card-16" style="margin-top: 30px; background-color: #FAFAFA">
<header class="w3-container w3-pink">
<h3>Pasta</h3>
</header>
<table class="table">
<!--Table contents-->
</table>
</div>
<div class="w3-responsive w3-card-16" style="margin-top: 30px; background-color: #FAFAFA">
<header class="w3-container w3-pink">
<h3>Other</h3>
</header>
<table class="table">
<!--Table contents-->
</table>
</div>
<div class="w3-quarter w3-container">
</div>
</div>
<!--<div class="w3-container w3-teal" style="position:absolute; bottom:0px;">
<h5>LET'S EAT</h5>
<p>© 2015 Poyraz Sagtekin.</p>
</div>-->ergkjlhkjgekjhjkhjwhwjhgwhgwhgwkhgrlgrwhjlhkjgwhr
</body>
</html>
I isolated what I presumed to be your footer code which was a string of letters like:
ergkjlhkjgekjhjkhjwhwjhgwhgwhgwkhgrlgrwhjlhkjgwhr
I wrapped that in a div with the following styles and it appeared at the bottom of the page:
<div style="clear:both;">
ergkjlhkjgekjhjkhjwhwjhgwhgwhgwkhgrlgrwhjlhkjgwhr
</div>
It appears you just need to clear your previous element to "force" your footer to the bottom of the page.
Extension to #Samuels answer, you must put that in a <div> or a <footer> tag and then style it by simply using clear: both; or you could add more to it like position: fixed; bottom: 0; line-height: 15px; the list could go on and on.