In this page a bunch of buttons (anchor element) has it own number (id), I have to select them and put into an array when they are toggled as active.
I've already created an array, the id from buttons are adding and they are all being printed, but I can't use this class ".active" instead of my normal class "btn_reservas".
How can I add / remove in my array only the selected numbers?
var controller = (function () {
var ctrlAddItem = function (event) {
console.log("It worked, pressed id = " + event.target.id);
event.target.classList.toggle("active");
};
document.querySelectorAll(".btn_reservas").forEach(function () {
this.addEventListener("click", ctrlAddItem);
});
document.addEventListener("keypress", function (event) {
if (event.keyCode === 13 || event.which === 13) {
ctrlAddItem();
}
});
var sum = 0;
var x = document.getElementsByClassName("btn_reservas");
// var x = document.getElementsByClassName("btn_reservas.active");
var numbers = [];
for (i=0; i < x.length; i++){
x[i].id;
numbers.push(', ' + x[i].id);
}
numbers.forEach(myFunction);
function myFunction(item) {
sum += item;
document.getElementById("demo").innerHTML = sum;
}
})();
body {
background-color: #ffffff;
}
h1 {
color: #999999;
align-content: center;
padding-left: 400px;
}
#menu {
background-color: #4682b4;
padding: 3px;
}
#menu ul {
text-align: center;
padding-left: 20%;
list-style: none;
}
#menu ul li {
display: inline;
}
#menu ul li a {
color: #ffffff;
/* padding-left: 5%; */
margin: 50px;
background-color: #4682b4;
font-size: xx-large;
text-decoration: none;
}
#menu ul li a:hover {
background-color: #b0c4de;
}
#Promocoes {
display: flex;
flex-direction: row;
}
#Promocoes img {
align-content: center;
padding: 25px;
}
#item {
text-align: center;
border-radius: 10px;
margin: 20px;
background-color: rgba(9, 50, 99, 0.35);
}
#item p {
font-size: 14px;
}
#item button {
background-color: #ffffff;
padding: 10px;
border-radius: 5px;
cursor: pointer;
border: none;
font-weight: bold;
}
#item button:hover {
background-color: #b0c4de;
}
/* Sobre Nos */
#historia {
margin-left: 200px;
margin-right: 200px;
font-size: 20px;
}
#historia img {
padding-left: 100px;
align-self: center;
}
/* SORTEIO */
.legenda ul li{
list-style: none;
display: inline-block;
font-weight: bolder;
margin-right: 1%;
margin-top: 5px;
margin-bottom: 10px;
}
.disponivel {
cursor: default;
background-color: #ffffff;
border: 2px #a9a9a9 solid;
border-radius: 5px;
padding: 8px;
}
.reservados {
cursor: not-allowed;
background-color: lightgreen;
border: 2px green solid;
color: #ffffff;
border-radius: 5px;
padding: 8px;
}
.pagos {
cursor: not-allowed;
background-color: lightsalmon;
border: 2px indianred solid;
color: #ffffff;
border-radius: 5px;
padding: 8px;
}
.enviar {
background-color: #4682b4;
cursor: pointer;
color: #ffffff;
border: #4682b4 solid;
border-radius: 5px;
padding: 8px;
}
.lista_sorteio {
margin-left: 200px;
margin-right: 200px;
font-size: 20px;
}
.lista ul li {
display: inline;
}
.lista ul li a {
display: block;
border: 2px solid #bfc0bf;
border-radius: 50%;
width: 100%;
line-height: 40px;
max-width: 75px;
height: auto;
font-weight: 700;
text-decoration: none;
display: inline;
box-sizing: border-box;
padding: 20px;
font-family: sans-serif;
font-size: 13px;
color: #ffffff;
background-color:rgb(85, 161, 108);
border-color: #212529;
margin-right: 50px;
}
.btn {
display: inline-block;
font-weight: 400;
color: #212529;
text-align: center;
vertical-align: middle;
cursor: pointer;
-webkit-user-select: none;
user-select: none;
background-color: transparent;
border: 1px solid transparent;
padding: .375rem .75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: .25rem;
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.lista ul li a:hover {
color: #212529;
background-color: #ffffff;
font:bolder;
transition: all 600ms ease;
}
.lista ul li a.active {
background-color: #f90;
}
<div class="lista">
<ul >
<li>
001
</li>
<li>
002
</li>
<li>
003
</li>
<li>
004
</li>
<li>
005
</li>
<li>
006
</li>
<li>
007
</li>
<li>
008
</li>
<li>
009
</li>
</ul>
</div>
</div>
<hr>
<p>Get the sum of the numbers in the array.</p>
<p id="demo"></p>
<hr>
</body>
</html>
You can still refer to .btn_reservas.active you just have to use querySelectorAll instead of getElementsByClassName.
This will still calculate sum, but it doesn't worry about the array as it just looks for elements with .btn_reservas.active.
var controller = (function() {
function calcSum(){
toggled = document.querySelectorAll(".btn_reservas.active");
sel =[];
toggled.forEach(function(el){
sel.push(el.getAttribute("id"));
});
document.getElementById("demo").innerHTML = sel.join(", ");
}
var ctrlAddItem = function(event) {
console.log("It worked, pressed id = " + event.target.id);
event.target.classList.toggle("active");
calcSum();
};
document.querySelectorAll(".btn_reservas").forEach(function() {
this.addEventListener("click", ctrlAddItem);
});
document.addEventListener("keypress", function(event) {
if (event.keyCode === 13 || event.which === 13) {
ctrlAddItem();
}
});
})();
body {
background-color: #ffffff;
}
h1 {
color: #999999;
align-content: center;
padding-left: 400px;
}
#menu {
background-color: #4682b4;
padding: 3px;
}
#menu ul {
text-align: center;
padding-left: 20%;
list-style: none;
}
#menu ul li {
display: inline;
}
#menu ul li a {
color: #ffffff;
/* padding-left: 5%; */
margin: 50px;
background-color: #4682b4;
font-size: xx-large;
text-decoration: none;
}
#menu ul li a:hover {
background-color: #b0c4de;
}
#Promocoes {
display: flex;
flex-direction: row;
}
#Promocoes img {
align-content: center;
padding: 25px;
}
#item {
text-align: center;
border-radius: 10px;
margin: 20px;
background-color: rgba(9, 50, 99, 0.35);
}
#item p {
font-size: 14px;
}
#item button {
background-color: #ffffff;
padding: 10px;
border-radius: 5px;
cursor: pointer;
border: none;
font-weight: bold;
}
#item button:hover {
background-color: #b0c4de;
}
/* Sobre Nos */
#historia {
margin-left: 200px;
margin-right: 200px;
font-size: 20px;
}
#historia img {
padding-left: 100px;
align-self: center;
}
/* SORTEIO */
.legenda ul li {
list-style: none;
display: inline-block;
font-weight: bolder;
margin-right: 1%;
margin-top: 5px;
margin-bottom: 10px;
}
.disponivel {
cursor: default;
background-color: #ffffff;
border: 2px #a9a9a9 solid;
border-radius: 5px;
padding: 8px;
}
.reservados {
cursor: not-allowed;
background-color: lightgreen;
border: 2px green solid;
color: #ffffff;
border-radius: 5px;
padding: 8px;
}
.pagos {
cursor: not-allowed;
background-color: lightsalmon;
border: 2px indianred solid;
color: #ffffff;
border-radius: 5px;
padding: 8px;
}
.enviar {
background-color: #4682b4;
cursor: pointer;
color: #ffffff;
border: #4682b4 solid;
border-radius: 5px;
padding: 8px;
}
.lista_sorteio {
margin-left: 200px;
margin-right: 200px;
font-size: 20px;
}
.lista ul li {
display: inline;
}
.lista ul li a {
display: block;
border: 2px solid #bfc0bf;
border-radius: 50%;
width: 100%;
line-height: 40px;
max-width: 75px;
height: auto;
font-weight: 700;
text-decoration: none;
display: inline;
box-sizing: border-box;
padding: 20px;
font-family: sans-serif;
font-size: 13px;
color: #ffffff;
background-color: rgb(85, 161, 108);
border-color: #212529;
margin-right: 50px;
}
.btn {
display: inline-block;
font-weight: 400;
color: #212529;
text-align: center;
vertical-align: middle;
cursor: pointer;
-webkit-user-select: none;
user-select: none;
background-color: transparent;
border: 1px solid transparent;
padding: .375rem .75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: .25rem;
transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.lista ul li a:hover {
color: #212529;
background-color: #ffffff;
font: bolder;
transition: all 600ms ease;
}
.lista ul li a.active {
background-color: #f90;
}
<div class="lista">
<ul>
<li>
001
</li>
<li>
002
</li>
<li>
003
</li>
<li>
004
</li>
<li>
005
</li>
<li>
006
</li>
<li>
007
</li>
<li>
008
</li>
<li>
009
</li>
</ul>
</div>
</div>
<hr>
<p>Get the sum of the numbers in the array.</p>
<p id="demo"></p>
<hr>
</body>
</html>
Related
I would like to know how to make menu button fixed at page top. I need it to be available whenever page scroll down or up. On click; menu should slide down. Thank you to everyone who will answer and sorry for my bad english. PS Even if in this platform the menu is not shown well, in my website it works fine, just is stuck only on the top left corner and doesn't move with the page
$(document).ready(function() {
$(".cross").hide();
$(".menu").hide();
$(".hamburger").click(function() {
$(".menu").slideToggle("slow", function() {
$(".hamburger").hide();
$(".cross").show();
});
});
$(".cross").click(function() {
$(".menu").slideToggle("slow", function() {
$(".cross").hide();
$(".hamburger").show();
});
});
});
header {
width: 100%;
background: #ffffff;
height: 0px;
line-height: 0px;
border-bottom: 0px solid #dddddd;
}
.hamburger {
background: none;
position: absolute;
top: 0;
line-height: 45px;
padding: 5px 15px 0px 15px;
color: #ffffff;
border: 0;
font-size: 2.0em;
font-weight: bold;
cursor: pointer;
outline: none;
z-index: 10000000000000;
}
.cross {
background: none;
position: absolute;
top: 0px;
padding: 5px 15px 0px 15px;
color: #ffffffff;
border: 0;
font-size: 4em;
line-height: 55px;
font-weight: bold;
cursor: pointer;
outline: none;
z-index: 10000000000000;
}
.menu {
z-index: 1000000;
font-weight: bold;
font-size: 0.8em;
width: max(20%, max-content);
background: #666;
position: absolute;
text-align: center;
font-size: 10px;
}
.menu ul {
margin: 0;
padding: 0;
list-style-type: none;
list-style-image: none;
}
.menu li {
display: block;
padding: 15px 0 15px 0;
}
.menu li:hover {
display: block;
background: #666;
padding: 15px 0 15px 0;
border-bottom: #666 10px solid;
}
.menu ul li a {
text-decoration: none;
margin: 0px;
color: #666;
letter-spacing: 5px;
text-transform: uppercase;
font: 13px "Lato", sans-serif;
color: #111;
text-align: center
}
.menu ul li a:hover {
color: #666;
text-decoration: none;
}
.menu a {
text-decoration: none;
color: #ffffff;
text-transform: uppercase;
letter-spacing: 5px;
text-transform: uppercase;
font: 13px "Lato", sans-serif;
text-align: center;
}
.menu a:hover {
text-decoration: none;
color: black;
text-transform: uppercase;
letter-spacing: 5px;
text-transform: uppercase;
font: 15px "Lato", sans-serif;
text-align: center
}
.glyphicon-home {
color: black;
font-size: 1.5em;
margin-top: 5px;
margin: 0 auto;
}
<header>
<button class="hamburger">☰</button>
<div class="menu">
<ul>
<li><button class="cross">˟</button></li>
<a href="#g1">
<li>Link 1</li>
</a>
<a href="#g2">
<li>link 2</li>
</a>
<a href="#g3">
<li>link 3</li>
</a>
<a href="#g3">
<li>link4</li>
</a>
</ul>
</div>
</header>
Your code need to rebuild. You have a lot of code with no need. HTML Structure is not correct.
As #eric mentioned. you should use fixed position.
I made some changes to your code. Check it out at:
header {
background: red;
height: 1000px;
}
.menu {
position: fixed;
top: 10px;
left: 10px;
z-index: 999999;
}
.menu button {
width: 100%;
border: none;
border-radius: 0;
background-color: rgba(0,0,0,.5);
color: white;
font-size: 18px;
cursor: pointer;
padding: 5px 15px;
}
.menu button:hover {
background: #fff;
color: black;
}
.menu ul {
font-weight: bold;
font-size: 0.8em;
background: rgba(0,0,0,.5);
margin: 0;
padding: 0;
list-style: none;
display: none;
}
.menu ul li a {
display: block;
letter-spacing: 5px;
text-transform: uppercase;
font: 13px "Lato", sans-serif;
color: white;
text-decoration: none;
padding: 15px 5px;
}
.menu ul li a:hover {
background: white;
color: black;
text-decoration: none;
}
https://codepen.io/anon/pen/pKyNEJ
You need to fix its position.
position: fixed;
Need help.
I want to make content input are same as keyin when selected and disable dropdown when edit at textarea.
Currently, content will appear after dropdown. When key-in at textarea and select that list, its not appears same as key-in at top when close. After select that list, when try to key-in, dropdown will open. How to disable it.
$(document).on('click', '.btn-select', function (e) {
e.preventDefault();
var ul = $(this).find("ul");
if ($(this).hasClass("active")) {
if (ul.find("li").is(e.target)) {
var target = $(e.target);
target.addClass("selected").siblings().removeClass("selected");
var value = target.html();
$(this).find(".btn-select-input").val(value);
$(this).find(".btn-select-value").html(value);
}
ul.hide();
$(this).removeClass("active");
}
else {
$('.btn-select').not(this).each(function () {
$(this).removeClass("active").find("ul").hide();
});
ul.slideDown(300);
$(this).addClass("active");
}
});
$('.dropinput').click(function(e) {
e.stopPropagation();
});
.form-control {
background-color: #fff;
background-image: none;
border: 1px solid #e9e9e9;
border-radius: 3px;
box-shadow: none;
color: #4f5858;
display: block;
font-size: 13px;
height: 34px;
line-height: 1.42857;
padding: 6px;
transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
width: 100%;
font-weight: normal;
margin: 0px;
}
.form-control:focus {
border-color: #b6b6b6;
box-shadow: none;
outline: 0 none;
}
.close {
color: #4f5858;
text-shadow: none;
font-weight: normal;
font-size: 26px;
opacity: 1.0;
}
.close:hover, .close:focus {
color: #000;
opacity: 0.5;
}
.form-control::-moz-placeholder {
color: #4f5858;
}
.btn-grey {
background-color: #fff;
border: 1px solid #e9e9e9;
border-radius: 50%;
color: #4f5858;
cursor: pointer;
display: block;
font-weight: 300;
height: 60px;
margin: 0px auto 0;
text-align: center;
text-transform: uppercase;
transition: opacity 0.25s ease-in-out 0s;
width: 60px;
font-size: 11px;
display: inline;
}
.btn-grey:hover {
border: none;
color: #fff;
background-color: #f05423;
}
.btn-select {
position: relative;
padding: 6px;
width: 100%;
border-radius: 3px;
}
.btn-select .btn-select-value {
padding: 2px 6px;
display: block;
position: absolute;
left: 0;
right: 35px;
text-align: left;
text-overflow: ellipsis;
overflow: hidden;
border: none !important;
}
.btn-select .btn-select-arrow {
float: right;
line-height: 18px;
padding: 3px 10px;
top: 0;
font-size: 10px;
}
.btn-select ul {
display: none;
background-color: #fff;
color: #4f5858;
clear: both;
list-style: none;
padding: 0;
margin: 0;
position: absolute;
right: -0.5px;
left: -1px;
top: 33px;
z-index: 999;
}
.btn-select ul li {
padding: 6px;
text-align: left;
background-color: #fff;
display: flex;
}
.btn-select ul li:hover {
background-color: #fff;
color: #f05423;
}
.btn-select ul li span {
color: #b3b3b3;
position: absolute;
left: 10px;
}
.btn-select ul li.selected {
color: #f05423;
}
.btn-select.btn-default:hover, .btn-select.btn-default:active, .btn-select.btn-default.active {
border-color: #b6b6b6;
background-color: #fff;
}
.btn-select.btn-default ul li.selected {
background-color: #fff;
}
.btn-select.btn-default ul, .btn-select.btn-default .btn-select-value {
background-color: transparent;
border: #b6b6b6 1px solid;
border-top: 0px;
}
.btn-default {
color: #4f5858;
background-color: #fff;
border-color: #e9e9e9;
font-size: 13px;
font-weight: normal;
}
.btn.active, .btn:active {
-webkit-box-shadow: none;
box-shadow: inone;
}
.btn-default span {
color: #4f5858;
}
.btn-select.btn-default ul li.selected span {
color: #4f5858;
}
textarea.form-control {
height: 100px;
}
.dropinput {
color: #000;
background-color: #ebebeb;
border: none;
padding: 2px 5px;
margin-left: 10px;
width: 170px;
font-size: 12px;
}
.oth {
width: 300px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="form-group">
<a class="btn btn-default btn-select">
<input class="btn-select-input" type="hidden">
<span class="btn-select-value">Purpose of Enquiry</span>
<span class="btn-select-arrow glyphicon glyphicon-triangle-bottom"></span>
<ul style="display: none;">
<li>Media & Publications</li>
<li>New Business Collaborations<input maxlength="30" class="dropinput" type="text" placeholder="Please specify project location"></li>
<li>Others<input maxlength="58" class="dropinput oth" type="text" placeholder="Please specify"></li>
</ul>
</a>
</div>
tq
There you go:
function init(){
$(document).on('click', '.btn-select', function (e) {
if(document.activeElement==$(this).find('.btn-select-value input')[0]) // prevent opening when textfield is focused
return
e.preventDefault();
var ul = $(this).find("ul");
if ($(this).hasClass("active")) {
if (ul.find("li").is(e.target)) {
selectLine(this,$(e.target))
}
ul.hide();
$(this).removeClass("active");
}
else {
$('.btn-select').not(this).each(function () {
$(this).removeClass("active").find("ul").hide();
});
ul.slideDown(300);
$(this).addClass("active");
}
});
$('.dropinput').blur(function(e) {
if(e.currentTarget.value.length==0) // if nothing has been entered, skip
return
var dropdown = $(e.currentTarget).parent().parent().parent();
var ul = dropdown.children('ul')
selectLine(dropdown[0],$(e.currentTarget).parent())
ul.hide();
dropdown.removeClass("active");
});
$('.dropinput').click(function(e) {
e.stopPropagation();
});
}
function selectLine(dropdown,target){
var input_text = target.find('input').val() // take input value from input in list
target.addClass("selected").siblings().removeClass("selected");
var value = target.html();
$(dropdown).find(".btn-select-input").val(value);
$(dropdown).find(".btn-select-value").html(value);
$(dropdown).find(".btn-select-value input").val(input_text); // put input value into input in selected input
}
$(document).ready(init)
It's quite the spaghetti code, but it works. It's always smart to wrap your code into an init function which will get called once your document is ready.
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 have a vertical navigation bar on my website. When I click on a link in the navigation bar the content is shown in the content div. My problem is that content that is shown in the content div is a form and it is not accepting any input. Help me out
/*right click disable*/
/*$(function() {
$(this).bind("contextmenu", function(e) {
e.preventDefault();
});
});*/
$('.nav1', this).hide();
//drop down -logout
$(document).ready(function() {
$(".account").click(function() {
var X = $(this).attr('id');
if (X == 1) {
$(".submenu").hide();
$(this).attr('id', '0');
} else {
$(".submenu").show();
$(this).attr('id', '1');
}
});
//Mouse click on sub menu
$(".submenu").mouseup(function() {
return false
});
//Mouse click on my account link
$(".account").mouseup(function() {
return false
});
//Document Click
$(document).mouseup(function() {
$(".submenu").hide();
$(".account").attr('id', '');
});
});
/* drop down for sidebar*/
$(document).ready(function() {
$("#kl").click(function() {
$("#kll").toggle();
});
});
/* show div */
$(document).ready(function() {
$('a').click(function() {
var divname = this.name;
$("#" + divname).show().siblings().hide();
});
});
html,
body {
height: 100%;
margin: 0;
padding: 0;
-webkit-user-select: none;
-moz-user-select: -moz-none;
-ms-user-select: none;
user-select: none;
}
.header {
width: 100%;
height: 60px;
}
/*http://jsfiddle.net/EnKwU/4/*/
.nav {
text-align: center;
width: 85%;
padding: 10px;
margin: 12px 50px 40px 100px;
float: left;
}
.nav ul ul {
display: none;
}
.nav ul li:hover > ul {
display: block;
}
.nav ul {
background-color: #fff;
margin-top: 10px;
padding: 0 20px;
list-style: none;
position: relative;
display: inline-block;
zoom: 1;
*display: inline;
margin-right: -80px;
font-family: 'Lato', sans-serif;
text-transform: uppercase;
font-size: 1em;
}
.nav ul li {
float: left;
}
.nav ul li:hover {
border-bottom: 5px solid #339966;
color: #fff;
}
.nav ul li a:hover {
color: #ffffff;
background: #1bbc9b;
}
.nav ul li a {
display: block;
padding: 0.3em 0.8em;
font-family: 'Lato', sans-serif;
font-size: 0.9em;
color: #444;
text-decoration: none;
}
.nav ul ul {
background-color: #fff;
border-radius: 0;
padding: 0;
position: absolute;
top: 100%;
box-shadow: 0 0 9px rgba(0, 0, 0, 0.15);
}
.nav ul ul li {
float: none;
position: relative;
font-family: 'Lato', sans-serif;
text-transform: uppercase;
font-size: 0.85em;
}
.nav ul ul li a {
padding: 0.4em 1.2em;
color: #000;
font-family: 'Lato', sans-serif;
text-transform: uppercase;
font-size: 1em;
}
.nav ul ul:before {
content: "";
display: block;
height: 20px;
position: absolute;
top: -20px;
width: 100%;
}
.nav1 {
position: absolute;
left: 25px;
top: 200px;
bottom: 0;
width: 25%;
float: left;
}
.content {
border: 1px solid black;
position: absolute;
left: 26%;
top: 220px;
bottom: 0;
width: 75%;
float: left;
z-index: -100;
}
/*http://www.9lessons.info/2012/06/simple-drop-down-menu-with-jquery-and.html*/
.dropdown {
color: #555;
margin: 3px -22px 0 0;
width: 143px;
position: relative;
height: 17px;
text-align: left;
float: right;
}
.submenu {
background: #fff;
position: absolute;
top: -12px;
left: -20px;
z-index: 100;
width: 135px;
display: none;
margin-left: 10px;
padding: 40px 0 5px;
border-radius: 6px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
clear: both;
}
.dropdown li a {
color: #555555;
display: block;
font-family: arial;
font-weight: bold;
padding: 6px 15px;
cursor: pointer;
text-decoration: none;
}
.dropdown li a:hover {
background: #155FB0;
color: #FFFFFF;
text-decoration: none;
}
a.account {
font-size: 11px;
line-height: 16px;
color: #555;
position: absolute;
z-index: 110;
display: block;
padding: 11px 0 0 20px;
height: 28px;
width: 121px;
margin: -11px 0 0 -10px;
text-decoration: none;
background: url(icons/arrow.png) 116px 17px no-repeat;
cursor: pointer;
}
.root {
list-style: none;
margin: 0px;
padding: 0px;
font-size: 11px;
padding: 11px 0 0 0px;
border-top: 1px solid #dedede;
}
/* http://codepen.io/daniesy/pen/pfxFi
icons : http://fontawesome.io/
*/
* {
padding: 0;
margin: 0;
font-family: 'Lato', sans-serif;
box-sizing: border-box;
}
.float-right {
float: right;
}
.fa {
font-size: .8em;
line-height: 22px !important;
}
.nav1 {
display: inline-block;
margin: 20px 50px;
}
.nav1 label {
display: block;
width: 250px;
background: #ECF0F1;
padding: 15px 20px;
}
.nav1 ul li {
display: block;
width: 250px;
background: #ECF0F1;
padding: 15px 20px;
}
.nav1 label:hover {
background: #1ABC9C;
color: white;
cursor: pointer;
}
.nav1 ul li:hover {
background: #1ABC9C;
color: white;
cursor: pointer;
}
.nav1 label {
color: #1ABC9C;
border-left: 4px solid #1ABC9C;
border-radius: 0 5px 0 0;
position: relative;
z-index: 2;
}
.nav1 input {
display: none;
}
.nav1 input ~ ul {
position: relative;
visibility: hidden;
opacity: 0;
top: -20px;
z-index: 1;
}
.nav1 input:checked + label {
background: #1ABC9C;
color: white;
}
.nav1 input:checked ~ ul {
visibility: visible;
opacity: 1;
top: 0;
}
.nav1 ul li a {
text-decoration: none;
display: block;
}
.nav1 ul li:nth-child(1) {
border-left: 4px solid #E74C3C;
}
.nav1 ul li:nth-child(1) .fa {
color: #E74C3C;
}
.nav1 ul li:nth-child(1):hover {
background: #E74C3C;
color: white;
font-weight: bold;
}
.nav1 ul li:nth-child(2) {
border-left: 4px solid #0072B5;
}
.nav1 ul li:nth-child(2) .fa {
color: #0072B5;
}
.nav1 ul li:nth-child(2):hover {
background: #0072B5;
color: white;
font-weight: bold;
}
.nav1 ul li:nth-child(3) {
border-left: 4px solid #EC1559;
}
.nav1 ul li:nth-child(3) .fa {
color: #EC1559;
}
.nav1 ul li:nth-child(3):hover {
background: #EC1559;
color: white;
font-weight: bold;
}
#container {
float: right;
border: 1px solid black;
position: relative;
width: 700px;
margin: 30px auto;
font-family: raleway z-index: -100;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!---header and side bar for user name and logout menu -starts here -->
<div class = "nav">
<ul>
<li>Home</li>
<li>Portfolio
<ul>
<li>Active Directory
<li>HelpDesk
<li>CTS
<li>Exchange/Infra
<li>Others
</ul>
</li>
<li>Downloads</li>
<li>Blog</li>
<li>News</li>
<li>Contact US</li>
</ul>
</div>
<!--horizantal navigation bar ends here -->
<!---vetical navigation bar starts here-->
<div class="nav1">
<label for="toggle2" id="kl">Active Directory</label>
<ul class="animate" style="display:none" id="kll">
<li class="animate">Create Domain User</li>
<li class="animate">Domain Password Reset</li>
<li class="animate">Domain Joining</li>
</ul>
</div>
<!---vetical navigation bar ends here-->
<div class="content">
<div id="div1" style="display:none">
<!---->
<div id="AD-FORM">
<h2>AD-FORM</h2>
<form name="adform" action="/" onsubmit="return validateForm()" method="post">
<label>Emp ID :</label>
<input id="id" name="empid" placeholder="" type="text">
<br>
<br>
<label>Full Name :</label>
<input id="name" name="FName" placeholder="Enter your full name" type="text">
<br>
<br>
<label>Designation:</label>
<input id="name" name="desig" placeholder="Enter your Designation" type="text">
<br>
<br>
<label for='DO'>D.O:</label>
<br>
<select name="DO" style="WIDTH: 195px; padding: 2px; margin-top: 2px; border: 2px solid #ccc; padding-left: 2px; font-size: 16px; font-family: raleway">
<option value="">Select a D.O...</option>
<option value="AHMEDABAD">AHMEDABAD</option>
<option value="BANGLORE">BANGLORE</option>
<option value="CHENNAI">CHENNAI</option>
<option value="COIMBATORE">COIMBATORE</option>
<option value="DELHI">DELHI</option>
<option value="ERNAKULAM">ERNAKULAM</option>
<option value="HYDERABAD">HYDERABAD</option>
<option value="KARUR">KARUR</option>
<option value="KOLKATA">KOLKATA</option>
<option value="MADURAI">MADURAI</option>
<option value="MUMBAI">MUMBAI</option>
<option value="SALEM">SALEM</option>
<option value="TAMBARAM">TAMBARAM</option>
<option value="TRICHY">TRICHY</option>
<option value="VIJAYAWADA">VIJAYAWADA</option>
<option value="VISAKHAPATNAM">VISAKHAPATNAM</option>
</select>
<br>
<br>
<label>BranchCode:</label>
<input id="name" name="branch" placeholder="Enter your BranchCode" type="number" min="1000" max="9999">
<br>
<br>
<input name="submit" type="submit" value=" Submit ">
</form>
</div>
</div>
<!---->
<div id="div2" style="display:none">
</div>
<div id="div3" style="display:none">
Another Test
</div>
<div id="div4" style="display:none">
Final Test
</div>
</div>
z-index of content div is wrong
use this styling for content and it will work for you
.content {
border: 1px solid black;
position: absolute;
left: 37%;
top: 220px;
bottom: 0;
width: 75%;
float: left;
z-index: 222222;
height: 100%;
padding: 12px;
}
and if you want that your form div should be beside the
left menu div. than you have to try something else.
fiddleLink;)
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.