Develop Reference

how to overlap contents of iframe tag

I have made this search bar... And i want to use this page on many pages using iframe tag.
But when i use it and when results are shown, it shifts other elements, or a scroll bar is visible ... I want the result to overlaped on the other contents of the site... So that it is visible normally...
here is my code---
function filterFunction() {
let isInputAvail = false;
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter = input.value.toLowerCase();
if (filter.length > 0) {
document.getElementById("myDropdown").classList.add("show");
} else {
document.getElementById("myDropdown").classList.remove("show");
}
div = document.getElementById("myDropdown");
a = div.getElementsByTagName("a");
for (i = 0; i < a.length; i++) {
txtValue = a[i].innerText;
if (txtValue.toLowerCase().indexOf(filter) > -1) {
isInputAvail = true;
a[i].style.display = "block";
} else {
a[i].style.display = "none";
}
}
if (!isInputAvail) {
document.getElementById("noMatches").classList.add('show');
} else {
document.getElementById("noMatches").classList.remove('show');
}
}
.div {
display: none;
}
.dropbtn {
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
border-radius: 25px;
}
#myInput {
box-sizing: border-box;
background-position: 14px 12px;
background-repeat: no-repeat;
font-size: 16px;
padding: 14px 20px 12px 45px;
border: 5px solid #ddd;
border-radius: 25px;
}
#myInput:focus {
outline: 4px solid #f2f2f2;
border-color: #171313;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
max-height: 215px;
display: none;
position: absolute;
background-color: #f6f6f6;
min-width: 230px;
overflow-y: scroll;
border: none;
z-index: 1;
border-radius: 25px;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {
background-color: #ddd;
}
.show {
display: block;
}
<div class="dropdown">
<input type="text" class="dropbtn" placeholder="Search Here..." id="myInput" onInput="filterFunction()">
<div id="myDropdown" class="dropdown-content">
Result 1
Result 2
Result 3
Result 4
Result 5
Result 6
Result 7
Result 8
Result 9
Result 10
Result 11
Result 12
Result 13
Result 14
Result 15
</div>
<div id="noMatches" class="dropdown-content">
No Matches
</div>
</div>

