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");
}
});
Related
I'de like to validate a form with data propriety data-error and data-error-visible. I want to display the error message only with JS and don't use anymore HTML codes to do it.
The current code I use is below and I left only the first input :
/******
*
FORM VALIDATION
*
******/
// DOM
const formData = document.querySelectorAll(".formData");
const form = document.getElementById("form");
const firstName = document.getElementById("firstName");
const lastName = document.getElementById("lastName");
const email = document.getElementById("email");
const birthdate = document.getElementById("birthdate");
const quantity = document.getElementById("quantity");
const tournament = document.getElementsByName("location");
const checkbox = document.getElementsByName("checkbox");
// form preventDefault + checkInputs function
form.addEventListener('submit', e => {
e.preventDefault();
});
/***********
*
DATA-ATTRIBUTE
*
************/
// set error message to "true"
const displayErrorMsg = (element, message) => {
const formData = element
formData.setAttribute("data-error", message)
formData.setAttribute("data-error-visible", true)
}
// Function for remove one error msg
const removeErrorMsg = (element) => {
const formData = element
formData.removeAttribute('data-error')
formData.removeAttribute('data-error-visible')
}
/***********
*
* VALIDATION FUNCTION
*
************/
function validate(formData) {
let isFormValid = true;
// Regex
const nameRegex = /[a-zA-Z]+/i;
// First name
if (firstName.value.match(nameRegex) || firstName.value.length < 2) {
isFormValid = false;
displayErrorMsg(firstName);
} else {
removeErrorMsg(firstName);
}
}
:root {
--font-default: "DM Sans", Arial, Helvetica, sans-serif;
--font-slab: var(--font-default);
--modal-duration: 0.8s;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* Landing Page */
body {
margin: 0;
display: flex;
flex-direction: column;
font-family: var(--font-default);
font-size: 18px;
max-width: 1300px;
margin: 0 auto;
}
p {
margin-bottom: 0;
padding: 0.5vw;
}
img {
padding-right: 1rem;
}
.topnav {
overflow: hidden;
margin: 3.5%;
}
.header-logo {
float: left;
}
.main-navbar {
float: right;
}
.topnav a {
float: left;
display: block;
color: #000000;
text-align: center;
padding: 12px 12px;
margin: 5px;
text-decoration: none;
font-size: 20px;
font-family: Roboto, sans-serif;
}
.topnav a:hover {
background-color: #ff0000;
color: #ffffff;
border-radius: 15px;
}
.topnav a.active {
background-color: #ff0000;
color: #ffffff;
border-radius: 15px;
}
.topnav .icon {
display: none;
}
#media screen and (max-width: 768px) {
.topnav a {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 768px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
#media screen and (max-width: 540px) {
.topnav a {display: none;}
.topnav a.icon {
float: right;
display: block;
margin-top: -15px;
}
}
main {
font-size: 130%;
font-weight: bolder;
color: black;
padding-top: 0.5vw;
padding-left: 2vw;
padding-right: 2vw;
margin: 1px 20px 15px;
border-radius: 2rem;
text-align: justify;
}
.modal-btn {
font-size: 145%;
background: #fe142f;
display: flex;
margin: auto;
padding: 2em;
color: #fff;
padding: 0.75rem 2.5rem;
border-radius: 1rem;
cursor: pointer;
}
.modal-btn:hover {
background: #3876ac;
}
.footer {
margin: 20px;
padding: 10px;
font-family: var(--font-slab);
}
/* Modal form */
.button {
background: #fe142f;
margin-top: 0.5em;
padding: 1em;
color: #fff;
border-radius: 15px;
cursor: pointer;
font-size: 16px;
}
.button:hover {
background: #3876ac;
}
.smFont {
font-size: 16px;
}
.bground {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
height: 100%;
width: 100%;
overflow: auto;
background-color: rgba(26, 39, 156, 0.4);
}
.content {
margin: 5% auto;
width: 100%;
max-width: 500px;
animation-name: modalopen;
animation-duration: var(--modal-duration);
background: #232323;
border-radius: 10px;
overflow: hidden;
position: relative;
color: #fff;
padding-top: 10px;
}
.modal-body {
padding: 15px 8%;
margin: 15px auto;
}
label {
font-family: var(--font-default);
font-size: 17px;
font-weight: normal;
display: inline-block;
margin-bottom: 11px;
}
input {
padding: 8px;
border: 0.8px solid #ccc;
outline: none;
}
.text-control {
margin: 0;
padding: 8px;
width: 100%;
border-radius: 8px;
font-size: 20px;
height: 48px;
}
.formData[data-error]::after {
content: attr(data-error);
font-size: 0.4em;
color: #e54858;
display: block;
margin-top: 7px;
margin-bottom: 7px;
text-align: right;
line-height: 0.3;
opacity: 0;
transition: 0.3s;
}
.formData[data-error-visible="true"]::after {
opacity: 1;
}
.formData[data-error-visible="true"] .text-control {
border: 2px solid #e54858;
}
/*
input[data-error]::after {
content: attr(data-error);
font-size: 0.4em;
color: red;
} */
.checkbox-label,
.checkbox2-label {
position: relative;
margin-left: 36px;
font-size: 12px;
font-weight: normal;
}
.checkbox-label .checkbox-icon,
.checkbox2-label .checkbox-icon {
display: block;
width: 20px;
height: 20px;
border: 2px solid #279e7a;
border-radius: 50%;
text-indent: 29px;
white-space: nowrap;
position: absolute;
left: -30px;
top: -1px;
transition: 0.3s;
}
.checkbox-label .checkbox-icon::after,
.checkbox2-label .checkbox-icon::after {
content: "";
width: 13px;
height: 13px;
background-color: #279e7a;
border-radius: 50%;
text-indent: 29px;
white-space: nowrap;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
transition: 0.3s;
opacity: 0;
}
.checkbox-input {
display: none;
}
.checkbox-input:checked + .checkbox-label .checkbox-icon::after,
.checkbox-input:checked + .checkbox2-label .checkbox-icon::after {
opacity: 1;
}
.checkbox-input:checked + .checkbox2-label .checkbox-icon {
background: #279e7a;
}
.checkbox2-label .checkbox-icon {
border-radius: 4px;
border: 0;
background: #c4c4c4;
}
.checkbox2-label .checkbox-icon::after {
width: 7px;
height: 4px;
border-radius: 2px;
background: transparent;
border: 2px solid transparent;
border-bottom-color: #fff;
border-left-color: #fff;
transform: rotate(-55deg);
left: 21%;
top: 19%;
}
.close {
position: absolute;
right: 15px;
top: 15px;
width: 32px;
height: 32px;
opacity: 1;
cursor: pointer;
transform: scale(0.7);
}
.close:before,
.close:after {
position: absolute;
left: 15px;
content: " ";
height: 33px;
width: 3px;
background-color: #fff;
}
.close:before {
transform: rotate(45deg);
}
.close:after {
transform: rotate(-45deg);
}
.btn-submit,
.btn-signup {
background: #fe142f;
display: block;
margin: 0 auto;
border-radius: 7px;
font-size: 1rem;
padding: 12px 82px;
color: #fff;
cursor: pointer;
border: 0;
}
/* custom select styles */
.custom-select {
position: relative;
font-family: Arial;
font-size: 1.1rem;
font-weight: normal;
}
.custom-select select {
display: none;
}
.select-selected {
background-color: #fff;
}
/* Style the arrow inside the select element: */
.select-selected:after {
position: absolute;
content: "";
top: 10px;
right: 13px;
width: 11px;
height: 11px;
border: 3px solid transparent;
border-bottom-color: #f00;
border-left-color: #f00;
transform: rotate(-48deg);
border-radius: 5px 0 5px 0;
}
/* Point the arrow upwards when the select box is open (active): */
.select-selected.select-arrow-active:after {
transform: rotate(135deg);
top: 13px;
}
.select-items div,
.select-selected {
color: #000;
padding: 11px 16px;
border: 1px solid transparent;
border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
cursor: pointer;
border-radius: 8px;
height: 48px;
}
/* Style items (options): */
.select-items {
position: absolute;
background-color: #fff;
top: 89%;
left: 0;
right: 0;
z-index: 99;
}
/* Hide the items when the select box is closed: */
.select-hide {
display: none;
}
.select-items div:hover,
.same-as-selected {
background-color: rgba(0, 0, 0, 0.1);
}
/* custom select end */
.text-label {
font-weight: normal;
font-size: 16px;
}
.hero-section {
min-height: 93vh;
border-radius: 10px;
display: grid;
grid-template-columns: repeat(12, 1fr);
overflow: hidden;
box-shadow: 0 2px 7px 2px rgba(0, 0, 0, 0.2);
margin-bottom: 10px;
}
.hero-content {
padding: 51px 67px;
grid-column: span 4;
background: #232323;
color: #fff;
position: relative;
text-align: left;
min-width: 424px;
}
.hero-content::after {
content: "";
width: 100%;
height: 100%;
background: #232323;
position: absolute;
right: -80px;
top: 0;
}
.hero-content > * {
position: relative;
z-index: 1;
}
.hero-headline {
font-size: 6rem;
font-weight: normal;
white-space: nowrap;
}
.hero-text {
width: 146%;
font-weight: normal;
margin-top: 57px;
padding: 0;
}
.btn-signup {
outline: none;
text-transform: capitalize;
font-size: 1.3rem;
padding: 15px 23px;
margin: 0;
margin-top: 59px;
}
.hero-img {
grid-column: span 8;
}
.hero-img img {
width: 100%;
height: 100%;
display: block;
padding: 0;
}
.copyrights {
color: #fe142f;
padding: 0;
font-size: 1rem;
margin: 60px 0 30px;
font-weight: bolder;
}
.hero-section > .btn-signup {
display: none;
}
footer {
padding-left: 2vw;
padding-right: 2vw;
margin: 0 20px;
}
#media screen and (max-width: 800px) {
.hero-section {
display: block;
box-shadow: unset;
}
.hero-content {
background: #fff;
color: #000;
padding: 20px;
}
.hero-content::after {
content: unset;
}
.hero-content .btn-signup {
display: none;
}
.hero-headline {
font-size: 4.5rem;
white-space: normal;
}
.hero-text {
width: unset;
font-size: 1.5rem;
}
.hero-img img {
border-radius: 10px;
margin-top: 40px;
}
.hero-section > .btn-signup {
display: block;
margin: 32px auto 10px;
padding: 12px 35px;
}
.copyrights {
margin-top: 50px;
text-align: center;
}
}
#keyframes modalopen {
from {
opacity: 0;
transform: translateY(-150px);
}
to {
opacity: 1;
}
}
<form
id="form"
name="reserve"
action="index.html"
method="get"
>
<div class="formData">
<label for="firstName">Prénom</label><br>
<input
class="text-control"
type="text"
id="firstName"
name="first"
minlength="2"
required
/><br>
</div>
<input
class="btn-submit"
type="submit"
class="button"
value="C'est parti"
/>
</form>
I have created an accordion which I would like to populate using JSON from this link : http://design.propcom.co.uk/buildtest/accordion-data.json
Here is my html:
<div class="accordion js-accordion">
<div class="accordion__item js-accordion-item active">
<div class="accordion-header js-accordion-header"></div>
<div class="accordion-body js-accordion-body" >
<div class="accordion-body__contents" ></div>
</div><!-- end of accordion body -->
</div><!-- end of accordion item -->
<div class="accordion__item js-accordion-item ">
<div class="accordion-header js-accordion-header"></div>
<div class="accordion-body js-accordion-body">
<div class="accordion-body__contents"></div>
</div>
</div>
<div class="accordion__item js-accordion-item">
<div class="accordion-header js-accordion-header"></div>
<div class="accordion-body js-accordion-body">
<div class="accordion-body__contents"></div>
</div>
</div>
</div><!-- end of accordion -->
I am trying to populate the accordion-header js-accordion-header div with the "heading" data from the JSON file and accordion-body__contents with the "contents" data.
This is as far as I have got with the Javascript part:
$.ajax({
url: 'http://design.propcom.co.uk/buildtest/accordion-data.json',
type: 'GET',
dataType: 'JSON',
success: function (data) {
$.each(data.blocks, function(index, element) {
$(".accordion-header").append("<div>" + element.heading + "</div>");
$(".accordion-body__contents").append("<div>" + element.content + "</div>");
});
}
});
Any help would be greatly appreciated as I feel like I've hit a wall with my current efforts.
There are a few issues here:
We're a bit off when handling the AJAX results
Use the data.blocks property and while looping use the element variable.
As #Danny suggested we have extra AJAX properties
Remove the callback and data properties.
Lastly your html seems over complicated
After seeing the css from your demo site, I was able to include it and remove the JQueryUI thought. Now be sure to append the entire accordion__item element.
With these problems ironed out it should look similar to this:
$.ajax({
url: 'https://design.propcom.co.uk/buildtest/accordion-data.json',
type: 'GET',
dataType: 'JSON',
success: function (data) {
$.each(data.blocks, function(index, element) {
$(".accordion")
.append(`<div class="accordion__item js-accordion-item ">
<div class="accordion-header js-accordion-header">${element.heading}</div>
<div class="accordion-body js-accordion-body">
<div class="accordion-body__contents">${element.content}</div>
</div>
</div>`);
});
var accordion = (function(){
var $accordion = $('.js-accordion');
var $accordion_header = $accordion.find('.js-accordion-header');
var $accordion_item = $('.js-accordion-item');
// default settings
var settings = {
// animation speed
speed: 400,
// close all other accordion items if true
oneOpen: false
};
return {
// pass configurable object literal
init: function($settings) {
$accordion_header.on('click', function() {
accordion.toggle($(this));
});
$.extend(settings, $settings);
// ensure only one accordion is active if oneOpen is true
if(settings.oneOpen && $('.js-accordion-item.active').length > 1) {
$('.js-accordion-item.active:not(:first)').removeClass('active');
}
// reveal the active accordion bodies
$('.js-accordion-item.active').find('> .js-accordion-body').show();
},
toggle: function($this) {
if(settings.oneOpen && $this[0] != $this.closest('.js-accordion').find('> .js-accordion-item.active > .js-accordion-header')[0]) {
$this.closest('.js-accordion')
.find('> .js-accordion-item')
.removeClass('active')
.find('.js-accordion-body')
.slideUp()
}
// show/hide the clicked accordion item
$this.closest('.js-accordion-item').toggleClass('active');
$this.next().stop().slideToggle(settings.speed);
}
}
})();
$(document).ready(function(){accordion.init({ speed: 300, oneOpen: true });});
}
});
body {
font-size: 62.5%;
background: #ffffff;
font-family: 'Open Sans', sans-serif;
line-height: 2;
padding: 5em;
}
.accordion {
font-size: 1rem;
width: 30vw;
margin: 0 auto;
border-radius: 5px;
}
.accordion-header,
.accordion-body {
background: white;
}
.accordion-header {
padding: 1.5em 1.5em;
margin-bottom:6px;
box-shadow: 0px 4px #6F277D;
background: #9E38B0;
text-transform: uppercase;
color: white;
cursor: pointer;
font-size: .8em;
letter-spacing: .1em;
transition: all .3s;
}
.accordion-header:hover {
background: #6844B7;
box-shadow: 0px 4px #4C3185;
position: relative;
z-index: 5;
}
.accordion-body {
background: #fcfcfc;
color: #3f3c3c;
display: none;
}
.accordion-body__contents {
padding: 1.5em 1.5em;
font-size: .85em;
}
.accordion__item.active:last-child .accordion-header {
border-radius: none;
}
.accordion:first-child > .accordion__item > .accordion-header {
border-bottom: 1px solid transparent;
}
.accordion__item > .accordion-header:after {
content: "\f3d0";
font-family: IonIcons;
font-size: 1.2em;
float: right;
position: relative;
top: -2px;
transition: .3s all;
transform: rotate(0deg);
}
.accordion__item.active > .accordion-header:after {
transform: rotate(-180deg);
}
.accordion__item.active .accordion-header {
background: #6844B7;
box-shadow: 0px 4px #4C3185;
}
.accordion__item .accordion__item .accordion-header {
background: #f1f1f1;
color: black;
}
#media screen and (max-width: 1000px) {
body {
padding: 1em;
}
.accordion {
width: 100%;
}
}body {
font-size: 62.5%;
background: #ffffff;
font-family: 'Open Sans', sans-serif;
line-height: 2;
padding: 5em;
}
.accordion {
font-size: 1rem;
width: 30vw;
margin: 0 auto;
border-radius: 5px;
}
.accordion-header,
.accordion-body {
background: white;
}
.accordion-header {
padding: 1.5em 1.5em;
margin-bottom:6px;
box-shadow: 0px 4px #6F277D;
background: #9E38B0;
text-transform: uppercase;
color: white;
cursor: pointer;
font-size: .8em;
letter-spacing: .1em;
transition: all .3s;
}
.accordion-header:hover {
background: #6844B7;
box-shadow: 0px 4px #4C3185;
position: relative;
z-index: 5;
}
.accordion-body {
background: #fcfcfc;
color: #3f3c3c;
display: none;
}
.accordion-body__contents {
padding: 1.5em 1.5em;
font-size: .85em;
}
.accordion__item.active:last-child .accordion-header {
border-radius: none;
}
.accordion:first-child > .accordion__item > .accordion-header {
border-bottom: 1px solid transparent;
}
.accordion__item > .accordion-header:after {
content: "\f3d0";
font-family: IonIcons;
font-size: 1.2em;
float: right;
position: relative;
top: -2px;
transition: .3s all;
transform: rotate(0deg);
}
.accordion__item.active > .accordion-header:after {
transform: rotate(-180deg);
}
.accordion__item.active .accordion-header {
background: #6844B7;
box-shadow: 0px 4px #4C3185;
}
.accordion__item .accordion__item .accordion-header {
background: #f1f1f1;
color: black;
}
#media screen and (max-width: 1000px) {
body {
padding: 1em;
}
.accordion {
width: 100%;
}
}body {
font-size: 62.5%;
background: #ffffff;
font-family: 'Open Sans', sans-serif;
line-height: 2;
padding: 5em;
}
.accordion {
font-size: 1rem;
width: 30vw;
margin: 0 auto;
border-radius: 5px;
}
.accordion-header,
.accordion-body {
background: white;
}
.accordion-header {
padding: 1.5em 1.5em;
margin-bottom:6px;
box-shadow: 0px 4px #6F277D;
background: #9E38B0;
text-transform: uppercase;
color: white;
cursor: pointer;
font-size: .8em;
letter-spacing: .1em;
transition: all .3s;
}
.accordion-header:hover {
background: #6844B7;
box-shadow: 0px 4px #4C3185;
position: relative;
z-index: 5;
}
.accordion-body {
background: #fcfcfc;
color: #3f3c3c;
display: none;
}
.accordion-body__contents {
padding: 1.5em 1.5em;
font-size: .85em;
}
.accordion__item.active:last-child .accordion-header {
border-radius: none;
}
.accordion:first-child > .accordion__item > .accordion-header {
border-bottom: 1px solid transparent;
}
.accordion__item > .accordion-header:after {
content: "\f3d0";
font-family: IonIcons;
font-size: 1.2em;
float: right;
position: relative;
top: -2px;
transition: .3s all;
transform: rotate(0deg);
}
.accordion__item.active > .accordion-header:after {
transform: rotate(-180deg);
}
.accordion__item.active .accordion-header {
background: #6844B7;
box-shadow: 0px 4px #4C3185;
}
.accordion__item .accordion__item .accordion-header {
background: #f1f1f1;
color: black;
}
#media screen and (max-width: 1000px) {
body {
padding: 1em;
}
.accordion {
width: 100%;
}
}body {
font-size: 62.5%;
background: #ffffff;
font-family: 'Open Sans', sans-serif;
line-height: 2;
padding: 5em;
}
.accordion {
font-size: 1rem;
width: 30vw;
margin: 0 auto;
border-radius: 5px;
}
.accordion-header,
.accordion-body {
background: white;
}
.accordion-header {
padding: 1.5em 1.5em;
margin-bottom:6px;
box-shadow: 0px 4px #6F277D;
background: #9E38B0;
text-transform: uppercase;
color: white;
cursor: pointer;
font-size: .8em;
letter-spacing: .1em;
transition: all .3s;
}
.accordion-header:hover {
background: #6844B7;
box-shadow: 0px 4px #4C3185;
position: relative;
z-index: 5;
}
.accordion-body {
background: #fcfcfc;
color: #3f3c3c;
display: none;
}
.accordion-body__contents {
padding: 1.5em 1.5em;
font-size: .85em;
}
.accordion__item.active:last-child .accordion-header {
border-radius: none;
}
.accordion:first-child > .accordion__item > .accordion-header {
border-bottom: 1px solid transparent;
}
.accordion__item > .accordion-header:after {
content: "\f3d0";
font-family: IonIcons;
font-size: 1.2em;
float: right;
position: relative;
top: -2px;
transition: .3s all;
transform: rotate(0deg);
}
.accordion__item.active > .accordion-header:after {
transform: rotate(-180deg);
}
.accordion__item.active .accordion-header {
background: #6844B7;
box-shadow: 0px 4px #4C3185;
}
.accordion__item .accordion__item .accordion-header {
background: #f1f1f1;
color: black;
}
#media screen and (max-width: 1000px) {
body {
padding: 1em;
}
.accordion {
width: 100%;
}
}body {
font-size: 62.5%;
background: #ffffff;
font-family: 'Open Sans', sans-serif;
line-height: 2;
padding: 5em;
}
.accordion {
font-size: 1rem;
width: 30vw;
margin: 0 auto;
border-radius: 5px;
}
.accordion-header,
.accordion-body {
background: white;
}
.accordion-header {
padding: 1.5em 1.5em;
margin-bottom:6px;
box-shadow: 0px 4px #6F277D;
background: #9E38B0;
text-transform: uppercase;
color: white;
cursor: pointer;
font-size: .8em;
letter-spacing: .1em;
transition: all .3s;
}
.accordion-header:hover {
background: #6844B7;
box-shadow: 0px 4px #4C3185;
position: relative;
z-index: 5;
}
.accordion-body {
background: #fcfcfc;
color: #3f3c3c;
display: none;
}
.accordion-body__contents {
padding: 1.5em 1.5em;
font-size: .85em;
}
.accordion__item.active:last-child .accordion-header {
border-radius: none;
}
.accordion:first-child > .accordion__item > .accordion-header {
border-bottom: 1px solid transparent;
}
.accordion__item > .accordion-header:after {
content: "\f3d0";
font-family: IonIcons;
font-size: 1.2em;
float: right;
position: relative;
top: -2px;
transition: .3s all;
transform: rotate(0deg);
}
.accordion__item.active > .accordion-header:after {
transform: rotate(-180deg);
}
.accordion__item.active .accordion-header {
background: #6844B7;
box-shadow: 0px 4px #4C3185;
}
.accordion__item .accordion__item .accordion-header {
background: #f1f1f1;
color: black;
}
#media screen and (max-width: 1000px) {
body {
padding: 1em;
}
.accordion {
width: 100%;
}
}/* CSS Document */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="accordion js-accordion">
</div>
After skimming your demo, I've included your CSS into my example.
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.
I'm trying to change the background colour of a navbar item upon click by setting it active. The menu item corresponding to the left page should be deactivated, i.e. its background colour should be set back to normal.
There are two problems:
When using data-toggle="pill", the href does not work anymore (therefore I left it out)
Remembering the previous page is not working because the global variable previousID is not overwritten. As a consequence, the previously selected menu item is not deactivated.
Here's the code:
var previousID = "navbar-index";
$("li").click(function() {
var currentID = $(this).attr("id");
alert("current ID: " + currentID);
document.getElementById(currentID).setAttribute('class', 'active');
alert("previous ID: " + previousID);
document.getElementById(previousID).removeAttribute('class', 'active');
previousID = currentID;
});
/*.dropdown:hover .dropdown-menu {
display: block;
}*/
h4,
h5,
h6,
h1,
h2,
h3 {
margin-top: 0;
}
ul,
ol {
margin: 0;
}
p {
margin: 0;
font-weight: 300;
}
html,
body {
font-family: 'Source Sans Pro', sans-serif;
font-size: 100%;
background-color: #FFF;
color: #777;
}
body a {
transition: 0.5s all;
-webkit-transition: 0.5s all;
-moz-transition: 0.5s all;
-o-transition: 0.5s all;
-ms-transition: 0.5s all;
}
.header {
background: #fff;
padding: 2em 0;
border-top: 3px solid #2ABB9B;
border-bottom: 3px solid #2ABB9B;
}
.navbar-brand {
font-size: 32px;
font-weight: 700;
color: #444;
letter-spacing: -1px;
padding: 5px;
}
.navbar-brand:hover {
color: #3e897a;
}
.navbar-brand .fa {
color: #2abb9b;
}
.menu {
float: right;
}
.menu li {
display: inline-block;
}
.menu li:first-child {
margin-left: 0;
}
.menu li a {
display: block;
font-size: 1em;
color: #777;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
text-transform: uppercase;
font-weight: 500;
letter-spacing: 1px;
}
#nav .current a {
color: #2ABB9B;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.menu li a:hover {
/*color: #94ddcd;*/
color: #104a3e;
/*background: #fff !important;*/
background: #a9e3d7 !important;
}
.menu li.active a {
color: #000000;
/*background: #fff !important;*/
background: #ff0000 !important;
}
.toggleMenu {
display: none;
padding: 4px 5px 0px 5px;
border-radius: 2em;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
-o-border-radius: 2em;
}
.nav:before,
.nav:after {
content: " ";
display: table;
}
.nav:after {
clear: both;
}
.nav ul {
list-style: none;
}
#media screen and (max-width: 800px) {
.menu {
margin: 10px 0;
}
.active {
display: block;
}
.menu li a {
text-align: left;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-o-border-radius: 0;
}
.nav {
list-style: none;
*zoom: 1;
width: 95%;
position: absolute;
right: 10px;
background: #051619;
top: 86px;
z-index: 9999;
border: 1px solid #B11D1D;
}
.menu li a span {
text-align: center;
top: 15px;
}
.nav li ul {
width: 100%;
}
.menu ul {
margin: 0;
}
.nav > li.hover > ul {
width: 100%;
}
.nav > li {
float: none;
display: block;
}
.nav ul {
display: block;
width: 100%;
}
.nav > li.hover > ul,
.nav li li.hover ul {
position: static;
}
.nav li a {
border-top: 1px solid #B11D1D;
background: #fff;
}
.nav li:first-child a {
border-top: none;
}
}
.banner {
background: url(../images/banner.jpg) no-repeat center;
min-height: 500px;
width: 100%;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
padding-bottom: 100px;
}
.banner-info {
margin-top: 8em;
}
.banner-info h1 {
font-size: 3em;
color: #eee;
line-height: 1.4em;
margin: 0em;
font-weight: 500;
}
.banner-info p {
color: #ddd;
font-size: 1.2em;
text-transform: uppercase;
font-weight: 500;
letter-spacing: 1px;
line-height: 1.8em;
margin-top: 1em;
}
.content_white {
text-align: center;
padding: 3em 0;
}
.content_white h2 {
font-size: 2em;
font-weight: 500;
}
.content_white p {
color: #777;
font-size: 1.2em;
font-weight: 300;
line-height: 0.6em;
}
.featured_content {
background: #2ABB9B;
}
.feature_grid1 {
width: 23.5%;
margin-right: 2em;
border-right: 1px solid #5fccb4;
padding: 4em 2em 4em 0;
}
.feature_grid2 {
width: 21%;
padding: 4em 0;
}
.feature_grid1 .fa,
.feature_grid2 .fa {
color: #e5e52d;
}
h3.m_1 {
padding: 0.8em 0;
margin: 0;
}
h3.m_1 a {
font-size: 1.1em;
color: #fff;
text-decoration: none;
text-shadow: 1px 1px #4ca390;
}
h3.m_1 a:hover {
color: #e5e52d;
}
p.m_2 {
color: #e9f8f5;
font-size: 1em;
line-height: 1.5em;
margin-bottom: 1em;
font-weight: 300;
}
.banner_btn {
display: inline-block;
padding: 6px 20px;
font-size: 1em;
cursor: pointer;
background: #2ABB9B;
color: #fff;
font-weight: 500;
text-decoration: none;
outline: none;
margin-top: 30px;
border-radius: 5px;
}
.banner_btn:hover {
background: #22967c;
color: #fff;
text-decoration: none;
}
.feature_btn {
display: inline-block;
padding: 6px 20px;
font-size: 1em;
cursor: pointer;
background: #5fccb4;
color: #fff;
font-weight: 500;
text-decoration: none;
outline: none;
margin-top: 10px;
border-radius: 5px;
}
.feature_btn:hover {
background: #e5e52d;
color: #555;
text-decoration: none;
}
.nbs-flexisel-container {
position: relative;
max-width: 100%;
}
.nbs-flexisel-ul {
position: relative;
width: 9999px;
margin: 0px;
padding: 0px;
list-style-type: none;
text-align: center;
}
.nbs-flexisel-inner {
overflow: hidden;
margin: 3em 0;
}
.nbs-flexisel-item {
float: left;
margin: 0px;
padding: 0px;
cursor: pointer;
position: relative;
line-height: 0px;
padding-right: 30px;
}
.nbs-flexisel-item > img {
cursor: pointer;
position: relative;
}
.nbs-flexisel-nav-left,
.nbs-flexisel-nav-right {
width: 30px;
height: 30px;
position: absolute;
cursor: pointer;
z-index: 100;
margin-top: -8.6em;
}
.nbs-flexisel-nav-left {
left: 32.5em;
background: url(../images/img-sprite.png) no-repeat -99px -101px;
}
.nbs-flexisel-nav-right {
right: 35em;
background: url(../images/img-sprite.png) no-repeat -133px -102px;
}
a:focus {
outline: 0px;
}
.fa {
color: #2ABB9B;
}
.footer_bottom {
padding: 2em 0;
background: #2ABB9B;
}
.copy {
text-align: center;
}
.copy p {
font-size: 1em;
color: #fff;
}
.copy p a {
color: #fff;
border-bottom: 1px dotted;
}
.copy p a:hover {
color: #e5e52d;
border-bottom: 1px solid;
text-decoration: none;
}
.about {
background: #555;
margin-bottom: 4em;
background: url(../images/title-bg.jpg) center no-repeat;
background-size: cover;
height: 180px;
}
.title-section {
position: relative;
padding-top: 60px;
padding-right: 0;
padding-left: 0;
padding-bottom: 20px;
}
.title-section h1 {
margin: 0 0 5px 0;
line-height: 58px;
font-size: 34px;
font-weight: 500;
color: #555;
}
.title-section ul {
background: none;
position: relative;
margin: 0;
padding: 9px 0 10px 0;
border-top: 1px solid #597275;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.title-section ul li {
line-height: 18px;
font-size: 13px;
color: #5f6775;
}
.title-section ul li a {
color: #fff;
}
h3.m_2 {
font-size: 1.7em;
font-weight: 500;
color: #666;
margin-bottom: 1em;
}
.service_box {
padding-bottom: 50px;
}
.service_box .fa {
color: #2ABB9B;
}
.service_box h2 {
font-size: 1.6em;
color: #5d5f60;
padding-top: 0.3em;
padding-right: 0;
padding-left: 0;
padding-bottom: 0.5em;
}
.service_box h5 a {
font-size: 16px;
color: #555;
margin-bottom: 1em;
line-height: 1.5em;
}
.service_box h5 a:hover {
text-decoration: none;
color: #e4551d;
}
.service_box p {
font-size: 1em;
color: #777;
margin-bottom: 1.4em;
line-height: 1.6em;
text-align: left;
}
.about-info {
padding: 4em 0;
}
.about-info h2 {
padding-bottom: 20px;
}
.about-info h3,
.about_content h3 {
padding-bottom: 20px;
}
.about_content {
padding: 1em 0 4em 0;
}
.about_content img {
padding: 0 20px 20px 0;
float: left;
}
.highlight-info {
background: url(../images/lab.jpg) center fixed;
background-size: cover;
color: #fff;
padding: 6em 0;
}
.highlight-info h4 {
color: #fff;
margin: 0.5em 0 0 0;
}
.testimonial-solid {
padding-top: 50px;
padding-right: 0;
padding-left: 0;
padding-bottom: 70px;
margin: 0 0 0 0;
background: #fff;
text-align: center;
}
.carousel-indicators {
bottom: -40px;
}
.carousel-indicators li {
border: 1px solid #ccc;
}
.carousel-indicators .active {
background-color: #ccc;
margin-right: 4px;
}
.testimonial-solid h2 {
font-size: 2em;
font-weight: 500;
padding-bottom: 20px;
}
.testimonial-solid p {
font-size: 1em;
line-height: 30px;
}
#accordion-alt3 .panel-heading h4 {
font-size: 14px;
line-height: 28px;
}
.panel .panel-heading h4 {
font-weight: 400;
}
.panel-title {
margin-top: 0;
margin-bottom: 0;
font-size: 15px;
color: inherit;
}
.panel-group .panel {
margin-bottom: 0;
border-radius: 2px;
}
.panel {
margin-bottom: 18px;
background-color: #F4F4F4;
border: 1px solid transparent;
border-radius: 2px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}
#accordion-alt3 .panel-heading h4 a i {
font-size: 16px;
line-height: 18px;
width: 18px;
height: 18px;
margin-right: 5px;
color: #2ABB9B;
text-align: center;
border-radius: 50%;
margin-left: 6px;
}
.follow-us {
margin-top: 10px;
margin-bottom: 20px;
text-align: center;
}
.social-icon {
padding-top: 6px;
font-size: 16px;
text-align: center;
width: 32px;
height: 32px;
border: 2px solid #d5f1eb;
border-radius: 50%;
color: #d5f1eb;
margin: 5px;
}
a.social-icon:hover,
a.social-icon:active,
a.social-icon:focus {
text-decoration: none;
color: #e5e52d;
border-color: #e5e52d;
}
.contact {
padding-top: 1em;
padding-right: 0;
padding-left: 0;
padding-bottom: 4em;
}
.contact_top {
margin-right: 0;
margin-left: 0;
margin-bottom: 4em;
}
.contact_details {
background-color: #f6f6f6;
padding: 20px;
border-left: 2px solid #fff;
}
.contact_details h5 {
font-size: 1.2em;
font-weight: 500;
color: #666;
margin-bottom: 1em;
}
.contact_address,
.contact_mail {
overflow: hidden;
font-size: 1em;
color: #777;
line-height: 1.5em;
}
.contact_bottom h3 {
font-size: 1.5em;
font-weight: 500;
color: #666;
}
.contact_bottom p {
font-size: 1em;
line-height: 1.8em;
color: #888;
margin: 1em 0;
}
.contact-to input[type="text"] {
padding: 10px 10px;
width: 32.5%;
margin: 10px 0;
border: 1px solid #E1E2E2;
color: #999;
background: #FFF;
float: left;
outline: none;
font-size: 0.85em;
}
.text2 input[type="text"],
.text2 textarea {
width: 99%;
margin: 10px 0;
border: 1px solid #E1E2E2;
color: #999;
outline: none;
margin-bottom: 25px;
height: 150px;
padding: 10px 10px;
font-size: 0.85em;
resize: none;
}
.submit {
margin-top: 2em;
display: inline-block;
padding: 8px 20px;
font-size: 1em;
cursor: pointer;
border: none;
background: #2ABB9B;
color: #fff;
text-decoration: none;
outline: none;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
-o-transition: all 0.3s;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
}
.submit:hover {
text-decoration: none;
background: #22967c;
color: #fff;
}
#media (max-width: 1024px) {
.feature_grid1 {
width: 23%;
}
.banner {
min-height: 450px;
}
.banner-info {
margin-top: 4em;
}
.nbs-flexisel-nav-right {
right: 30em;
}
.nbs-flexisel-nav-left {
left: 29em;
}
.nbs-flexisel-nav-left,
.nbs-flexisel-nav-right {
margin-top: -7.6em;
}
}
#media (max-width: 800px) {
.header {
padding: 1em 0;
}
.feature_grid1 {
width: 100%;
padding: 4em 0em 0em 0;
}
.banner-info h1 {
font-size: 2em;
}
.banner {
min-height: 400px;
}
.feature_grid2 {
width: 100%;
}
.nbs-flexisel-nav-right {
right: 23em;
}
.nbs-flexisel-nav-left {
left: 22em;
}
.banner-info p {
font-size: 0.85em;
}
.toggleMenu {
padding: 0;
}
.service_box {
margin-bottom: 2em;
}
.contact_details {
margin-bottom: 2em;
}
.contact-to input[type="text"] {
width: 32%;
}
}
#media (max-width: 640px) {
.content_white p {
font-size: 1.3em;
}
.nbs-flexisel-nav-left {
left: 18.5em;
}
.nbs-flexisel-nav-right {
right: 18.5em;
}
.nbs-flexisel-nav-left,
.nbs-flexisel-nav-right {
margin-top: -5.8em;
}
.service_box h2 {
margin-bottom: 0.5em;
}
}
#media (max-width: 480px) {
.banner {
min-height: 250px;
}
.banner-info h1 {
font-size: 1.5em;
}
.banner-info p {
font-size: 0.8125em;
}
.banner-info {
margin-top: 2em;
}
.header {
padding: 0.5em 0;
}
.content_white h2 {
font-size: 1.5em;
}
.content_white p {
font-size: 1em;
}
.nbs-flexisel-nav-right {
right: 13.5em;
}
.nbs-flexisel-nav-left {
left: 13.5em;
}
.contact-to input[type="text"] {
width: 31%;
}
.nav {
top: 70px;
}
.nbs-flexisel-nav-left,
.nbs-flexisel-nav-right {
margin-top: -5em;
}
}
#media (max-width: 320px) {
.banner-info h1 {
font-size: 1.2em;
}
.banner-info p {
font-size: 12px;
}
.banner {
min-height: 150px;
}
.content_white p {
font-size: 0.95em;
line-height: 1em;
padding: 0 10px;
}
.content_white h2 {
font-size: 1.3em;
}
.nbs-flexisel-nav-right {
right: 8.5em;
}
.nbs-flexisel-nav-left {
left: 8.5em;
}
.nbs-flexisel-nav-left,
.nbs-flexisel-nav-right {
margin-top: -4.2em;
}
h3.m_1 {
padding: 0.5em 0;
}
.contact-to input[type="text"] {
width: 99%;
}
input.text {
margin-left: 0 !important;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
<div class="container">
<a class="navbar-brand" href="index.html">
BRAND
</a>
<div class="menu">
<a class="toggleMenu" href="#">
<img src="images/nav_icon.png" alt="" />
</a>
<ul class="nav" id="nav">
<li id="navbar-home" class="current">Home
</li>
<!--<li id="navbar-services">Services</li>-->
<li id="navbar-services">Services
</li>
<li id="navbar-photos">Photos
</li>
<li id="navbar-services">
<a href="test.html" </a>
</li>
<div class="clear"></div>
</ul>
</div>
</div>
</div>
I have solved this problem by generating and inserting javascript code by using a tiny python script.
Each html file now features the lines below to set its corresponding navbar element active. The ID refers to the ID which I have assigned to an li element
inside the list of navbar elements (check the code above).
<script type="text/javascript">
document.getElementById('navbar-services').setAttribute('class', 'active');
</script>
However, I don' manually add these lines to each file, but instead wrote a python script to automatically insert recurring elements such as the menu bar, a footer, imports etc. by detecting instructions such as
<!-- #REPLACEWITH imports.html -->
<!-- #REPLACEWITH navbar.html -->
My script uses the processed file's name and autogenerates the javascript code for the specific context.
The critical lines for this particular problem are:
comment = (line[4:len(line)-4]).strip(); # detects an assignment to insert/generate code
if comment.startswith(token):
path = SRC_INCL+'/'+(comment[len(token):]).strip();
with open(path, 'r') as f:
lineArr=f.read().splitlines();
for repLine in lineArr:
print repLine
if path[path.rfind('/')+1:path.find(".html")] == 'navbar':
name = file[file.rfind(os.sep)+1:file.find(".html")];
print "<script type=\"text/javascript\">"
print "document.getElementById('navbar-"+name+"').setAttribute('class', 'active');"
print "</script>"
It works like a charm for my purpose and is easily extendible
I've spent a long time trying to get this working.
I have a section called "RightExtra" and a div inside it called "RightExtraContent". I'm trying to make it so that these two divs can move freely when the window is resized up to a certain point, without affecting the position of any other divs.
Here is a visual explanation of what I mean:
http://i.imgur.com/A3qBGsj.png
And here is the fiddle: http://jsfiddle.net/c21nzs13/1/
I've tried a bunch of different code combinations and still no success.
* {
padding: 0;
margin: 0;
}
html {
background: #1e1e1e;
/*Back Colors 1*/
}
body {
background-color: #1e1e1e;
/*background:url('https://snap-photos.s3.amazonaws.com/img-thumbs/960w/4657039731.jpg');*/
}
a {
color: #FFFFFF;
text-decoration: none;
}
a:active,
a:hover {
text-decoration: underline;
}
.nofancy a {
text-decoration: none;
}
/*These nofancies don't work*/
.nofancy a:hover {
text-decoration: none;
}
/*These nofancies don't work*/
#heady {
text-align: center;
width: 100%;
height: 75px;
background-color: #1e1e1e;
/*Back Colors 2*/
font-family: Tahoma;
font-size: 16px;
color: #000000;
position: relative;
margin-bottom: 30px;
}
#wrapper {
text-align: center;
width: 1000px;
height: 100%;
margin-left: auto;
margin-right: auto;
/*background-color:#1e1e1e; Back Colors 3*/
font-family: Tahoma;
font-size: 16px;
position: relative;
}
#RightExtra {
background-color: none;
width: 500px;
float: right;
margin-left: auto;
margin-right: auto;
position: relative;
}
#RightExtraContent {
font-family: Tahoma;
font-size: 16px;
height: 800px;
width: 300px;
color: white;
background-color: #343434;
text-align: center;
border-radius: 30px;
position: fixed;
float: right;
}
#followfoot {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 180px;
background-color: none;
text-align: center;
/*display:none;*/
}
#mag {
background-color: #739FE0;
border-color: #739FE0;
border-style: solid;
border-width: 2px;
border-radius: 20px;
line-height: 10px;
text-align: center;
margin-left: 8px;
cursor: pointer;
}
#feety {
text-align: center;
width: 100%;
height: 0px;
//100px background-color:darkslateblue;
/*Back Colors 4*/
font-family: Tahoma;
font-size: 16px;
color: white;
position: fixed;
//Changing this to relative makes followfoot disappear when you scroll long enough.
}
.UpCenter {
/*background-color:#1e1e1e; Back Colors 5*/
padding-top: 30px;
margin-bottom: 50px;
height: 90px;
}
.SignUp {
background-color: #ccc;
border-width: 1px;
border-color: #ccc;
border-radius: 10px;
width: 75px;
padding: 0px 0px;
margin-left: 30px;
text-align: center;
float: right;
}
/* clearfix */
/**
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* contenteditable attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that are clearfixed.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.cf:before,
.cf:after {
content: " ";
/* 1 */
display: table;
/* 2 */
}
.cf:after {
clear: both;
}
.cf {
* zoom: 1;
}
ul.navbar {
border-style: solid;
border-width: 1px;
border-color: #739FE0;
width: 100px;
/*Widthchanger1*/
border-radius: 4px;
margin-left: 0px;
margin-right: 0px;
font-size: 14px;
height: 33px;
}
ul.navbar li a.ActiveListItem {
color: white;
!important;
background-color: #222 !important;
padding: 7.5px 0px !important;
font-weight: normal !important;
margin-left: 0px;
/*Widthchanger2, got the activeitem centered with list text this way*/
margin-right: 0px;
border-radius: 4px;
height: 18px;
width: 100px;
/*kinda messes with width of text*/
margin-bottom: 1px;
}
ul.navbar li {
position: relative;
width: 100px;
/*Changes width of actual list*/
}
ul.navbar li a {
display: block;
color: white;
padding: 10px 5px;
text-decoration: none;
transition: all .1s ease-in;
}
ul.navbar li a:hover,
ul.navbar li:hover > a {
/*background:black; */
background: #739FE0;
color: #FFFFFF;
/*font-weight:600;*/
/*border-bottom-color:#FFFFFF;
border-bottom-style:solid;*/
/*border-color:#FFFFFF;
border-style:solid;
border-width:1px; */
}
ul.navbar li ul {
margin-top: 0px;
/*Controls space from listdropdown to listchooser*/
position: absolute;
background: #222;
font-size: 14px;
/* min-width: 200px; */
display: none;
z-index: 99;
box-shadow: inset 0 0px 3px rgba(0, 0, 0, .6), 0 5px 10px rgba(0, 0, 0, .6);
}
ol,
ul {
list-style: outside none none;
}
.hidden {
display: none;
}
/*Lister*/
form {} .lister input {
width: 235px;
/*width of todo input box*/
height: 33px;
padding-left: 10px;
padding-right: 10px;
border-width: 1px;
border-style: solid;
border-color: #739FE0;
float: left;
margin-bottom: 20px;
font-size: 14px;
font-family: "Tahoma";
background-color: #222;
color: white;
}
.lister input:focus {
outline: none;
border-color: #739FE0;
/*ccc*/
box-shadow: 0px 0px 7px 0px #739FE0;
}
.lister ul {
/*list-style: square inside;*/
padding: 10px 0px 55px 0px;
/* padding for outside area of list*/
/* This is what's visible when not in use Used to be 10*/
/*height:50px;*/
/*background: #0f705d; DarkerOutsideColor*/
background: none;
/*width: 100%;*/
font-family: "Tahoma";
}
.active {
text-align: center;
}
.inactive {
display: none;
}
.lister li {
font-size: 14px;
/*font size of list items*/
/*font-weight: 600;*/
color: #181818;
/*Font Color d5faf3*/
display: inline-block;
/*This makes the items side-by-side and not columns*/
padding: 9px;
margin-bottom: 5px;
/*SEPARATE*/
/* float:left; Interferes with text-align of Active*/
}
.lister li:nth-child(odd) {
background: #343434;
/*LighterInside Color,Odd*/
border-color: #ccc;
border-width: 1px;
border-radius: 5px;
border-style: solid;
box-shadow: 0px 0px 10px 0px #000000;
color: #ccc;
/*opacity:0.6;
filter:alpha(opacity=60);*/
}
.lister li:nth-child(even) {
background: #343434;
/*LighterInside Color,Even*/
border-color: #ccc;
border-width: 1px;
border-radius: 5px;
border-style: solid;
box-shadow: 0px 0px 10px 0px #000000;
color: #ccc;
}
.lister li > a {
/*float: right;*/
text-decoration: none;
color: white;
font-weight: bold;
/*transition: all .2s ease-in-out;*/
/*position:relative;*/
margin-top: 2px;
display: inline-block;
}
.lister li > a:hover {
/*font-size: 105%;*/
/*color: #c0392b;*/
color: #000000;
}
.lister li > span {
display: inline-block;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
max-width: 379px;
}
/*Clearable*/
.clearable {
/*background: #fff; */
/*background:url(../images/splusgreen.png); */
background-repeat: no-repeat;
background-size: 10px 10px;
background-position: right 5px center;
/* -15*/
transition: background 0.4s;
}
.clearable.x {
/*background-position: right 5px center;*/
}
.clearable.onX {
cursor: pointer;
}
<section id="heady">
<div style="width:1000px;margin-left:auto;margin-right:auto;">
<div style="text-align: left;padding:25px 0px;display:inline-block;float:left;font-size:18px;"><b>Calories</b>
</div>
<div style="text-align: right;padding:25px 00px;display:inline-block;float:right;">
<!--Home | --> Sign In | Sign Up
</div>
</div>
</section>
<section id="RightExtra">
<div id="RightExtraContent">Yes hello....!</div>
</section>
<section id="wrapper">
<br>
<br>
<div class="UpCenter">
<div style="vertical-align:top;display:inline-block;">
<ul class="navbar cf">
<li> Category
<ul></ul>
</li>
</ul>
</div>
<div class="lister" style="display:inline-block;vertical-align:top;padding:0px 0px 0px 10px;">
<form action="">
<input type="text" class="clearable" placeholder="Add your meals here..." autocomplete="off">
</form>
</div>
<div id="mag" style="display:inline-block;vertical-align:top;">
<img src="images/magCircy.png" width="33px" height="33px" onClick="changeHeight(this,event);"></img>
</div>
</div>
</div>
</section>
<section id="followfoot"></section>
In order to achieve this, I increased the width of the wrapper and moved the new div into it.