Related
I'm trying to create a section in which the information submitted by user thru a form is displayed as a marquee!
I don't know what exactly should I use to make that happen?
Here are the code for the form:
html, body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: grey;
}
*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.marquee-section {
max-width:100%;
max-height: 100%;
height: 300px;
position:relative;
background-color: #ef6;
padding: 10px 20px;
}
.marquee-heading {
font-size: 28px;
font-weight: 600;
text-align: center;
}
.marquee-info {
max-width:600px;
width:100%;
margin:0 auto;
padding: 0 10px;
float: left;
position: relative;
}
.contact-section {
max-width:100%;
max-height: 100%;
height: 580px;
position:relative;
background-color: #fff;
padding: 10px 20px;
}
.contact-heading {
font-size: 28px;
font-weight: 600;
text-align: center;
}
.contactForm {
max-width:600px;
width:100%;
margin:0 auto;
padding: 0 10px;
float: left;
position: relative;
}
#contact input[type="text"], #contact input[type="email"], #contact textarea, #contact button[type="submit"] { font:400 50px/16px "Raleway", Helvetica, Arial, sans-serif; }
#contact {
padding:10px;
margin:5px 0;
}
#contact h3 {
color: #F96;
display: block;
font-size: 50px;
font-weight: 400;
}
#contact h4 {
margin:5px 0 15px;
display:block;
font-size:13px;
}
fieldset label {
font-size: 16px;
font-weight: 500;
}
fieldset {
border: medium none !important;
margin: 0 0 10px !important;
min-width: 100%;
padding: 0;
width: 100%;
}
#contact input[type="text"], #contact input[type="email"], #contact textarea {
width:100%;
max-width:700px;
border-style: solid;
border-color: #afafaf;
border-width: 1px;
border-radius: 5px;
margin-bottom: 5px;
background-color: rgba(255, 255, 255, 0.7);
padding: 10px;
height: 45px;
font-size: 0.8em;
line-height: 1.2em;
color: #111;
position: relative;
}
#contact input[type="text"]:hover, #contact input[type="email"]:hover, #contact textarea:hover {
-webkit-transition:border-color 0.3s ease-in-out;
-moz-transition:border-color 0.3s ease-in-out;
transition:border-color 0.3s ease-in-out;
border:1px solid #4872bc;
}
#contact textarea {
height:180px;
max-width:100%;
resize:none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
}
#contact button[type="submit"] {
cursor:pointer;
margin:0 0 5px;
padding: 10px;
height: 45px;
width: 100%;
max-width: 150px;
color: #282626;
font-size: 16px;
font-weight: 600;
border-style: solid;
border-color: #878787;
border-width: 1px;
border-radius: 5px;
background-color: rgba(255, 255, 255, 0);
}
#contact button[type="submit"]:hover {
background-color: rgba(255, 255, 255, 0.3);
-webkit-transition:background 0.3s ease-in-out;
-moz-transition:background 0.3s ease-in-out;
transition:background-color 0.3s ease-in-out;
}
#contact button[type="submit"]:active { box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.5); }
#contact input:focus, #contact textarea:focus {
outline:0;
border:1px solid #999;
}
::-webkit-input-placeholder {
color:#878787;
}
:-moz-placeholder {
color:#878787;
}
::-moz-placeholder {
color:#878787;
}
:-ms-input-placeholder {
color:#878787;
}
<div class="marquee-section">
<h1 class="marquee-heading">Opinions:</h1>
<div class="marquee-info">
<marquee><span>Climate chnage is real by Wallace C.</span></marquee>
</div>
</div>
<div class="contact-section">
<h1 class="contact-heading">Type the info here!</h1>
<div class="contactForm">
<form id="contact">
<fieldset>
<label for="name">Name</label>
<input name="name" type="text">
</fieldset>
<fieldset>
<label for="name">Email</label>
<input name="email" type="text">
</fieldset>
<fieldset>
<label for="name">Opinion</label>
<textarea name="message" rows="4" cols="50"></textarea>
</fieldset>
<fieldset>
<center><button name="submit" type="submit">Submit</button></center>
</fieldset>
</form>
</div>
</div>
I want the form information after submission to be displayed in the "marquee-info" of the "marquee-section"
You need a fresh approach. <marquee> and <center> are deprecated, you shouldn't even be using a form since you aren't submitting data anywhere and you've got tons and tons of unnecessary CSS. You are also not using the label element correctly - - the for attribute value must match the id of the element that the label is "for", not the name attribute value.
You just need a textbox and a regular button with a click event handler. Then, you'll use JavaScript to modify the left CSS property on a timer. See comments inline:
// Get references to all the DOM elements you'll work with
let output = document.querySelector(".output");
let email = document.getElementById("email");
let message = document.getElementById("message");
let timer = null; // Will reference timer
// Set up button click event handler
document.querySelector("button").addEventListener("click", move);
function move(){
clearTimeout(timer); // Prevent multiple timers
// Get current left position of output
let currentLeft = parseInt(getComputedStyle(output).left, 10);
// If output is off the screen, move it to the right.
// If not, move it 3px to the left
let outputWidth = parseInt(getComputedStyle(output).width, 10);
if(currentLeft < (0 - outputWidth)){
currentLeft = window.innerWidth;
} else {
currentLeft -= 3;
}
// Update and Move the output
output.textContent = message.value;
output.style.left = currentLeft + "px";
// Create a timer to recursively call this function
timer = setTimeout(move, 25);
}
html, body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
*, *:after, *:before {
box-sizing: border-box;
}
.marquee-section {
max-width:100%;
max-height: 100%;
height: 300px;
background-color: #ef6;
padding: 10px 20px;
}
.marquee-heading {
font-size: 28px;
font-weight: 600;
text-align: center;
}
.marquee-info {
width:100%;
max-width:600px;
margin:0 auto;
padding: 0 10px;
}
.output { position:absolute; }
.contact-section {
max-width:100%;
max-height: 100%;
height: 580px;
padding: 10px 20px;
}
.contact-heading {
font-size: 28px;
font-weight: 600;
text-align: center;
}
.contactForm {
max-width:600px;
width:100%;
padding:10px;
margin:5px 0;
}
.contactForm input[type="text"], #contact input[type="email"], .contactForm textarea, #contact button[type="submit"] { font:400 50px/16px "Raleway", Helvetica, Arial, sans-serif; }
label {
font-size: 16px;
font-weight: 500;
}
.contactForm input, .contactForm input[type="email"], .contactForm textarea {
width:100%;
max-width:700px;
border-style: solid;
border-color: #afafaf;
border-width: 1px;
border-radius: 5px;
margin-bottom: 5px;
background-color: rgba(255, 255, 255, 0.7);
padding: 10px;
height: 45px;
font-size: 0.8em;
line-height: 1.2em;
color: #111;
}
.contactForm input:hover, #contact input[type="email"]:hover, .contactForm textarea:hover {
transition:border-color 0.3s ease-in-out;
border:1px solid #4872bc;
}
.contactForm textarea {
height:180px;
max-width:100%;
resize:none;
width: 100%;
}
.contactForm button {
cursor:pointer;
margin:0 0 5px;
padding: 10px;
height: 45px;
width: 100%;
max-width: 150px;
color: #282626;
font-size: 16px;
font-weight: 600;
border-width: 1px solid #878787;
border-radius: 5px;
background-color: rgba(255, 255, 255, 0);
}
.contactForm button:hover {
background-color: rgba(255, 255, 255, 0.3);
transition:background-color 0.3s ease-in-out;
}
.contactForm button:active { box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.5); }
.contactForm input:focus, .contactForm textarea:focus {
outline:0;
border:1px solid #999;
}
::-webkit-input-placeholder { color:#878787; }
:-moz-placeholder { color:#878787; }
::-moz-placeholder { color:#878787; }
:-ms-input-placeholder { color:#878787; }
<div class="marquee-section">
<h1 class="marquee-heading">Opinions:</h1>
<div class="marquee-info">
<span class="output">Climate change is real by Wallace C.</span>
</div>
</div>
<div class="contact-section">
<h1 class="contact-heading">Type the info here!</h1>
<div class="contactForm">
<div class="row">
<label for="name">Name</label>
<input id="userName">
</div>
<div class="row">
<label for="email">Email</label>
<input id="email" type="email">
</div>
<div class="row">
<label for="message">Opinion</label>
<textarea id="message"></textarea>
</div>
<div class="row">
<button type="button">Submit</button>
</div>
</div>
</div>
No matter what I do, I keep getting 500 (Internal Server Errors) when attempting to perform a POST to https://rates.tradelanes.us/bankaccount/record/create. I believe its the format of my data, but when I compare what my output is to others trying the same thing--my data format is identical; others are not getting the 500 error, so it must be how my data is formatted. The only documentation I have with the API is https://rates.tradelanes.us/bankaccount/help/api--so not much more to go on.
Here is the error I'm getting.. If you wanted to see what a sample record looks like:
{"Id":1,"Memo":"Sample Record","Amount":10.00,"TransactionDate":"\/Date(1503500694627)\/","Account":1,"Transaction":0}
Here is my code:
$(document).ready(function() {
var table_records = $("#table_records").dataTable({
"processing": true,
"ajax": {
"url": "https://rates.tradelanes.us/bankaccount/records",
dataSrc: ""
},
"columns": [{
"data": "Id"
}, {
"data": "Memo"
}, {
"data": "Amount"
}, {
"data": "TransactionDate"
}, {
"data": "Account"
}, {
"data": "Transaction"
}]
});
//Show popup for creating new record
function show_lightbox() {
$(".lightbox_bg").show();
$(".lightbox_container").show();
}
//Hide popup for creating new record
function hide_lightbox() {
$(".lightbox_bg").hide();
$(".lightbox_container").hide();
}
//Clicking the "Close" button or outside of the lightbox should close the lightbox
$(document).on("click", ".lightbox_bg", function() {
hide_lightbox();
});
$(document).on("click", ".lightbox_close", function() {
hide_lightbox();
});
//Handle clicking the "Create" button
$(document).on("click", "#createButton", function(e) {
e.preventDefault();
$(".lightbox_content h2").text("Create record");
$("#form_create button").text("Create record");
$("#form_create").attr("class", "form add");
$("#form_create").attr("data-id", "");
$("#form_create .field_container").removeClass("valid").removeClass("error");
$("#form_create #id").val("");
$("#form_create #memo").val("");
$("#form_create #amount").val("");
$("#form_create #transactiondate").val("");
$("#form_create #account").val("");
$("#form_create #transaction").val("");
show_lightbox();
});
function getFormData($form) {
var unindexed_array = $form.serializeArray();
var indexed_array = {};
$.map(unindexed_array, function(n, i) {
indexed_array[n['name']] = n['value'];
});
return indexed_array;
}
//Handle form submission
$(document).on("submit", "#form_create.add", function(e) {
e.preventDefault();
hide_lightbox();
var $form = $("#form_create");
var form_data = getFormData($form);
console.log(form_data);
var req = $.ajax({
url: "https://rates.tradelanes.us/bankaccount/record/create",
cache: false,
data: form_data,
dataType: "application/json",
contentType: "application/json; charset=utf-8",
type: "post"
});
req.done(function(out) {
if (out.result == "success") {
table_records.api().ajax.reload(function() {
alert("Record added successfully");
}, true);
} else {
alert("Record failed to be created");
}
});
req.fail(function(jqXHR, textStatus, errorThrown) {
console.log(jqXHR.statusText);
console.log(textStatus);
console.log(errorThrown);
});
});
});
html {
font-size: 14px;
overflow-y: scroll;
overflow-x: auto;
}
body {
background-color: #ddd;
font-family: Arial, Helvetica, sans-serif;
font-size: 1rem;
text-align: left;
color: #666;
}
/* General -------------------------------------------------------------------------------------- */
* {
padding: 0;
border: 0;
outline: 0;
margin: 0;
}
h1,
h2 {
font-weight: normal;
font-size: 1rem;
}
a {
cursor: pointer;
-webkit-transition: all 0.2s ease 0s;
-moz-transition: all 0.2s ease 0s;
-o-transition: all 0.2s ease 0s;
transition: all 0.2s ease 0s;
}
ul {
list-style-type: none;
}
table {
border-collapse: collapse;
}
table th,
table td {
font-weight: normal;
text-align: left;
vertical-align: middle;
}
label {
cursor: pointer;
}
input,
button,
select {
background-color: transparent;
font-family: 'Oxygen', Arial, Helvetica, sans-serif;
font-size: 1rem;
color: #666;
}
button,
select {
cursor: pointer;
}
button {
-webkit-transition: all 0.2s ease 0s;
-moz-transition: all 0.2s ease 0s;
-o-transition: all 0.2s ease 0s;
transition: all 0.2s ease 0s;
}
select {
-webkit-appearance: none;
}
input[type=text],
input[type=number],
input[type=email],
input[type=url],
input[type=password],
input[type=date],
input[type=search],
input[type=tel] {
-webkit-appearance: none;
}
input[type=number] {
-moz-appearance: textfield;
}
input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
input::-webkit-outer-spin-button {
-webkit-appearance: none;
}
input[type=search] {
-webkit-appearance: none;
-webkit-border-radius: 0;
}
input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
display: none;
}
button::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner {
padding: 0 !important;
border: 0 none !important;
}
/* Page container ------------------------------------------------------------------------------- */
#page_container {
width: 980px;
padding: 40px 5px 55px 5px;
margin: 0 auto 0 auto;
}
/* Header --------------------------------------------------------------------------------------- */
h1 {
font-weight: 700;
font-size: 2.2rem;
color: black;
font-family: monospace;
margin: 0 0 25px 0;
}
button.button {
height: 35px;
display: inline-block;
background-color: #999;
font-weight: 700;
text-transform: uppercase;
color: #fff;
padding: 0 15px 0 15px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
margin: 0 0 25px 0;
}
button.button:hover,
button.button:active {
background-color: #333;
}
/* Datatable ------------------------------------------------------------------------------------ */
.dataTables_wrapper {
position: relative;
padding: 50px 0 50px 0;
}
.dataTables_length {
width: auto;
height: 30px;
position: absolute;
top: 0;
left: 0;
padding: 0 110px 0 0;
}
.dataTables_length label {
line-height: 30px;
margin: 0;
}
.dataTables_length select {
width: 100px;
height: 30px;
position: absolute;
top: 0;
right: 0;
background-color: #fff;
color: #666;
padding: 0 50px 0 10px;
border: 1px solid #ccc;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
margin: 0;
}
.dataTables_length:after {
width: 30px;
height: 30px;
position: absolute;
top: 0;
right: 0;
background-color: #999;
font-family: 'FontAwesome', Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 1.2rem;
line-height: 30px;
text-align: center;
color: #fff;
content: '\f107';
pointer-events: none;
-webkit-border-top-right-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
-moz-border-radius-topright: 6px;
-moz-border-radius-bottomright: 6px;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
.dataTables_length select::-ms-expand {
display: none;
}
.dataTables_filter {
position: absolute;
top: 0;
right: 0;
}
.dataTables_filter label {
line-height: 30px;
}
.dataTables_filter input {
width: 200px;
height: 30px;
display: inline-block;
background-color: #fff;
line-height: 30px;
color: #666;
padding: 0 0 0 10px;
border: 1px solid #ccc;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
margin: 0 0 0 10px;
}
.dataTables_filter input:focus {
background-color: #ffd;
}
.dataTables_paginate {
position: absolute;
bottom: 0;
left: 0;
}
.dataTables_paginate a {
width: 30px;
height: 30px;
float: left;
background-color: #999;
font-weight: normal;
line-height: 29px;
text-align: center;
color: #fff;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
margin: 0 10px 0 0;
}
.dataTables_paginate a.current,
.dataTables_paginate a:hover,
.dataTables_paginate a:active,
.dataTables_paginate a:focus {
background-color: #333;
}
.dataTables_paginate a.previous,
.dataTables_paginate a.next {
font-family: 'FontAwesome', Arial, Helvetica, sans-serif;
font-size: 1.2rem;
line-height: 30px;
}
.dataTables_paginate a.previous:before {
content: '\f104';
}
.dataTables_paginate a.next:before {
content: '\f105';
}
.dataTables_info {
position: absolute;
bottom: 0;
right: 0;
line-height: 30px;
}
table.datatable {
width: 100% !important;
line-height: 1.4rem;
}
table.datatable th,
table.datatable td {
background-color: #fff;
padding: 5px 10px 5px 10px;
border: 1px solid #ccc;
}
table.datatable thead th {
background-color: #999;
font-weight: bold;
text-transform: uppercase;
white-space: nowrap;
color: #fff;
padding-top: 7px;
padding-bottom: 8px;
}
table.datatable thead th.sorting,
table.datatable thead th.sorting_desc,
table.datatable thead th.sorting_asc {
cursor: pointer;
}
table.datatable thead th.sorting:active,
table.datatable thead th.sorting_desc:active,
table.datatable thead th.sorting_asc:active {
background-color: #333;
}
table.datatable tbody tr:nth-child(even) td {
background-color: #eee;
}
table.datatable tbody tr:hover th,
table.datatable tbody tr:hover td {
background-color: #ffd;
}
table.datatable tbody tr:hover td.dataTables_empty {
background-color: #fff;
}
table.datatable tbody td.company_name {
width: 100%;
}
table.datatable tbody td.integer {
text-align: right;
white-space: nowrap;
}
table.datatable tbody td.nowrap {
white-space: nowrap;
}
table.datatable tbody td.functions .function_buttons {
width: 70px;
height: 30px;
margin: 0 auto 0 auto;
}
table.datatable tbody td.functions .function_buttons li {
float: left;
padding: 0 10px 0 0;
}
table.datatable tbody td.functions .function_buttons li.function_delete {
padding: 0;
}
table.datatable tbody td.functions .function_buttons a {
width: 30px;
height: 30px;
display: inline-block;
background-color: #999;
font-family: 'FontAwesome', Arial, Helvetica, sans-serif;
font-weight: normal;
line-height: 29px;
text-align: center;
color: #fff;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
table.datatable tbody td.functions .function_buttons .function_edit a:before {
font-size: 1.1rem;
content: "\f040";
}
table.datatable tbody td.functions .function_buttons .function_delete a:before {
font-size: 1.2rem;
line-height: 30px;
content: "\f1f8";
}
table.datatable tbody td.functions .function_buttons a:hover,
table.datatable tbody td.functions .function_buttons a:active,
table.datatable tbody td.functions .function_buttons a:focus {
background-color: #333;
}
table.datatable tbody td.functions .function_buttons span {
display: none;
}
/* Lightbox ------------------------------------------------------------------------------------- */
.lightbox_bg {
display: none;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 100;
background-color: #333;
background-color: rgba(0, 0, 0, 0.85);
cursor: pointer;
}
.lightbox_container {
display: none;
width: 80%;
height: 90%;
position: fixed;
top: 5%;
left: 10%;
z-index: 200;
background-color: #fff;
color: #666;
overflow-y: scroll;
overflow-x: auto;
padding: 50px 0 0 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
.lightbox_close {
width: 35px;
height: 35px;
position: absolute;
top: 45px;
right: 45px;
font-family: 'FontAwesome', Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 20px;
line-height: 35px;
text-align: center;
color: #f70;
cursor: pointer;
border: 2px solid #f70;
-webkit-border-radius: 35px;
-moz-border-radius: 35px;
border-radius: 35px;
}
.lightbox_close:before {
content: '\f00d';
}
.lightbox_close:hover {
color: #333;
border-color: #333;
}
.lightbox_content {
width: 642px;
padding: 0 50px 0 50px;
}
.lightbox_content h2 {
font-weight: 700;
font-size: 2rem;
line-height: 2rem;
color: #f70;
margin: 0 0 25px 0;
}
.lightbox_content .input_container {
width: 600px;
margin: 0 0 10px 0;
}
.lightbox_content .input_container:after {
clear: both;
height: 0;
display: block;
font-size: 0;
line-height: 0;
content: ' ';
}
.lightbox_content .input_container label {
width: 200px;
float: left;
font-size: 1rem;
line-height: 32px;
}
.lightbox_content .input_container label span.required {
font-weight: bold;
color: #f70;
}
.lightbox_content .input_container .field_container {
width: 400px;
float: right;
position: relative;
}
.lightbox_content .input_container .field_container label.error {
width: 400px;
display: block;
background-color: #fff1e6;
line-height: 1.4rem;
color: #333;
padding: 5px 0 6px 10px;
border: 1px solid #f70;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
margin: 0 0 5px 0;
}
.lightbox_content .input_container .field_container label.error.valid {
display: none !important;
}
.lightbox_content .input_container .field_container input {
width: 400px;
height: 32px;
background-color: #f9f9f9;
line-height: 30px;
color: #666;
padding: 0 0 0 10px;
border: 1px solid #ccc;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
.lightbox_content .input_container .field_container input:focus {
background-color: #ffd;
color: #000;
}
.lightbox_content .input_container .field_container.error:after,
.lightbox_content .input_container .field_container.valid:after {
width: 32px;
height: 32px;
position: absolute;
bottom: 0;
right: -42px;
font-family: 'FontAwesome', Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 20px;
line-height: 32px;
text-align: center;
}
.lightbox_content .input_container .field_container.error:after {
content: '\f00d';
color: #c00;
}
.lightbox_content .input_container .field_container.valid:after {
content: '\f00c';
color: #090;
}
.lightbox_content .button_container {
width: 600px;
height: 35px;
text-align: right;
padding: 15px 0 50px 0;
}
.lightbox_content .button_container button {
height: 35px;
display: inline-block;
background-color: #999;
font-weight: 700;
text-transform: uppercase;
color: #fff;
padding: 0 15px 0 15px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
.lightbox_content .button_container button:hover {
background-color: #333;
color: #fff;
}
/* Message / noscript --------------------------------------------------------------------------- */
#message_container,
#noscript_container {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #333;
text-align: center;
color: #fff;
}
#message_container {
display: none;
}
#message,
#noscript {
width: 980px;
line-height: 20px;
padding: 10px 5px 10px 6px;
margin: 0 auto 0 auto;
}
#message p,
#noscript p {
display: inline-block;
position: relative;
padding: 0 0 0 28px;
}
#message p:before,
#noscript p:before {
width: 20px;
height: 20px;
position: absolute;
top: 0;
left: 0;
background-color: #f70;
font-family: 'FontAwesome', Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 12px;
line-height: 20px;
text-align: center;
color: #fff;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
#message.success p:before,
#noscript.success p:before {
content: '\f00c';
}
#message.error p:before,
#noscript.error p:before {
content: '\f00d';
}
/* Loading message ------------------------------------------------------------------------------ */
#loading_container {
width: 100%;
height: 100%;
display: none;
position: fixed;
top: 0;
left: 0;
background-color: #333;
background-color: rgba(0, 0, 0, 0.85);
text-align: center;
}
#loading_container2 {
width: 100%;
height: 100%;
display: table;
}
#loading_container3 {
display: table-cell;
vertical-align: middle;
}
#loading_container4 {
width: 350px;
height: 250px;
position: relative;
background-color: #fff;
font-size: 1.4rem;
line-height: 1.4rem;
color: #666;
padding: 165px 0 0 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
margin: 0 auto 0 auto;
}
#loading_container4:before {
width: 100%;
position: absolute;
top: 80px;
left: 0;
font-family: 'FontAwesome', Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 4rem;
line-height: 4rem;
text-align: center;
color: #f70;
content: '\f013';
-webkit-animation: spin 2s infinite linear;
animation: spin 2s infinite linear;
}
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
#keyframes spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<body>
<div id="header">
<h1>Bank CRUD</h1>
<button type="button" class="button" id="createButton">Create record</button>
</div>
<div id="tableDiv">
<table class="datatable" id="table_records">
<thead>
<tr>
<th>Id</th>
<th>Memo</th>
<th>Amount</th>
<th>Transaction Date</th>
<th>Account</th>
<th>Transaction</th>
<th>Functions</th>
</tr>
</thead>
</table>
</div>
<div class="lightbox_bg"></div>
<div class="lightbox_container">
<div class="lightbox_close"></div>
<div class="lightbox_content">
<h2>Create record</h2>
<form class="form add" id="form_create" data-id="" novalidate>
<div class="input_container">
<label for="id">Id: </label>
<div class="field_container">
<input type="number" id="id" min="0" class="text" name='"Id"' value="" required>
</div>
</div>
<div class="input_container">
<label for="memo">Memo: </label>
<div class="field_container">
<input type="text" id="memo" class="text" name='"Memo"' value="" required>
</div>
</div>
<div class="input_container">
<label for="amount">Amount: </label>
<div class="field_container">
<input type="number" id="amount" min="0" class="text" name='"Amount"' value="" required>
</div>
</div>
<div class="input_container">
<label for="transactiondate">Transaction Date: </label>
<div class="field_container">
<input type="text" id="transactiondate" class="text" name='"TransactionDate"' value="" required>
</div>
</div>
<div class="input_container">
<label for="account">Account: </label>
<div class="field_container">
<input type="number" id="account" min="0" class="text" name='"Account"' value="" required>
</div>
</div>
<div class="input_container">
<label for="transaction">Transaction: </label>
<div class="field_container">
<input type="number" id="transaction" min="0" class="text" name='"Transaction"' value="" required>
</div>
</div>
<div class="button_container">
<button type="submit">Create record</button>
</div>
</form>
</div>
</div>
</body>
The answer was to apparently remove all of the settings for the AJAX request. Who would have guessed?
So it should look like the following:
var req = $.ajax({
url: "https://rates.tradelanes.us/bankaccount/record/create",
dataType: "json",
data: form_data,
type: "POST"
});
You have to be sure that you are getting the form .
let form = $('.whatever').find('form');
and then pass the data as the serialized form
form.serialize()
var req = $.ajax({
url: "https://rates.tradelanes.us/bankaccount/record/create",
cache: false,
data: form.serialize(),
dataType: "application/json",
contentType: "application/json; charset=utf-8",
type: "post"
});
req.done(function(out) {
if (out.result == "success") {
table_records.api().ajax.reload(function() {
alert("Record added successfully");
}, true);
} else {
alert("Record failed to be created");
}
});
HTML
<div class="NavAlignLeft">Site Name</div>
<div class="NavAlignRight">
<!-- Change this to an include later -->
<ul class="topnav" id="myTopnav">
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<li class="icon">
☰
</li>
</ul>
</div>
<div style="clear:both;"></div>
</div>
<!-- Video test -->
<div id="video_overlays">
<div class="abovethefold">
<h1 class="blog-title"><?php bloginfo( 'name' ); ?></h1>
<?php $description = get_bloginfo( 'description', 'display' ); ?>
<?php if($description) { ?><p class="blog-description"><?php echo $description ?></p><?php } ?>
<p class="button">
<a class="blue-button" href="#cta">Call to Action</a></p>
</div></div>
<div class="homepage-hero-module">
<div class="video-container">
<div class="filter"></div>
<video autoplay loop class="fillWidth">
<source src="http://scott.ewarena.com/blog/wp-content/themes/bootstrapstarter/Busy-People/MP4/Busy-People.mp4" type="video/mp4" />Your browser does not support the video tag. I suggest you upgrade your browser.
<source src="http://scott.ewarena.com/blog/wp-content/themes/bootstrapstarter/Busy-People/WEBM/Busy-People.webm" type="video/webm" />Your browser does not support the video tag. I suggest you upgrade your browser.
<img src="http://scott.ewarena.com/blog/wp-content/themes/bootstrapstarter/Busy-People/Snapshot/Busy-People.jpg" title="Your browser does not support the <video> tag">
</video>
<div class="poster hidden">
<img src="http://scott.ewarena.com//blog/wp-content/themes/bootstrapstarter/Busy-People/Snapshots/Busy-People.jpg" alt="">
</div>
</div>
</div></div>
CSS:
body {
background-color: #e2e2e2;
margin: 0px;
}
h1, .h1,
h2, .h2,
h4, .h4,
h5, .h5,
h6, .h6 {
margin-top: 0;
font-family: 'Vollkorn', serif;
font-style: oblique;
font-weight: normal;
color: #2e2e2e;
}
h3, .h3 {
font-family: 'Vollkorn', serif;
font-weight: bold;
font-size: 30px;
color: #fff;
}
.NavAlignLeft {
font-family: 'Vollkorn', serif;
/*font-style: oblique;*/
font-weight: bold;
font-size: 22px;
color: #fff;
float: left;
padding-left: 40px;
}
.NavAlignLeft:hover {
font-family: 'Vollkorn', serif;
text-decoration: none;
}
.NavAlignRight {
font-family: 'Vollkorn', serif;
font-weight: bold;
font-size: 22px;
color: #fff;
float: right;
padding-right: 40px;
}
.NavAlignLeft, .NavAlignRight {
/*{ width: 50%; Commenting this out made the nav align completely to the right.*/
display: inline-block;
}
a, .a,
a:visited, .a:visited,
a:active, .a:active {
font-family: 'Vollkorn';
font-style: none; color: #e2e2e2; text-decoration: none;
}
a:hover, .a:hover {
font-family: 'Vollkorn';
font-style: none; color: #fff; text-decoration: none;
}
/*
* Override Bootstrap's default container.
*/
/*#media (min-width: 1200px) {
.container {
width: 100%; padding: 0; margin: 0; vertical-align: middle;
}
} .container2 { width: 100%; padding: 0; margin: 0; }
Nothing changed */
/*
* Masthead for nav
*/
#blog-masthead {
background-color: #2e2e2e;
height: 40px;
width: 100%;
line-height: 40px;
/*z-index: 2;
/*vertical-align: middle;
padding-bottom: 0px;
padding-left: 10px;
padding-right: 10px; Nothing Changed */
-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.41);
-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.41);
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.41);
border-bottom: 1px solid #1a1a1a;
}
.abovethefold {
background-color: transparent;
/*background-image: url("https://static1.squarespace.com/static/518d3dc6e4b00ba5bf4a06b0/t/586e223e197aea98191b014e/1483612772641/photodune-17121963-coffee-shop-owner-standing-at-the-counter-l.jpg"); */
/*height: 250px;
width: 100%;
/*padding-top: 100px;*/
/*vertical-align: middle;
justify-content:center;
align-content:center;
}
.overlay {
background:#2e2e2e;
opacity:40%;
height: 250px;
width: 100%Nothing changed.*/
}
/* Nav links */
.blog-nav-item {
/*position: relative;
display: inline-block;
padding: 5px;
color: #2e2e2e; nothing changed*/
}
.blog-nav-item:hover,
.blog-nav-item:focus {
color: #fff;
text-decoration: none;
}
/* Active state gets a caret at the bottom */
.blog-nav .active {
color: #fff;
}
.blog-nav .active:after {
/*position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 0;
margin-left: -5px;
vertical-align: middle;
content: " ";
border-right: 5px solid transparent;
border-bottom: 5px solid;
border-left: 5px solid transparent; Nothing Changed*/
}
.menu-menu-1-container {
/*width: 100%;
vertical-align: middle;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 10px;
padding-right: 10px; Nothing changed*/}
/*
* Blog name and description
*/
.blog-header {
padding-top: 20px;
padding-bottom: 20px;
}
.blog-title {
margin-top: 0px;
margin-bottom: 0;
line-height: 80px;
margin-top: 100px;
font-size: 60px;
text-align:center;
font-weight: normal;
color: #fff;
}
.blog-description {
font-size: 30px;
font-style: 'Open Sans';
font-weight: bold;
text-align: center;
color: #2e2e2e;
}
.blog-main {
font-size: 18px;
line-height: 1.5; nothing changed
}
/* Buttons */
.green-button,.green-button:link,.green-button:visited,.blue-button,.blue-button:link,.red-button,.red-button:link,.purple-button,.purple-button:link,.teal-button,.teal-button:link,.orange-button,.orange-button:link,.grey-button,.grey-button:link,.grey-button:visited,.lt-grey-button,.lt-grey-button:link,.lt-grey-button:visited,.shop_table .actions .button,.oldernewer a:link,.oldernewer a:visited,.woocommerce-message .button,#place_order,html body div .quiz-submit, input.course-start {
display: block;
border: 0;
border-radius:1em;
-webkit-border-radius:border-radius:.8em;
text-align: center;
font-size: 20px !important;
padding: 10px 20px;
width: 180px;
}
p.button {
text-align: center;
}
p.button:hover {
text-align: center;
text-decoration: none;
}
p.button a {
margin:0 auto;
font-family: 'Vollkorn', serif;
font-style: none;
text-decoration: none;
}
.blue-button,.blue-button:link,.blue-button:visited {
background: #2f75c5;
color: #f8f8f8 !important;
text-decoration: none;
}
.blue-button:hover {
background: #3584de;
cursor: pointer;
text-decoration: none;
}
.blue-button:active {
background: #2966ab;
font-style: none;}
/* Sidebar modules for boxing content */
/* Sidebars arent being used
.sidebar-module {
padding: 15px;
margin: 0 -15px 15px;
}
.sidebar-module-inset {
padding: 15px;
background-color: #f5f5f5;
border-radius: 4px;
}
.sidebar-module-inset p:last-child,
.sidebar-module-inset ul:last-child,
.sidebar-module-inset ol:last-child {
margin-bottom: 0;
}
*/
/* Pagination */
.pager {
/*margin-bottom: 60px;
text-align: left;nothing changed*/
}
.pager > li > a {
/* width: 140px;
padding: 10px 20px;
text-align: center;
border-radius: 0px;
list-style: none; nothing changed*/
}
/*
* Blog posts
*/
.blog-post {
margin:50px 50px 0;
}
.blog-post-title {
margin-bottom: 5px;
font-size: 40px; color: #2e2e2e;
}
.subtitle {
font-size: 1.2em;
font-family: 'Vollkorn';
color: #2e2e2e;
}
.blog-post-meta {
margin-bottom: 20px;
color: #999;
}
/*
* Footer
*/
.blog-footer {
padding: 40px 0;
color: #999;
text-align: center;
background-color: #2e2e2e;
border-top: 1px solid #1a1a1a;
-webkit-box-shadow: 2px -5px 5px 0px rgba(0,0,0,0.41);
-moz-box-shadow: 2px -5px 5px 0px rgba(0,0,0,0.41);
box-shadow: 2px -5px 5px 0px rgba(0,0,0,0.41);
}
.blog-footer p:last-child {
margin-bottom: 0;
}
/*** lyrathemes - custom styling ***/
.page_item {
list-style: none;
font-size: 22px;
text-decoration: none;
}
.page_item:hover {
list-style: none;
text-decoration: none;
}
ul.blog-nav {
/*list-style: none;*/
}
/* Nav links */
.menu-item a{
position: relative;
/*display: inline-block; keep this commented out - moved navigation vertically.*/
padding: 10px;
color: #e2e2e2;
}
.menu-item a:hover,
.menu-item a:focus {
color: #fff;
text-decoration: none;
}
/* Active state gets a caret at the bottom */
.menu-item.current-menu-item a{
color: #fff;
}
.menu-item.current-menu-item a:after {
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 0;
margin-left: -5px;
vertical-align: middle;
/*content: " ";*/
/* border-right: 5px solid transparent;
border-bottom: 5px solid;
border-left: 5px solid transparent;*/
-webkit-box-shadow: 0px -2px 5px 0px rgba(0,0,0,0.41);
-moz-box-shadow: 0px -2px 5px 0px rgba(0,0,0,0.41);
box-shadow: 0px -2px 5px 0px rgba(0,0,0,0.41);
}
/*Not using side bars
.sidebar-module ul {
list-style: none;
padding-left: 0;
}*/
/* Video CSS */
.homepage-hero-module {
border-right: none;
border-left: none;
position: relative;
width: auto;
height: 400px;
}
.no-video .video-container video,
.touch .video-container video {
display: none;
}
.no-video .video-container .poster,
.touch .video-container .poster {
display: block !important;
}
.video-container {
position: absolute;
bottom: 0%;
left: 0%;
height: 100%;
width: 100%;
overflow: hidden;
/*background: #000;*/
}
.video-container .poster img {
width: 100%;
bottom: 0;
position: absolute;
}
.video-container .filter {
/*z-index: 100;*/
position: absolute;
background: rgba(0, 0, 0, 0.4);
width: 100%;
}
.video-container video {
position: absolute;
/*z-index: 0;*/
bottom: 0;
}
.video-container video.fillWidth {
width: 100%;
}
#video_overlays {
position:absolute;
float:left;
width:100%;
height:400px%;
background-color:transparent;
z-index:1;
}
/* Content Table Styles */
#green-table {
background-color: #ebf2e6;
width: 50%;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 40px;
padding-right: 40px;
text-align: center;
margin: auto;
margin-top:30px;
margin-bottom: 30px;
border: 1px solid #d6e8c5;
border-radius:.8em;
}
#dark-table {
background-color: #2e2e2e;
width: 100%;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 40px;
padding-right: 40px;
text-align: center;
margin-top:30px;
margin-bottom: 30px;
}
#light-table {
background-color: #e2e2e2;
width: 100%;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 40px;
padding-right: 40px;
text-align: center;
margin-top:30px;
margin-bottom: 30px;
}
#dark-narrow-table {
background-color: #2e2e2e;
/*background-image: url("https://static1.squarespace.com/static/518d3dc6e4b00ba5bf4a06b0/t/586e223e197aea98191b014e/1483612772641/photodune-17121963-coffee-shop-owner-standing-at-the-counter-l.jpg"); */
width: 50%;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 40px;
padding-right: 40px;
text-align: center;
margin-top:30px;
margin-bottom: 30px;
margin: auto;
border-radius:.8em;
}
/*Heading Styles*/
#light-table-head-style {
font-family: 'Droid Serif';
font-size: 45px;
color: #2e2e2e;
}
#dark-table-head-style {
font-family: 'Droid Serif';
font-size: 45px;
color: #e2e2e2;
}
#green-table-head-style {
font-family: 'Droid Serif';
font-size: 45px;
color: #2e2e2e;
}
#dark-narrow-table-head-style{
font-family: 'Droid Serif';
font-size: 45px;
color: #e2e2e2;
}
/*Content Paragraph Styles*/
#light-table-paragraph {
font-family: 'Droid Serif';
font-size: 22px;
color: #2e2e2e;
text-align: left;
}
#dark-table-paragraph {
font-family: 'Droid Serif';
font-size: 22px;
color: #e2e2e2;
}
#dark-narrow-table-paragraph {
font-family: 'Droid Serif';
font-size: 22px;
color: #e2e2e2;
}
#green-table-paragraph {
font-family: 'Droid Serif';
font-size: 22px;
color: #2e2e2e;
text-align: left;
}
/* Hamburger Test */
/* Remove margins and padding from the list, and add a black background color */
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #2e2e2e;
}
/* Float the list items side by side */
ul.topnav li {float: left;
height: 40px;
}
/* Style the links inside the list items */
ul.topnav li a {
display: inline-block;
color: #e2e2e2;
text-align: center;
padding: 0px 10px 0px 0px;
text-decoration: none;
transition: 0.3s;
font-family: 'Vollkorn', serif;
font-weight: bold;
font-size: 22px;
color: #e2e2e2;
}
/* Change background color of links on hover */
ul.topnav li a:hover {background-color: #3b3b3b;}
/* Hide the list item that contains the link that should open and close the topnav on small screens */
ul.topnav li.icon {display: none;}
/* Hamburger mobile test */
/* When the screen is less than 680 pixels wide, hide all list items, except for the first one ("Home"). Show the list item that contains the link to open and close the topnav (li.icon) */
#media screen and (max-width:680px) {
ul.topnav li:not(:first-child) {display: none;}
ul.topnav li.icon {
float: right;
display: inline-block;
}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens */
#media screen and (max-width:680px) {
ul.topnav.responsive {position: relative;}
ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.topnav.responsive li {
float: none;
display: inline;
}
ul.topnav.responsive li a {
display: block;
text-align: left;
}
}
/* Fixing Mobile Div Problem */
#media only screen and (max-device-width: 680px) {
#green-table {
width: 95%;
}
#dark-narrow-table {
width: 95%;
}
.NavAlignRight {
padding-right: 2px;
}
.NavAlignLeft {
padding-left: 2px;
JS:
//jQuery is required to run this code
$( document ).ready(function() {
scaleVideoContainer();
initBannerVideoSize('.video-container .poster img');
initBannerVideoSize('.video-container .filter');
initBannerVideoSize('.video-container video');
$(window).on('resize', function() {
scaleVideoContainer();
scaleBannerVideoSize('.video-container .poster img');
scaleBannerVideoSize('.video-container .filter');
scaleBannerVideoSize('.video-container video');
});
});
function scaleVideoContainer() {
var height = $(window).height() + 5;
var unitHeight = parseInt(height) + 'px';
$('.homepage-hero-module').css('height',unitHeight);
}
function initBannerVideoSize(element){
$(element).each(function(){
$(this).data('height', $(this).height());
$(this).data('width', $(this).width());
});
scaleBannerVideoSize(element);
}
function scaleBannerVideoSize(element){
var windowWidth = $(window).width(),
windowHeight = $(window).height() + 5,
videoWidth,
videoHeight;
console.log(windowHeight);
$(element).each(function(){
var videoAspectRatio = $(this).data('height')/$(this).data('width');
$(this).width(windowWidth);
if(windowWidth < 1000){
videoHeight = windowHeight;
videoWidth = videoHeight / videoAspectRatio;
$(this).css({'margin-top' : 0, 'margin-left' : -(videoWidth - windowWidth) / 2 + 'px'});
$(this).width(videoWidth).height(videoHeight);
}
$('.homepage-hero-module .video-container video').addClass('fadeIn animated');
});
}
So it loooks absolutely fine when it's displayed on my website http://scott.ewarena.com/blog but when viewed on a mobile device there's a gap along the top, underneath the top bar, before the video, that shouldn't be there.
I can't find out what the issue is at all, I've been trying for two days.
Sorry my code is so clunky. I'm new at this and aware it needs cleaning up a bit.
Any help will be MUCH appreciated!
Thanks!
Scott
Having looked at your code in Chrome Dev Tools I noticed that you have the following defined in your style-sheet:
.video-container video {
position: absolute;
z-index: 0;
bottom: 0;
}
If you remove bottom: 0; you wont have this problem!
Basically, you're forcing the video to be at the bottom most point in it's container, creating a gap when the view-port is smart-phone sized.
I just made a search bar which expands after a click on the search icon (this is made in javascript). Now doing the responsive design, I want to disable the javascript. Im now coming to you to try to find a to disable a javascript effect.
My source code is here for you to try it, make sure you reduice the size of the screen for the responsive to take effect.
body{
padding:0;
margin:0;
font-family: Arial, sans-serif;
}
.header-two-bars{
font:13px Arial, Helvetica, sans-serif;
}
.header-two-bars .header-limiter{
max-width: 1200px;
text-align: center;
margin: 0 auto;
}
/* Logo */
.header-two-bars h1{
float: left;
font: normal 35px Cookie, Calibri, Helvetica, sans-serif;
line-height: 40px;
margin: 0;
}
.header-two-bars h1 span {
color: #5383d3;
}
/* The first bar */
.header-two-bars .header-first-bar{
background-color:#292c2f;
box-shadow:0 1px 1px #ccc;
padding: 20px 40px;
height: 80px;
color: #ffffff;
box-sizing: border-box;
}
.header-two-bars .header-first-bar a {
color: #ffffff;
text-decoration: none;
}
.member-area-buttons {
float: right;
}
.signup-button, .login-user, .login-designer {
font-size: 13px;
float: left;
font-weight: bold;
border-radius: 3px;
background-color: #5383d3;
color: white;
height: 40px;
padding: 5px 20px;
border: 1px solid #5E6367;
box-sizing: border-box;
margin-right: 5px;
}
.signup-button:hover, .login-user:hover, .login-designer:hover{
background-color:#2B5773;
}
.signup-button{
padding-top: 10px;
margin-top: 0;
border-radius: 2px;
background-color: #6caee0;
color: #ffffff;
font-weight: bold;
box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.08);
border: 0;
}
/*social-button*/
/*
.header-two-bars .header-first-bar nav i.fa {
display: inline-block;
width: 35px;
height: 35px;
cursor: pointer;
background-color: #33383b;
border-radius: 2px;
font-size: 20px;
color: #ffffff;
text-align: center;
line-height: 35px;
margin-top: 0;
margin-right: 3px;
}
*/
/* Second Bar */
.header-two-bars .header-second-bar {
background-color: #ffffff;
box-shadow: 1px 3px 3px 0 rgba(0, 0, 0, 0.05);
padding: 20px 40px;
}
.header-two-bars .header-second-bar h2 {
margin: 0;
float: left;
color: #292c2f;
font-weight: bold;
font-style: italic;
}
.header-two-bars .header-second-bar h2 a {
font-size: 16px;
color: #4e5359;
text-decoration: none;
}
.header-two-bars .header-second-bar nav {
text-align: right;
line-height: 20px;
font-size: 16px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
font:14px Arial, Helvetica, sans-serif;
}
.header-two-bars .header-second-bar nav a{
display: inline-block;
color: #4e5359;
text-decoration: none;
padding-left: 12px;
padding-right: 12px;
}
.header-two-bars .header-second-bar nav a:last-child{
color: red;
}
.header-two-bars .header-second-bar nav a:hover{
border-radius: 2px;
background-color: #2B5773;
padding-top:8px;
padding-bottom: 8px;
color: white;
opacity: 0.7;
}
.header-two-bars .header-second-bar nav a.selected{
border-radius: 2px;
background-color: #2B5773;
padding: 8px 12px;
color: white;
}
.header-two-bars .header-second-bar nav i.fa {
color: #A9B7BF;
margin: 0 4px 0 0;
}
/* Responsive Design */
#media all and (max-width: 800px) {
.header-two-bars .header-second-bar nav{
font-size:14px;
}
.header-two-bars .header-first-bar h1 {
font-size: 29px;
margin-left: -10px;
margin-right: 10px;
}
}
#media all and (max-width:590px) {
.header-two-bars .header-first-bar{
height: 120px;
padding:20px;
padding-bottom: 20px;
}
.header-two-bars .header-first-bar h1 {
float: none;
margin: -8px 0 2px;
text-align: center;
font-size: 28px;
padding-bottom: 20px;
line-height: 1;
}
/*social-button
.social-button {
float:left;
}
.header-two-bars .header-first-bar nav i.fa {
display:inline-block;
font-size:20px;
}
*/
.signup-button, .login-user, .login-designer {
font-size: 12px;
}
.header-two-bars .header-second-bar{
padding: 20px 0;
}
}
#media all and (max-width: 610px) {
.header-two-bars .header-second-bar h2{
float:none;
margin: 0 0 12px;
}
.header-two-bars .header-second-bar nav{
text-align: center;
}
.header-two-bars .header-second-bar nav a{
display: block;
padding: 8px;
}
.header-two-bars .header-second-bar nav i.fa{
margin-left:0;
}
}
#media all and (max-width: 465px) {
.header-two-bars .header-first-bar{
padding: 5px;
padding-top: 15px;
}
.signup-button, .login-user, .login-designer {
font-size: 12px;
padding: 5px 10px 5px 10px;
border: 1px solid #5E6367;
box-sizing: border-box;
width: 76px
}
.signup-button{
padding-top:10px;
}
}
#media all and (max-width: 320px) {
.header-two-bars .header-first-bar{
height: 180px;
}
/*Social Button
.social-button {
float: none;
margin: 0 auto;
display:inline-block;
margin-top: 10px;
}
*/
.member-area-buttons {
float:none;
text-align: center;
}
/*.signup-button, .login-user,*/ .login-designer {
float: none;
display: inline-block;
}
.signup-button {
float:left;
margin-left:10px;
}
.login-user {
float:right;
margin-right:10px;
}
}
/* The search box */
.header-search form {
float:right;
position: relative;
right: 10px;
border-radius: 3px;
background-color: #3a3c3e;
width: 44px;
height: 40px;
cursor: pointer;
-ms-user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
}
/* CSS search icon */
.header-search form:before {
position: absolute;
content: '';
border-radius: 50%;
border: 2px solid #fff;
width: 9px;
height: 9px;
top: 12px;
left: 14px;
}
.header-search form:after {
position: absolute;
content: '';
background-color: #fff;
width: 2px;
height: 8px;
top: 22px;
left: 26px;
-webkit-transform: rotate(-44deg);
-moz-transform: rotate(-44deg);
transform: rotate(-44deg);
}
/* The search box */
.header-search form input {
display: none;
position: absolute;
left: 42px;
padding: 11px 12px 9px;
border: none;
width: 210px;
border-radius: 2px 0 0 2px;
height: 40px;
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
/* Making the header responsive. */
#media all and (max-width: 590px) {
.header-search form {
float: left;
left: 5px;
}
}
#media all and (max-width: 320px) {
.header-search form {
float: none;
display: block;
text-align: center;
top: 20px;
left: 12px;
width: 78%;
}
.header-search form input {
display: inline-block;
width: 100%;
}
.stop_javascript {
display: none;
}
}
#media all and (max-width: 300px) {
.header-search form {
left: 9px;
}
}
<header class="header-two-bars">
<div class="header-first-bar">
<div class="header-limiter">
<h1>Africa<span>Fashion</span></h1>
<div class="member-area-buttons">
Sign Up
Login <br/> Designer
Login <br/> User
</div>
<div class="header-search">
<form method="get" action="#">
<input type="search" placeholder="Search!" name="search">
</form>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('.header-search form').on('click', function(e) {
// If the form (which is turned into the search button) was
// clicked directly, toggle the visibility of the search box.
if(e.target == this) {
$(this).find('input').toggle();
}
});
});
</script>
</div>
</div>
<div class="header-second-bar">
<div class="header-limiter">
<h2>Hi,</h2>
<nav>
<i class="fa fa-male"></i> Men
<i class="fa fa-female"></i> Women
<i class="fa fa-folder-o"></i> Latest Collection
<i class="fa fa-check"></i> Designers
<i class="fa fa-check" style="color: red;"></i> Northern Fashion <!-- It should be red-->
</nav>
</div>
</div>
</header>
Thanks
You could try checking the window width before you run toggle (you'll want to change minWidth to the minimum width you want for your application):
$(document).ready(function() {
$('.header-search form').on('click', function(e) {
// If the form (which is turned into the search button) was
// clicked directly, toggle the visibility of the search box.
if(e.target == this && window.innerWidth > minWidth) {
$(this).find('input').toggle();
}
});
});
I had an issue with the blank space below the footer. I've managed to solve this by adding a jQuery sticky footer as the CSS methods doesn't work for me.
However, I do have a problem with main content of the webpage. If I adjust .bg-photo's height, it will affect how low or high the footer's placement will go.
Any content within .bg-photo will not affect the footer's placement at all.
I'm thinking it could be my HTML or CSS that's doing this sort of issue. Although, I'm not sure.
What I want is that the page automatically adjust to any screen's height and the user doesn't have to scroll down to view just the footer.
Here's the webpage:
http://planet.nu/dev/test/index.html
Here's the jsFiddle:
https://jsfiddle.net/mqfrnjaa/
And the codes if you need to view them right away.
$(window).bind("load", function() {
var footerHeight = 0,
footerTop = 0,
$footer = $(".footer");
positionFooter();
function positionFooter() {
footerHeight = $footer.height();
footerTop = ($(window).scrollTop()+$(window).height()-footerHeight)+"px";
if ( ($(document.body).height()+footerHeight) < $(window).height()) {
$footer.css({
position: "absolute"
}).animate({
top: footerTop
})
} else {
$footer.css({
position: "static"
})
}
}
$(window)
.scroll(positionFooter)
.resize(positionFooter)
});
html, body {
height: 100%;
}
*{
margin: 0;
}
body {
background: #fff;
min-height: 600px;
}
body * {
font-family: 'Open Sans', sans-serif;
font-size: 14px;
color: #393c3d;
line-height: 22px;
}
#fw_header {
margin: 0 auto;
position: relative;
width: 980px;
}
#fw_header ul {
list-style-type: none;
}
.forums #fw_header {
margin-bottom: 0;
}
#fw_header ul {
padding-left: 12px;
padding-top: 6px;
}
#fw_header li {
float: left;
padding: 0 3px;
}
#fw_header li a {
padding: 0 8px;
}
#fw_header li a:hover {
border-bottom: 5px solid #829AC6;
text-decoration: none;
}
#fw_header li a.active {
border-bottom: 5px solid #4E6CA3;
}
#fw_header ul.submenu li a.active,
#fw_header ul.subsubmenu li a.active {
border-bottom: 5px solid #829AC6;
}
#fw_header ul.submenu,
#fw_header ul.subsubmenu {
margin-top: 1em;
padding-top: 0;
}
#fw_header ul.submenu_usage {
padding-left: 32px;
}
#fw_header ul.submenu_plugins {
padding-left: 20px;
}
#fw_header ul.submenu_development {
padding-left: 23px;
}
#fw_header ul.submenu_extras {
padding-left: 14px;
}
#fw_header ul.submenu_testing {
padding-left: 480px;
}
#fw_header ul.submenu_styling {
padding-left: 80px;
}
#fw_header ul.subsubmenu {
padding-left: 120px;
}
#fw_header ul.submenu li,
#fw_header ul.subsubmenu li {
font-size: 80%;
}
#fw_header {
font-size: 16px;
}
#fw_header a {
color: #4E6CA3 !important;
}
#fw_header h1 {
border-bottom: medium none;
color: black;
font-size: 2em;
line-height: 1.45em;
margin-top: 32px;
vertical-align: middle;
}
#fw_header h1 img {
margin-top: -5px;
vertical-align: middle;
}
#fw_header h1 a {
color: black !important;
}
#fw_header h1 a:hover {
text-decoration: none;
}
#header_options {
position: absolute;
right: 150px;
top: -32px;
width: 495px;
}
#header_options .option {
float: left;
padding: 12px 0;
text-align: center;
width: 165px;
}
#header_options a:hover {
text-decoration: none;
}
#header_options .option:hover {
background-color: #F5F7FA;
}
#header_options div.option img {
margin-right: 7px;
vertical-align: middle;
}
#header_options .option table {
margin: 0 auto;
}
#header_options .option table td {} #header_options #options_search {
padding: 7px 0;
width: 495px;
}
#header_options #options_download {} #options_search input[type="text"] {
height: 20px;
width: 350px;
}
#header_download {
background: url("../images/dl_button_220.jpg") no-repeat scroll left top transparent;
font-size: 0.9em;
height: 36px;
padding-top: 13px;
position: absolute;
right: 0;
text-align: center;
top: -8px;
width: 220px;
}
#header_donate {
background: url("../images/donate_button.jpg") no-repeat scroll left top transparent;
font-size: 0.9em;
height: 36px;
padding-top: 13px;
position: absolute;
right: 220px;
text-align: center;
top: -8px;
width: 220px;
}
#header_download a,
#header_donate a {
color: white;
}
#header_download a:hover,
#header_donate a:hover {
text-decoration: none;
}
#dontate_wrapper {
background-color: #FCFCFC;
border: 1px dotted #A5A5A5;
color: #555555;
font-size: 0.8em;
margin: 0 0 1.5em;
padding: 5px;
text-align: center;
}
#header_advert {
background-color: white;
height: 200px;
overflow: visible;
position: absolute;
right: 0;
top: -32px;
width: 150px;
}
body .adpacks {} body .one .bsa_it_ad {
background: none repeat scroll 0 0 transparent;
border: medium none;
color: #999999;
margin: 0;
text-align: left;
}
body .one .bsa_it_ad:hover {
background-color: #F5F7FA;
color: black;
}
body .one .bsa_it_ad .bsa_it_i {
display: block;
float: none;
font-size: 11px !important;
margin: 0;
padding: 0;
text-align: center;
}
body .one .bsa_it_ad .bsa_it_d {
font-size: 11px !important;
}
body .one .bsa_it_ad .bsa_it_i img {
border: medium none;
padding: 0;
}
body .one .bsa_it_ad .bsa_it_t {
padding: 6px 0 0;
}
body .one .bsa_it_p {
display: none;
}
.one .bsa_it_ad {
color: #F5F7FA;
padding: 4px 0 0 !important;
}
body #bsap_aplink,
body #bsap_aplink:hover {
display: block;
font-size: 10px;
left: 104px;
position: absolute;
text-decoration: none;
top: 45px;
transform: rotate(90deg);
width: 100px;
}
.css_small {
font-size: 75%;
line-height: 1.45em;
}
.css_vsmall {
font-size: 65%;
line-height: 1.45em;
}
#dt_example #container {
margin: 64px auto 30px !important;
}
.header {
width: 100%;
background: rgba(255, 255, 255, 0.6);
color: #034e7c;
text-align: center;
padding: 20px 0;
height: 115px;
// filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#D73000', endColorstr='#FFFFFF',GradientType=0 ); /* IE6-9 */
}
.header img.logo {
height: 105px;
}
.header ul.breadcrumb li a {
font-family: 'Open Sans';
font-size: 23px;
color: #4a4a4a
}
.header ul.log-in {
list-style-type: none;
display: inline;
float: right;
margin-top: 55px;
margin-right: 40px;
}
.header ul li {
display: inline;
color: red;
margin-right: 35px;
}
.header ul.log-in li,
.header ul.log-in li a {
display: inline;
font-size: 19px;
color: red;
text-decoration: none
}
.header .dateButton,
.dateButton {
width: 300px;
height: 45px;
background: #e63308;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #e63308 0%, #db3304 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e63308), color-stop(100%, #db3304));
background: -webkit-linear-gradient(top, #e63308 0%, #db3304 100%);
background: -o-linear-gradient(top, #e63308 0%, #db3304 100%);
background: -ms-linear-gradient(top, #e63308 0%, #db3304 100%);
background: linear-gradient(to bottom, #e63308 0%, #db3304 100%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#e63308', endColorstr='#db3304', GradientType=0);
float: right;
-webkit-border-radius: 2px;
border-radius: 2px;
margin-right: 70px;
text-align: center;
cursor: pointer;
margin-top: -8px;
}
.header .dateButton a,
.dateButton a {
height: 30px;
vertical-align: middle;
line-height: 45px;
font-weight: bold;
color: #f0f0f0;
font-size: 23px;
}
.header .dateButton img,
.dateButton img {
padding-right: 5px
}
.footer {
width: 100%;
background: #FFF;
text-align: center;
height: 40px;
}
.footer p {
color: #4a4a4a;
font-family: 'Open Sans', sans-serif;
padding: 30px 0;
}
.footer p a {
color: #9fcf64;
}
.navigation {
min-width: 1300px;
width: 100%;
border-top: solid 1px #d6d6d6;
border-bottom: solid 1px #d6d6d6;
height: 60px;
background: linear-gradient(to bottom, #f5f5f5 0%, #ececec 10%, #ededed 100%);
}
.navigation ul.breadcrumb {
padding: 0px;
margin: 0;
margin-left: 50px;
margin-top: 15px;
margin-right: 0px;
width: 1000px;
}
.navigation ul li {
list-style-type: none;
}
.navigation ul li a {
color: #4a4a4a;
text-decoration: none;
font-weight: bold;
font-size: 23px;
float: left;
margin-right: 10px;
}
.triangle {
width: 0px;
height: 0px;
border-style: solid;
border-width: 3px 0 3px 5.2px;
border-color: transparent transparent transparent #4a4a4a;
float: left;
margin-top: 8px;
margin-right: 10px;
}
.top-section {
height: 100px;
}
body * {
font-family: 'Open Sans', sans-serif;
font-size: 16px;
color: #393c3d;
line-height: 22px;
}
.bg-photo{
background:url(http://planet.nu/dev/test/images/bg.jpg);
background-size: cover;
height: 75%;
text-align: center;
}
.bg-photo:before{
content: '';
display: inline-block;
vertical-align: middle;
margin-right: -0.25em;
}
.loginText{
font-size: 16px;
}
#createCampaignButton {
transition-property: background-color, color;
transition-duration: 1s;
transition-timing-function: ease-out;
font-size: 18px;
/* font-weight: bold; */
color: #fff;
background: #8bbd3a;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
table{
margin-bottom: 20px;
background: rgba(255, 255, 255, 0.9);
}
h1{
color: #4a4a4a;
font-size: 48px;
}
table th{
color: #666666;
padding-top: 10px;
text-align: left;
padding-left: 15px;
}
table td {
padding-left: 15px;
}
table td input{
padding-left: 5px;
height: 30px;
font-size: 22px;
margin-bottom: 20px;
width: 100%;
}
tbody{
width: 95%;
display: table;
}
<div class="header">
<div class="top-section">
<img class="logo" src="http://planet.nu/dev/test/images/littleforest_logo.jpg">
</div>
</div>
<div class="bg-photo col-md-12 col-xs-12">
<div class="col-md-6 col-sm-9">
<h1 style="font-size: 35px; text-align:center; color:#FFF;margin:20px 0 0 0">
Welcome to LFi
</h1>
<p style="text-align:center; color: #FFF; font-size: 20px; padding: 28px 0 0 0;">Insight that drives web success</p>
<br>
<form method="post" action="/crawler/LoginServlet">
<table style="width: 40%; padding: 20px 30px; display: inline-block; vertical-align: middle; margin: 30px 0 0 0; background: rgba(255,255,255, 0.9);">
<tbody>
<tr>
<th>
User Name
</th>
</tr>
<tr>
<td>
<input type="text" name="username" class="textInput loginText" placeholder="User Name">
</td>
</tr>
<tr>
<th>
Password
</th>
</tr>
<tr>
<td>
<input type="password" name="password" value="" class="textInput loginText" placeholder="Password">
</td>
</tr>
</tbody>
</table>
<div>
<p class="submit">
<input type="submit" name="commit" class="button" id="createCampaignButton" value="Log in" style="width:260px; display: inline-block; vertical-align: middle; margin: 20px 0 0 0;">
</p>
</div>
</form>
</div>
</div>
<div class="footer col-md-12 col-xs-12">
<p>
Powered by Little Forest a tool that encourages continuous improvement towards web success.
</p>
</div>
What can come in handy in situation like this is css property vh.
Depends on which browsers you have to support, but to adjust to height of view port you can do height: 100vh or vmin.
More details on browser support: http://caniuse.com/#feat=viewport-units
You could achieve sticky-footer without any plugins. Here i did "sticky footer and header" only with css. One can add up more content under the form and get assured that the page stretches right down while content stays above the footer - here.
/**sticky-footer layout**/
body {
min-height: 500px;
}
.header,
#main,
.footer {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.header {
height:120px !important;
overflow:hidden;
background:#ffffff !important;
position:relative;
z-index: 10;
padding:0 !important;
opacity:0.9;
}
.footer {
height:100px !important;
background:#ffffff !important;
overflow:hidden;
opacity:0.9;
padding:0 !important;
}
#main {
min-height:100%;
margin:-120px 0 -100px;
height:auto !important;
}
#main:after,
#main:before {
content:"";
display:block !important;
margin:0;
}
#main:before {
height:120px;
}
#main:after {
height:100px;
}
However, you might not like the fact that your bg container .bg-photo#main lays underneath header and footer (which i made opaque on purpose to demonstrate, how the blocks are positioned), thus cutting bits of your leaves background.
You would instinctively wish to transfer the background to an inner immediate div inside the main section. I've sketched this eventuality as well, however since it's uses vh units,
min-height: calc( 100vh - 220px);
it might not work in all browsers, so beware, i also used calc to subtract the header and the footer. I hope it'll work reliably for you.