I still don't get was this what you meant.
<style>
.dropbtn{
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
border-radius: 25px;
}
#myInput{
box-sizing: border-box;
background-position: 14px 12px;
background-repeat: no-repeat;
font-size: 16px;
padding: 14px 20px 12px 45px;
border: 5px solid #ddd;
border-radius: 25px;
}
#myInput:focus{
outline: 4px solid #f2f2f2;
border-color: #171313;
}
.dropdown{
position: relative;
display: inline-block;
flex-direction: column;
justify-content: flex-start;
}
.dropdown-content{
max-height: 215px;
display: none;
top: 60px;
left: 0;
position: absolute;
background-color: #f6f6f6;
min-width: 230px;
max-width: 70px;
overflow-y: scroll;
border: none;
z-index: 1;
border-radius: 25px;
}
.dropdown-content a{
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover{background-color: #ddd;}
.show{display: block;}
body{margin: 0;}
.header{
height: 90px;width: 100vw;
display: flex;position: relative;
align-items: center;
justify-content: space-around;
z-index: 10;
}
.dropdown-content::-webkit-scrollbar{
background: transparent;
width: 0;
display: none;
}
.banner{
background-color: #AAA;color: white;
height: 150px;width: 100vw;
top: 90px;left: 0;
display: block;position: absolute;
z-index: 1;
}
</style>
<div class="header">
<div class="dropdown">
<input type="text" class="dropbtn"placeholder="Search Here..." id="myInput" onInput="filterFunction()"/>
<div id="myDropdown" class="dropdown-content">
Result 1 a very long long line one result
Result 2
Result 3
Result 4
Result 5
Result 6
Result 7
Result 8
Result 9
Result 10
Result 11
Result 12
Result 13
Result 14
Result 15
</div>
<div id="noMatches" class="dropdown-content">
No Matches
</div>
</div>
<div>Other</div>
</div>
<div class="banner">Banner Content<div>

Don't get it but is it something like top: 60px;left: 0; in .dropdown-content?

How to display div with position absolute outside of container scrolled?

I'm trying to create a dropdown search. But I found a problem when using a container with a scroll.
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
.container {
width: 500px;
height: 300px;
border: solid gray 1px;
padding: 10px;
display: flex;
overflow: auto;
transform: none;
position: relative;
background: #337ab7 !important;
transition: background-color .3s;
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
height: 60px;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}
#myInput {
box-sizing: border-box;
background-image: url('searchicon.png');
background-position: 14px 12px;
background-repeat: no-repeat;
font-size: 16px;
padding: 14px 20px 12px 45px;
border: none;
border-bottom: 1px solid #ddd;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
top: 60px;
background-color: #f6f6f6;
min-width: 230px;
overflow: auto;
border: 2px solid red;
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd;}
.show {display: block;}
<div class="container">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
<input type="text" placeholder="Search..">
About
Base
Blog
Contact
Custom
Support
Tools
</div>
</div>
As can see the list of dropdown was cut.
How to resolve this?

You have overflow: auto on two elements, so the outer one scrolls first. You just have to be sure that the menu box doesn't render taller than the space available. You can also remove the outer scroll if it's not needed for other purposes.
.container {
/* overflow: auto; */
}
.dropdown-content {
max-height: 245px;
}
Fiddle demo
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
.container {
width: 500px;
height: 300px;
border: solid gray 1px;
padding: 10px;
display: flex;
/* overflow: auto; */
transform: none;
position: relative;
background: #337ab7 !important;
transition: background-color .3s;
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
height: 60px;
}
.dropbtn:hover,
.dropbtn:focus {
background-color: #3e8e41;
}
#myInput {
box-sizing: border-box;
background-image: url('searchicon.png');
background-position: 14px 12px;
background-repeat: no-repeat;
font-size: 16px;
padding: 14px 20px 12px 45px;
border: none;
border-bottom: 1px solid #ddd;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
top: 60px;
background-color: #f6f6f6;
min-width: 230px;
max-height: 245px;
overflow: auto;
border: 2px solid red;
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {
background-color: #ddd;
}
.show {
display: block;
}
<div class="container">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
<input type="text" placeholder="Search..">
About
Base
Blog
Contact
Custom
Support
Tools
</div>
</div>
If you'd rather not implement fixed heights, consider using a flexbox layout instead.

Here is a solution if you wish to maintain the scroll of the .container and still show the dropdown menu entirely.
What I imagine is to put the menu out of the .container and everything inside a wrapper. The good thing is that JavaScript is being used, so it helps.
HTML would be like this:
<div class="wrapper">
<div class="container">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
</div>
<div id="myDropdown" class="dropdown-content">
<input type="text" placeholder="Search..">
About
Base
Blog
Contact
Custom
Support
Tools
</div>
</div>
Than, you change the position of .dropdown-content:
.dropdown-content {
left: 19px; // also top, right and bottom if you need
}
Hope it can be useful too.

How to change color of icons on each custom range steps

I have a custom range I have styled and modified.
For each step there is a text value displayed underneath the range in a green box, and icons at the top of each step.
I would like to know, how can I change the background color of the icons when a step has been selected? I have added some additional javascript code that is not working properly.
For instance, on the first step, the group icon will be green, and when you select the next step the person will be green and the group will change to default grey, and so on and so forth...
Thank you.
var arr = new Array();
arr[1] = "everyone";
arr[2] = "show my group only";
arr[3] = "show only me";
var rangeSlider = function() {
var slider = $(".range-slider"),
range = $(".range-slider__range"),
value = $(".range-slider__value");
slider.each(function() {
value.each(function() {
var value = $(this)
.prev()
.attr("value");
$(this).html(arr[value]);
});
range.on("input", function() {
$(this)
.next(value)
.html(arr[this.value]);
});
// Set active icons
$('.range-icons li').removeClass('active selected');
var icons = $('.range-icons').find('li:nth-child(' + icons + ')');
icons.addClass('active selected');
return style;
});
};
rangeSlider();
*,
*:before,
*:after {
box-sizing: border-box;
}
body {
font-family: sans-serif;
padding: 60px 20px;
}
#media (min-width: 600px) {
body {
padding: 60px;
}
}
.range-slider {
margin: 0;
}
.range-slider {
width: 24%;
}
.range-slider__range {
-webkit-appearance: none;
/*width: calc(100% - (73px));*/
width: 100%;
height: 6px;
border-radius: 5px;
background: #d7dcdf;
outline: none;
padding: 0;
margin: 0;
}
.range-slider__range::-webkit-slider-thumb {
appearance: none;
width: 18px;
height: 18px;
border-radius: 50%;
background: #2c3e50;
cursor: pointer;
transition: background .15s ease-in-out;
}
.range-slider__range::-webkit-slider-thumb:hover {
background: #1abc9c;
}
.range-slider__range:active::-webkit-slider-thumb {
background: #1abc9c;
}
.range-slider__range::-moz-range-thumb {
width: 18px;
height: 18px;
border: 0;
border-radius: 50%;
background: #2c3e50;
cursor: grab;
transition: background .15s ease-in-out;
}
.range-slider__range:active::-moz-range-thumb {
cursor: grabbing;
background: #1abc9c;
}
.range-slider__range::-moz-range-thumb:hover {
background: #1abc9c;
}
.range-slider__value {
display: block;
position: relative;
color: #fff;
font-size: 12px;
margin-top: 10px;
line-height: 20px;
text-align: center;
background: green;
padding: 0;
}
/*.range-slider__value:after {
position: absolute;
top: 8px;
left: -7px;
width: 0;
height: 0;
border-top: 7px solid transparent;
border-right: 7px solid #2c3e50;
border-bottom: 7px solid transparent;
content: '';
}*/
::-moz-range-track {
background: #d7dcdf;
border: 0;
}
input::-moz-focus-inner,
input::-moz-focus-outer {
border: 0;
}
/*.range-labels {
margin: 9px -21px 0;
padding: 0;
list-style: none;
}
.range-labels li {
position: relative;
float: left;
width: 60px;
text-align: center;
color: #b2b2b2;
font-size: 14px;
cursor: pointer;
}
.range-labels .active {
color: #37adbf;
}
.range-labels .selected::before {
background: #37adbf;
}
.range-labels .active.selected::before {
display: none;
}*/
/*icons*/
.range-icons {
margin: 9px -20px 0;
padding: 0;
list-style: none;
}
.range-icons li {
position: relative;
float: left;
width: 33%;
text-align: center;
color: #b2b2b2;
font-size: 10px;
}
.range-icons .active {
color: #37adbf;
}
.range-icons .selected::before {
background: #37adbf;
}
.range-icons .active.selected::before {
display: none;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="range-slider">
<ul class="range-icons clearfix">
<li class="active selected"><i class="material-icons">group</i></li>
<li><i class="material-icons">person</i></li>
<li><i class="material-icons">lock</i></li>
</ul>
<input class="range-slider__range" type="range" value="1" min="1" max="3" step="1">
<span class="range-slider__value">0</span>
</div>

you can create classes and add the apropriate class with addClass whenever the the range input changes in range.on("input", with
$('.material-icons:nth('+ ( this.value - 1) +')').addClass('class-'+(this.value))
since your this.value starts from 1 :
var arr = new Array();
arr[1] = "everyone";
arr[2] = "show my group only";
arr[3] = "show only me";
var rangeSlider = function() {
var slider = $(".range-slider"),
range = $(".range-slider__range"),
value = $(".range-slider__value");
slider.each(function() {
value.each(function() {
var value = $(this)
.prev()
.attr("value");
$(this).html(arr[value]);
});
range.on("input", function() {
$(this)
.next(value)
.html(arr[this.value]);
$('.material-icons').attr('class', 'material-icons')
$('.material-icons:nth('+ ( this.value - 1) +')').addClass('material-icons class-'+(this.value))
});
});
};
rangeSlider();
*, *:before, *:after {
box-sizing: border-box;
}
body {
font-family: sans-serif;
padding: 60px 20px;
}
#media (min-width: 600px) {
body {
padding: 60px;
}
}
.range-slider {
margin: 0;
}
.range-slider {
width: 24%;
}
.range-slider__range {
-webkit-appearance: none;
/*width: calc(100% - (73px));*/
width: 100%;
height: 6px;
border-radius: 5px;
background: #d7dcdf;
outline: none;
padding: 0;
margin: 0;
}
.range-slider__range::-webkit-slider-thumb {
appearance: none;
width: 18px;
height: 18px;
border-radius: 50%;
background: #2c3e50;
cursor: pointer;
transition: background .15s ease-in-out;
}
.range-slider__range::-webkit-slider-thumb:hover {
background: #1abc9c;
}
.range-slider__range:active::-webkit-slider-thumb {
background: #1abc9c;
}
.range-slider__range::-moz-range-thumb {
width: 18px;
height: 18px;
border: 0;
border-radius: 50%;
background: #2c3e50;
cursor: grab;
transition: background .15s ease-in-out;
}
.range-slider__range:active::-moz-range-thumb {
cursor: grabbing;
background: #1abc9c;
}
.range-slider__range::-moz-range-thumb:hover {
background: #1abc9c;
}
.range-slider__value {
display: block;
position: relative;
color: #fff;
font-size: 12px;
margin-top: 10px;
line-height: 20px;
text-align: center;
background: green;
padding: 0;
}
/*.range-slider__value:after {
position: absolute;
top: 8px;
left: -7px;
width: 0;
height: 0;
border-top: 7px solid transparent;
border-right: 7px solid #2c3e50;
border-bottom: 7px solid transparent;
content: '';
}*/
::-moz-range-track {
background: #d7dcdf;
border: 0;
}
input::-moz-focus-inner,
input::-moz-focus-outer {
border: 0;
}
/*.range-labels {
margin: 9px -21px 0;
padding: 0;
list-style: none;
}
.range-labels li {
position: relative;
float: left;
width: 60px;
text-align: center;
color: #b2b2b2;
font-size: 14px;
cursor: pointer;
}
.range-labels .active {
color: #37adbf;
}
.range-labels .selected::before {
background: #37adbf;
}
.range-labels .active.selected::before {
display: none;
}*/
/*icons*/
.range-icons {
margin: 9px -20px 0;
padding: 0;
list-style: none;
}
.range-icons li {
position: relative;
float: left;
width: 33%;
text-align: center;
color: #b2b2b2;
font-size: 10px;
}
/* classes with colors you want */
.class-1{
color: red;
}
.class-2{
color: blue;
}
.class-3{
color: orange;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="range-slider">
<ul class="range-icons clearfix">
<li class="active selected"><i class="material-icons class-1">group</i></li>
<li><i class="material-icons">person</i></li>
<li><i class="material-icons">lock</i></li>
</ul>
<input class="range-slider__range" type="range" value="1" min="1" max="3" step="1">
<span class="range-slider__value">0</span>
</div>

One methos I use is using svg icons and implement the raw code. You can then manipulate this source with clases and style settings.
Look inside the svg source and finmd the path and rect tags.
document.getElementById("ranger").onchange = function(event) {
document.querySelector(".symbol.standard").style.fill = "rgb(" + event.target.value + ", 80, 160)";
}
svg {
width:200px;
.symbol.standard {
fill: #f00;
}
.symbol.other {
fill: rgb(80, 80, 160);
}
<input id="ranger" type='range' min="0" max="255">
<svg class="singleseat " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90.3 63.3"> <title>seat</title>
<rect class="symbol standard" x="16.7" width="57" height="49" rx="12" ry="12"></rect>
<path class="symbol other" d="M79.9,15.8V42.3a12,12,0,0,1-12,12H22.5a12,12,0,0,1-12-12V15.8H0V51.3a12,12,0,0,0,12,12H78.3a12,12,0,0,0,12-12V15.8Z"></path>
</svg>

How to make value - same after key in and selected

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.

How do I get a div to move with window resize without pushing other divs out of the way?

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.