Develop Reference

indeterminate css style for a checkbox styled with label

I am using this style to change the appearence of a checkbox:
th .checkbox label::before,th .checkbox label::before {
content: "";
display: inline-block;
position: absolute;
width: 17px;
height: 17px;
left: -20px;
border: 1px solid #cccccc;
border-radius: 3px;
background-color: #fff;
-webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
-o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
}
th .checkbox label::after {
display: inline-block;
position: absolute;
width: 16px;
height: 16px;
left: -21px;
top: 0;
padding-left: 3px;
padding-top: 1px;
font-size: 11px;
color: #555555;
}
this works perfectly for before and after but the interdeterminate style in chrome do not have the correct position. So i tried it with:
th .checkbox label::indeterminate {
display: inline-block;
position: absolute;
width: 16px;
height: 16px;
left: -20px;
top: 0;
padding-left: 3px;
padding-top: 1px;
font-size: 11px;
color: #555555;
}
but it does not work :(. how could I fix this and give the indeterminate at least a left: -21px; style.
thank you in advance!

indeterminate is a pseudo class so it starts with : while before and after are pseudo elements and start with ::
th .checkbox label:indeterminate {
display: inline-block;
position: absolute;
width: 16px;
height: 16px;
left: -20px;
top: 0;
padding-left: 3px;
padding-top: 1px;
font-size: 11px;
color: #555555;
}
Please refer to https://developer.mozilla.org/en-US/docs/Web/CSS/:indeterminate
and https://developer.mozilla.org/en-US/docs/Web/CSS/::before

jQuery - .css() not working?

Exclaimer, this is mostly snippet code, cause I didn't know how else to explain this. Please don't hate :3
The jQuery code is supposed to set the "max-height" property for "#dd.show". So can someone tell me why this doesn't work:
$("#btn").on("click", function() {
$("#dd").toggleClass("show");
});
var dv = document.getElementById("dd");
var item = dv.getElementsByTagName("A");
$("#dd.show").css("max-height", item[0].offsetHeight * item.length + "px");
body {
margin: 10px;
}
#btn {
background-color: red;
color: black;
border: none;
outline: none;
width: 100px;
height: 100px;
font-size: 20px;
-webkit-transition: all .4s ease;
transition: all .4s ease;
}
#btn:hover {
background-color: black;
color: white;
border-radius: 52.5px;
}
#dd {
opacity: 0;
max-height: 0;
width: 200px;
position: relative;
overflow: hidden;
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
#dd.show {
opacity: 1;
}
#dd.show:hover {
border-radius: 15px;
}
#dd a {
background-color: red;
color: black;
padding: 16px 16px;
text-align: center;
text-decoration: none;
display: block;
font-size: 20px;
-webkit-transition: all .4s ease;
transition: all .4s ease;
}
#dd a:hover {
background-color: black;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">press me</button>
<div id="dd">
press me 1
press me 2
press me 3
press me 4
</div>
This is how it's supposed to look like. The only thing i changed was removing the .css JQuery and added "max-height" manually:
$("#btn").on("click", function() {
$("#dd").toggleClass("show");
});
body {
margin: 10px;
}
#btn {
background-color: red;
color: black;
border: none;
outline: none;
width: 100px;
height: 100px;
font-size: 20px;
-webkit-transition: all .4s ease;
transition: all .4s ease;
}
#btn:hover {
background-color: black;
color: white;
border-radius: 52.5px;
}
#dd {
opacity: 0;
max-height: 0;
width: 200px;
position: relative;
overflow: hidden;
top: 10px;
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
#dd.show {
opacity: 1;
max-height: 225px;
}
#dd.show:hover {
border-radius: 37.5px;
}
#dd a {
background-color: red;
color: black;
padding: 16px 16px;
text-align: center;
text-decoration: none;
display: block;
font-size: 20px;
-webkit-transition: all .4s ease;
transition: all .4s ease;
}
#dd a:hover {
background-color: black;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">press me</button>
<div id="dd">
press me 1
press me 2
press me 3
press me 4
</div>

jQuery works fine, you problem lies here: $("#dd.show"). At the point where you execute that code the selector #dd.show won't find anything as there exists no element like that. (You only add the show class on button click)
You will have to add that css when pressing the button. Also note that $.css adds in-line css. (like <div style="max-height:100px;"></div>)

at the time that this line executes:
$("#dd.show").css("max-height", item[0].offsetHeight * item.length + "px")
you don't know for a fact that the div with id dd also has the show class. Since the show class is dynamically toggled, I'm guessing that this element
<div id="dd">...</div>
doesn't have the show class when your jquery code is running. That means that $("#dd.show") isn't returning anything which explains why your css method isn't working.
This is precisely the kind of thing that you should use plain css for if possible. If you can get the behavior you want by simply specifying
#dd.show {
max-height: 225px;
}
then I'd just do that.
If you want to test this to see if I'm right, then add the following line right before you try to set the max-height property with jQuery.
console.log($("#dd").hasClass('show'));

I found a solution to the sliding problem. I added an IF statement to check if the "show" class is active. If it is then toggle it and set "max-height" to 0px. If no, then toggle it and set "max-height" to the other long value :) Thanks for all the help guys. You helped me towards the finishline :3
Here is the final code for people that might come in later to see the solution :3
$("#btn").on("click", function() {
if(!$("#dd").hasClass("show")) {
$("#dd").toggleClass("show");
$("#dd.show").css("max-height", document.getElementById("dd").getElementsByTagName("A")[0].offsetHeight * document.getElementById("dd").getElementsByTagName("A").length + "px");
} else {
$("#dd").toggleClass("show");
$("#dd").css("max-height", "0px");
}
});
body {
margin: 10px;
}
#btn {
background-color: red;
color: black;
border: none;
outline: none;
width: 100px;
height: 100px;
font-size: 20px;
-webkit-transition: all .4s ease;
transition: all .4s ease;
}
#btn:hover {
background-color: black;
color: white;
border-radius: 52.5px;
}
#dd {
opacity: 0;
max-height: 0;
width: 200px;
position: relative;
overflow: hidden;
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
#dd.show {
opacity: 1;
}
#dd.show:hover {
border-radius: 15px;
}
#dd a {
background-color: red;
color: black;
padding: 16px 16px;
text-align: center;
text-decoration: none;
display: block;
font-size: 20px;
-webkit-transition: all .4s ease;
transition: all .4s ease;
}
#dd a:hover {
background-color: black;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">press me</button>
<div id="dd">
press me 1
press me 2
press me 3
press me 4
</div>

My Pop Up Window isn't displaying right

I'm redesigning a website for fun. I have a pop up window that opens up after you click a button. However, the window and button shows up in a weird layout. The button is displayed to the far left and the text is all over the screen. You can actually see the entire code on codepen: http://codepen.io/sibraza/pen/wWgqBO
Here is the HTML:
<!--- This is what the user see when they click the button -->
<span class="msg"><button class="btn btn-danger"data-js="open">Subscribe to our Newsletter</button></span>
</section>
<!-- this is what the user sees when the popup is displayed -->
<div class="popup">
<h2>Subscribe to the Newletter:</h2>
<button name="close">Close Pop-up</button>
</div>
Here is the CSS:
button {
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
background: lightcoral;
border: 0;
border-radius: 4px;
padding: 7px 15px;
font-size: 16px;
color: #FFFFFF;
cursor: pointer;
}
button:focus {
outline: none;
}
button:hover {
background: #f39797;
}
.popup {
background: rgba(255, 255, 255, 0.8);
position: fixed;
display: none;
z-index: 5000;
height: 100%;
width: 100%;
left: 0;
top: 0;
}
.popup > div {
border-radius: 4px;
position: fixed;
background: #FFFFFF;
box-shadow: 0px 0px 12px #666666;
padding: 30px 15px;
/* Width of popup can be changed */
width: 80%;
max-width: 600px;
z-index: 5001;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
text-align: center;
}
Here is the JavaScript:
function popupOpenClose(popup) {
/* Add div inside popup for layout if one doesn't exist */
if ($(".wrapper").length == 0){
$(popup).wrapInner("<div class='wrapper'></div>");
}
/* Open popup */
$(popup).show();
/* Close popup if user clicks on background */
$(popup).click(function(e) {
if ( e.target == this ) {
if ($(popup).is(':visible')) {
$(popup).hide();
}
}
});
/* Close popup and remove errors if user clicks on cancel or close buttons */
$(popup).find("button[name=close]").on("click", function() {
if ($(".formElementError").is(':visible')) {
$(".formElementError").remove();
}
$(popup).hide();
});
}
$(document).ready(function () {
$("[data-js=open]").on("click", function() {
popupOpenClose($(".popup"));
});
});

Try this code, I have added a simple form. You can just change the css of the popup or the form as you need.
function toggleOn(){
$('body, #menu, #navbar, #content').toggleClass('on');
}
$(document).ready(function (){
$('#menu').click(function(){ toggleOn(); });
$('#content').click(function(){
if ($('#navbar').hasClass('on')) toggleOn();
});
});
//this is for the pop up
function popupOpenClose(popup) {
/* Add div inside popup for layout if one doesn't exist */
if ($(".wrapper").length == 0){
$(popup).wrapInner("<div class='wrapper'></div>");
}
/* Open popup */
$(popup).show();
/* Close popup if user clicks on background */
$(popup).click(function(e) {
if ( e.target == this ) {
if ($(popup).is(':visible')) {
$(popup).hide();
}
}
});
/* Close popup and remove errors if user clicks on cancel or close buttons */
$(popup).find("button[name=close]").on("click", function() {
if ($(".formElementError").is(':visible')) {
$(".formElementError").remove();
}
$(popup).hide();
});
}
$(document).ready(function () {
$("[data-js=open]").on("click", function() {
popupOpenClose($(".popup"));
});
});
//search bar
$(document).on('ready', function(){
var $wrap = $('[js-ui-search]');
var $close = $('[js-ui-close]');
var $input = $('[js-ui-text]');
$close.on('click', function(){
$wrap.toggleClass('open');
});
$input.on('transitionend webkitTransitionEnd oTransitionEnd', function(){
console.log('triggered end animation');
if ($wrap.hasClass('open')) {
$input.focus();
} else {
return;
}
});
});
// pop up window
body {
color: white;
font-family: 'Lato', sans-serif;
font-weight: 400;
font-size: inherit;
background: #000000;
perspective: 600px;
}
body h1, body h2 {
position: absolute;
left: 50%;
transform: translateX(-50%);
color: white;
font-family: 'Lato', sans-serif;
text-transform: uppercase;
letter-spacing: 2px;
}
body h1 {
top: 24px;
font-size: 12px;
color: #cc0000;
margin-top: 200px;
}
body h2 {
font-size: 10px;
opacity: 0.7;
color: #cc0000;
z-index: 1;
}
body .msg {
position: absolute;
display: inline-block;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
border-radius: 3px;
padding: 10px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
}
body.on {
overflow: hidden;
}
#menu {
z-index: 100;
position: fixed;
width: 40px;
height: 40px;
top: 50px;
right: 50px;
background: none;
border: none;
border-radius: 5px;
outline: none;
cursor: pointer;
transition: all 0.2s ease-in-out;
transform: rotate(-90deg);
}
#menu:hover {
background: #cc0000;
transition: all 0.2s ease-in-out;
}
#menu #line {
position: absolute;
width: 22px;
height: 2px;
left: 9px;
top: 19px;
background: white;
}
#menu #arrow {
position: absolute;
width: 6px;
height: 6px;
top: 16px;
right: 9px;
border-top: 2px solid white;
border-right: 2px solid white;
transform: rotate(45deg);
}
#menu.on {
transition: all 0.2s ease-in-out;
transform: rotate(90deg);
}
#menu.on:hover {
background: #404040;
transition: all 0.2s ease-in-out;
}
section {
position: relative;
width: 100%;
height: 450px;
padding: 1.5px 2.5px;
background: black;
transition: all 0.3s ease-in-out;
}
section.msg {
position: absolute;
opacity: 0.8;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
section.on {
box-shadow: 0 5px 20px #333333;
border-radius: 6px;
cursor: zoom-out;
transition: all 0.3s ease-in-out;
transform-origin: 50% 0;
transform: scale(0.8) translateY(100vh);
}
#navbar {
margin-top: 60px;
z-index: 90;
position: fixed;
width: 90vw;
height: 70vh;
top: 0;
left: 50%;
opacity: 0;
overflow: hidden;
transition: all 0.3s ease-in-out;
transform-origin: 50% 0;
transform: translateX(-50%) scale(0);
}
#navbar .msg {
background: #404040;
}
#navbar.on {
top: 5vh;
opacity: 1;
transition: all 0.3s ease-in-out;
transform: translateX(-50%) scale(1);
}
/* BASE
================================================================= */
html {
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
-moz-osx-font-smoothing: grayscale;
}
body {
font-family: 'Lato', sans-serif;
font-size: 18px;
line-height: 2.35;
color: #cc0000;
margin: 0;
}
p {
padding-top: 3em;
max-width: 700px;
margin: 0 auto;
}
/* DYNAMIC NAVIGATION BAR
================================================================= */
nav {
position: fixed;
width: 100%;
top: 0;
background: black;
-webkit-transition: all 650ms cubic-bezier(0.22, 1, 0.25, 1);
transition: all 650ms cubic-bezier(0.22, 1, 0.25, 1);
z-index: 1;
height: 80px;
}
nav:before {
content: "";
display: block;
position: absolute;
background: rgba(0, 0, 0, 0.27);
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
nav ul {
position: relative;
margin: 0;
z-index: 2;
text-transform: uppercase;
text-align: center;
}
nav ul li {
display: inline-block;
padding: 1.35em 0;
margin-right: 3em;
font-size: 0.9em;
}
nav ul li a {
text-decoration: none;
color: #cc0000;
font-size: 0.9em;
}
nav ul li a:hover{
color: white;
}
.edit{
margin-top: 150px;
}
.direct{
margin-top: 250px;
color: white;
}
button {
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
background: lightcoral;
border: 0;
border-radius: 4px;
padding: 7px 15px;
font-size: 16px;
color: #FFFFFF;
cursor: pointer;
}
button:focus {
outline: none;
}
button:hover {
background: #f39797;
}
.popup {
background: rgba(255, 255, 255, 0.8);
position: fixed;
display: none;
z-index: 5000;
height: 100%;
width: 100%;
left: 0;
top: 0;
}
.popup > div {
border-radius: 4px;
position: fixed;
background: #FFFFFF;
box-shadow: 0px 0px 12px #666666;
padding: 30px 15px;
/* Width of popup can be changed */
width: 80%;
max-width: 600px;
z-index: 5001;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
text-align: center;
}
.logo{
float: left;
}
.logos{
margin-top: -9px;
width: 150px;
height: 100%;
}
section.content{
margin-top: 400px;
}
.stuff{
margin-top: 100px;
height: 350px;
width: 100%;
object-fit: cover;
opacity: .4;
}
.products{
margin-left: 560px;
margin-top: 360px;
}
.footy{
color: white;
background: black;
height:140px;
width: 100%;
}
.about_info{
width: 80%;
float: left;
font-size: 14px;
margin-left: 30px;
}
.about_us{
margin-left: 30px;
}
.reach_out{
float: left;
margin-top: -90px;
margin-left: 10px;
}
.account{
margin-left:
}
.follow{
float: right;
margin-right: 30px;
display: inline-block;
}
.product_line{
height: 250px;
width: 100%;
background: white;
}
.protein{
margin-bottom: 25px;
padding-bottom: 20px;
}
.social{
float: right;
margin-top: 30px;
}
form{
width:100%;
text-align:center;
}
input[type="text"] {
-webkit-appearance: none;
outline: none;
border: none;
}
.search-wrap {
position: relative;
display: block;
z-index: 1;
width: 40px;
height: 40px;
margin-left: 0;
padding: 0;
border: 2px solid white;
border-radius: 20px;
-moz-transition: all 0.25s ease 0.3s;
-o-transition: all 0.25s ease 0.3s;
-webkit-transition: all 0.25s ease;
-webkit-transition-delay: 0.3s;
transition: all 0.25s ease 0.3s;
}
.search-wrap:before {
top: 90%;
left: 90%;
width: 16px;
height: 2px;
background-color: white;
border-radius: 1px;
-moz-transition: width 0.15s ease 0.55s;
-o-transition: width 0.15s ease 0.55s;
-webkit-transition: width 0.15s ease;
-webkit-transition-delay: 0.55s;
transition: width 0.15s ease 0.55s;
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-moz-transform-origin: top left;
-ms-transform-origin: top left;
-webkit-transform-origin: top left;
transform-origin: top left;
}
.search-wrap input {
width: 100%;
height: 100%;
padding: 0 30px 0 15px;
font-size: 14px;
line-height: 38px;
opacity: 0;
background-color: transparent;
-moz-transition: opacity 0.15s ease;
-o-transition: opacity 0.15s ease;
-webkit-transition: opacity 0.15s ease;
transition: opacity 0.15s ease;
}
.eks {
display: block;
position: absolute;
top: 50%;
right: 0;
z-index: 20;
width: 30px;
height: 30px;
cursor: pointer;
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.eks:before, .eks:after {
right: 5px;
height: 2px;
width: 2px;
border-radius: 1px;
-moz-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.eks:before {
top: 0px;
background-color: white;
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-moz-transform-origin: top right;
-ms-transform-origin: top right;
-webkit-transform-origin: top right;
transform-origin: top right;
-moz-transition-delay: 0.1s;
-o-transition-delay: 0.1s;
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.eks:after {
bottom: 0px;
background-color: white;
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-moz-transform-origin: bottom right;
-ms-transform-origin: bottom right;
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.search-wrap.open {
width: 160px;
-moz-transition-delay: 0.1s;
-o-transition-delay: 0.1s;
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.search-wrap.open:before {
width: 0px;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.search-wrap.open input {
opacity: 1;
-moz-transition-delay: 0.15s;
-o-transition-delay: 0.15s;
-webkit-transition-delay: 0.15s;
transition-delay: 0.15s;
}
.search-wrap.open .eks:before, .search-wrap.open .eks:after {
width: 15px;
right: 12px;
}
.search-wrap.open .eks:before {
top: 9px;
-moz-transition-delay: 0.25s;
-o-transition-delay: 0.25s;
-webkit-transition-delay: 0.25s;
transition-delay: 0.25s;
}
.search-wrap.open .eks:after {
bottom: 9px;
-moz-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.search-wrap:before, .eks:before, .eks:after {
content: "";
position: absolute;
display: block;
}
a{
color: white;
}
a:hover{
color: red;
}
.reach_out{
list-style-type: none;
}
.links{
margin-top: 30px;
margin-right: 30px;
list-style-type: none;
}
.icon-button {
background-color: white;
border-radius: 2.6rem;
cursor: pointer;
display: inline-block;
font-size: 1.3rem;
height: 2.6rem;
line-height: 2.6rem;
margin: 0 5px;
position: relative;
text-align: center;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
width: 2.6rem;
}
/* Circle */
.icon-button span {
border-radius: 0;
display: block;
height: 0;
left: 50%;
margin: 0;
position: absolute;
top: 50%;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
width: 0;
}
.icon-button:hover span {
width: 2.6rem;
height: 2.6rem;
border-radius: 2.6rem;
margin: -1.3rem;
}
/* Icons */
.icon-button i {
background: none;
color: white;
height: 2.6rem;
left: 0;
line-height: 2.6rem;
position: absolute;
top: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
width: 2.6rem;
z-index: 10;
}
.twitter span {
background-color: #4099ff;
}
.facebook span {
background-color: #3B5998;
}
.google-plus span {
background-color: #db5a3c;
}
.tumblr span {
background-color: #34526f;
}
.instagram span {
background-color: #517fa4;
}
.youtube span {
background-color: #bb0000;
}
.pinterest span {
background-color: #cb2027;
}
.icon-button .fa-twitter {
color: #4099ff;
}
.icon-button .fa-facebook {
color: #3B5998;
}
.icon-button .fa-tumblr {
color: #34526f;
}
.icon-button .fa-instagram {
color: #517fa4;
}
.icon-button .fa-youtube {
color: #bb0000;
}
.icon-button .fa-pinterest {
color: #cb2027;
}
.icon-button:hover .fa-twitter,
.icon-button:hover .fa-facebook,
.icon-button:hover .icon-google-plus,
.icon-button:hover .fa-tumblr,
.icon-button:hover .fa-instagram,
.icon-button:hover .fa-youtube,
.icon-button:hover .fa-pinterest {
color: white;
}
#media all and (max-width: 680px) {
.icon-button {
border-radius: 1.6rem;
font-size: 0.8rem;
height: 1.6rem;
line-height: 1.6rem;
width: 1.6rem;
}
.icon-button:hover span {
width: 1.6rem;
height: 1.6rem;
border-radius: 1.6rem;
margin: -0.8rem;
}
/* Icons */
.icon-button i {
height: 1.6rem;
line-height: 1.6rem;
width: 1.6rem;
}
body {
padding: 10px;
}
.pinterest {
display: none;
}
}
.wrapper {
max-width: 60rem;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 3rem;
}
.box {
width: 15rem;
height: 20rem;
padding: 0 2rem 3rem;
transition:
transform 0.3s linear 0s,
filter 0.5s linear 0.3s,
opacity 0.5s linear 0.3s;
/*transform-origin: top center;*/
}
.production {
position: relative;
width: 100%;
height: 100%;
border-radius: 0.2rem;
background-image: url(https://www.lamnia.com/images/sg-150-Shirts_and_T-Shirts.jpg);
background-color: #fff;
background-position: top 3rem center;
background-size: 80%;
background-repeat: no-repeat;
box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.1);
transition:
box-shadow 0.5s linear,
height 0.1s linear 0s;
}
.name {
display: block;
padding: 1rem 0.5rem;
}
.description {
position: absolute;
bottom: 1rem;
left: 0;
right: 0;
display: block;
padding: 0 1.5rem;
opacity: 0;
transition: opacity 0.1s linear 0s;
}
.wrapper:hover .box:not(:hover) {
filter: blur(3px);
opacity: 0.5;
}
.box:hover {
transform: scale(1.1);
transition:
transform 0.3s linear 0.3s,
filter 0.1s linear 0s,
opacity 0.1s linear 0s;
}
.box:hover .production {
height: 23rem;
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2);
transition:
box-shadow 1s linear,
height 0.3s linear 0.5s;
}
.box:hover .description {
opacity: 1;
transition: opacity 0.3s linear 0.75s;
}
form{
background: white;
text-align: center;
overflow: scroll;
padding: 0;
margin: 0;
max-height: 400px
}
/* This is for pop window */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<head>
<link rel="stylesheet" href=" https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
</head>
<button id="menu"><span id="line"></span><span id="arrow"></span></button>
<nav id="nav">
<ul>
<li class="logo"><img class="logos" src="http://res.cloudinary.com/dvrqqa6ja/image/upload/v1466803605/logo_jayvyh.png"></img></li>
<li>Home </li>
<li>Shop </li>
<li>About Us</li>
<li><div class="search-wrap" js-ui-search>
<input type="text" placeholder="Search..." / js-ui-text>
<span class="eks" js-ui-close></span>
</div> </li>
</ul>
</nav>
<aside id="navbar"><span class="msg"><iframe width="560" height="315" src="https://www.youtube.com/embed/fAE8NyE3RkA" frameborder="0" allowfullscreen></iframe></span>
</aside>
<section id="content">
<img src="http://res.cloudinary.com/dvrqqa6ja/image/upload/v1466885774/kai_di6moq.jpg"class="stuff"> </img>
<h1 class="direct"> <strong>Click the arrow to view Kai Greene's Scar Story</strong></h1>
<span class="msg"><button class="btn btn-danger"data-js="open">Subscribe to our Newsletter</button></span>
</section>
<div class="popup">
<h2>Subscribe to the Newletter:</h2><br>
<form action="#">
First name:<br>
<input type="text" name="firstname" placeholder="firstname"><br>
Last name:<br>
<input type="text" name="lastname" placeholder="lastname"><br><br>
<input type="submit" value="Submit">
</form
<center><button name="close">Close Pop-up</button></center>
</div>
<div class="product_line">
<div class="row">
<div class="col-xs-12">
<span class="products text-center">View other products</span>
</div>
</div>
<div class="row">
<div class="wrapper">
<div class="box">
<div class="production">
<span class="name"></span>
<span class="description"></span>
</div>
</div>
<div class="box">
<div class="production">
<span class="name"></span>
<span class="description"></span>
</div>
</div>
<div class="box">
<div class="production">
<span class="name"></span>
<span class="description"></span>
</div>
</div>
</div>
</div>
</div>
<footer class="footy">
<div class="container-fluid">
<hr>
<div class="row">
<div class="col-xs-4">
<h4 class="about_us">About Us </h4>
</div>
<div class="col-xs-4">
<h4 class="account text-center"> My Account </h4>
</div>
<div class="col-xs-4">
<h4 class="follow"> Follow Us </h4>
</div>
<div class="row">
<div class="col-xs-4">
<p class="about_info"> Dynamik Muscle was spawned on the creation of an idea to see a dream manifest into reality. We all sit back and dream, some even make goals and outline a plan of action, but few follow through.click to read more</p>
</div>
<div class="col-xs-4">
<ul class="links text-center">
<li> Search </li>
<li> About Us </li>
<li>Privacy Policy </li>
<li> Refund Policy </li>
<li> Shipping and Delivery </li>
<li> Ambassador Program </li>
<li> Retailers/Distributors </li>
</ul>
</div>
<div class="col-xs-4">
<ul class="social">
<i class="fa fa-twitter"></i><span></span>
<i class="fa fa-facebook"></i><span></span>
<i class="fa fa-youtube"></i><span></span>
<i class="fa fa-pinterest"></i><span></span>
</ul>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<ul class="reach_out">
<li><i class="fa fa-home" aria-hidden="true"></i> 1120 Holland Drive #20 </li>
<li><i class="fa fa-phone" aria-hidden="true"></i> Call Us at (561) 510-6765</li>
<li><i class="fa fa-envelope" aria-hidden="true"></i> cs#dynamikmuscle.com </li>
</ul>
</div>
</div>
</div>
</footer>
Here is the link to fiddle

You will need to format your
<div class="popup">
<h2>Subscribe to the Newletter:</h2><br>
<center><button name="close">Close Pop-up</button></center>
</div>
But you did not mention how do you want your popup to be displayed, i.e, center ? or anything other information. This works for me and looks good enough.

Space between Divs showing in Opera & Chrome browsers

There is space between the .navigation & .navpromo when viewed in opera or chrome browsers. I have tried several tips including making sure there are no spaces in the markup but I can't seem to figure out the solution to make this cross compatible
http://jsfiddle.net/b7kn5bcL/#&togetherjs=Dk6IRzq6Sf
HTML:
<div class="header">
<div class="navbar">
<a href="" class="in" style="display: inline-block;">
<svg class="navinstagram" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 155.2 144" style="enable-background:new 0 0 155.2 144;" xml:space="preserve">
<path d="M42.7,122.7H21.3V54h21.4V122.7z M32,44.6c-6.8,0-12.4-5.6-12.4-12.4c0-6.8,5.5-12.4,12.4-12.4
c6.8,0,12.4,5.5,12.4,12.4C44.4,39,38.9,44.6,32,44.6z M122.7,122.7h-21.3V89.3c0-8-0.1-18.2-11.1-18.2c-11.1,0-12.8,8.7-12.8,17.6
v34H56.1V54h20.5v9.4h0.3c2.8-5.4,9.8-11.1,20.2-11.1c21.6,0,25.6,14.2,25.6,32.7V122.7z"/>
<g>
<path style="fill:#FFFFFF;" d="M151.9,120c0.7-0.1,1-0.5,1-1.1c0-0.8-0.5-1.1-1.4-1.1H150v4h0.6V120h0.7l0,0l1.1,1.7h0.6L151.9,120
L151.9,120z M151.3,119.6h-0.7v-1.4h0.9c0.4,0,0.9,0.1,0.9,0.6C152.4,119.5,151.9,119.6,151.3,119.6z"/>
<path style="fill:#FFFFFF;" d="M151.3,116c-2.1,0-3.8,1.7-3.8,3.8c0,2.1,1.7,3.8,3.8,3.8c2.1,0,3.8-1.7,3.8-3.8
C155.2,117.6,153.5,116,151.3,116z M151.3,123.1c-1.8,0-3.3-1.4-3.3-3.3c0-1.9,1.4-3.3,3.3-3.3c1.8,0,3.3,1.4,3.3,3.3
C154.6,121.7,153.2,123.1,151.3,123.1z"/>
</g>
</svg>
</a>
Logo
<a id="toggle-menu">
<div>
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
</a>
</div>
<div class="nav">
<div class="navigation">
<ul>
<li class="navlist">Home</li>
<li class="navlist">Work</li>
<li class="navlist">Contact</li>
</ul>
</div>
<div id="navpromo">
<ul>
<li class="seemore">Want to see more? Check out my instagram!</li>
<div class='instbtn-cont'>
<a class='instbtn' href='#'>
Instagram
<span class='line-1'></span>
<span class='line-2'></span>
<span class='line-3'></span>
<span class='line-4'></span>
</a>
</div>
CSS:
/*navlist*/
.navigation{
width:100%;
background: #fff;
padding-top: 40px;
padding-bottom: 40px;
}
.navlist {
display: inline-block;
}
.navlist:after {
content: '';
display: block;
height: 1.5px;
width: 0;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
.navlist:hover:after {
width: 100%;
background: grey;
transition: width .5s ease, background-color .5s ease;
}
/*----/----navlist*/
/*global styles*/
body {
width: 100%;
margin: 0;
list-style: none;
text-decoration: none;
font-size:1.05em;
font-family: Helvetica Neue, Helvetica, Arial, Sans-serif;
}
a {
font-size:1.05em;
font-family: Helvetica Neue, Helvetica, Arial, Sans-serif;
background:transparent;
color: grey;
border:none;
letter-spacing:0.15em;
text-transform:uppercase;
transition: color 0.5s ease;
list-style: none;
text-decoration: none;
}
/*----/----global styles*/
/*navigation icon*/
#toggle-menu {
float:right;
display: block;
width: 15px;
height: 15px;
padding: 20px;
}
#toggle-menu div {
width: 15px;
height: 15px;
position: relative;
}
.header #toggle-menu span {
display: block;
width: 15px;
height: 3px;
position: absolute;
-webkit-transition: -webkit-transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
-moz-transition: -moz-transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
transition: transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
-webkit-transform-origin: center;
-moz-transform-origin: center;
transform-origin: center;
}
#toggle-menu span.top {
top: 0px;
}
#toggle-menu span.middle {
top: 6px;
}
#toggle-menu span.bottom {
top: 12px;
}
/*----/----navigation icon*/
/*navigation background transition*/
.bg {
background-color: #fff !important;
border-bottom: 0.5px solid rgba(0, 0, 0, 0.2);
}
.show {
opacity: 1;
}
.navfade {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.header .logo { /* Before scroll */
color: white;
}
.bg .logo { /* After scroll */
color: #545454;
}
.navinstagram {
fill: #fff
}
.bg .navinstagram{
fill: #545454;
}
#toggle-menu span{
background: #fff;
}
.bg #toggle-menu span {
background: #545454;
}
/*----/----navigation background transition*/
/*navigation icon animation*/
#toggle-menu.menu-is-active span {
-webkit-transition: -webkit-transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out;
-moz-transition: -moz-transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out;
transition: transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out;
}
#toggle-menu.menu-is-active span.top, #toggle-menu.menu-is-active span.middle {
top: 6px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
#toggle-menu.menu-is-active span.middle {
opacity: 0;
}
#toggle-menu.menu-is-active span.bottom {
top: 6px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/*----/----navigation icon animation*/
/*Nav Bar*/
.header {
/*border-bottom: 0.5px solid rgba(0,0,0,.2);*/
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 99999;
background-color: rgb(184, 184, 184);
/*background: none;*/
}
.whitenavbar {
background: white;
}
.nav {
display: none;
list-style-type: none;
position: fixed;
width: 100%;
text-align: center;
left:0;
top: 55px;
border-bottom: 1px solid rgba(0, 0, 0, .2);
border-top: 1px solid rgba(0, 0, 0, .2);
cursor: pointer;
color: #545454;
font-size:.8em;
letter-spacing:0.05em;
}
.nav li {
padding-left: 30px;
padding-right: 30px;
background: #fff;
margin-top: 50px;
margin-bottom: 50px;
}
.seemore {
display: inline-block;
padding-right: 20px;
}
#navpromo {
border-top: 0.5px solid rgba(0, 0, 0, .2);
padding-bottom: 10px;
background: #ffffff;
}
.instbtn-cont {
display: inline-block;
text-align: center;
margin-top: 10px;
padding-bottom: 30px;
}
.instbtn-cont .instbtn {
position: relative;
padding: 15px 20px;
border: 1px solid grey;
color: grey;
-webkit-font-smoothing: antialiased;
}
/*----/----Nav Bar*/
/*in*/
.in {
float:left;
display: inline-block;
width: 25px;
height: 25px;
padding: 15px;
cursor: pointer;
color: #fff;
font-size:.8em;
letter-spacing:0.05em;
border-top: 0.5px solid rgba(0, 0, 0, .2);
}
/*----/----in*/
/*logo*/
.logo {
position: absolute;
left: 47%;
display: inline-block;
width: 15px;
height: 15px;
padding: 18px;
cursor: pointer;
color: #fff;
font-size:.8em;
letter-spacing:0.05em;
}
/*----/----logo*/
/****landscape****/
#media only screen and (max-width: 555px) {
.nav li{
display: block;
margin-top: 20px;
margin-bottom: 20px;
}
.navlist:after {
content: '';
display: block;
height: 1.5px;
width: 0;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
.navlist:hover:after {
width: 100%;
background: grey;
transition: width .5s ease, background-color .5s ease;
}
}
/*----/----Landscape*/
jQuery:
<script src= "//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
/*navigation icon animation*/
var trigger = 'X';
jQuery(document).ready(function () {
$('#toggle-menu').click(function () {
trigger = 'X';
$(this).toggleClass('menu-is-active')
});
/* click outside of nav to trigger navigation icon animation*/
$(document).click(function () {
if (trigger == 'X') {
$("#toggle-menu").toggleClass();
trigger = 'ham';
}
});
$("nav").click(function (e) {
e.stopPropagation();
return false;
});
/*----/----navigation icon animation*/
/*toggle menu*/
jQuery("#toggle-menu").click(function () {
jQuery(".nav").slideToggle();
if($("div.header").hasClass("whitenavbar") == false){
$("div.header").addClass("whitenavbar bg navup ");
}else{
$("div.header").removeClass("whitenavbar bg navup");
}
});
/* click outside of nav to close toggle*/
$(document).click(function () {
$(".nav").hide();
});
$("#toggle-menu").click(function (e) {
e.stopPropagation();
return false;
});
/*----/----toggle menu*/
/*navigation background fade in fade out */
$(window).scroll(function () {
var dist = $('#panel2').offset().top;
console.log(dist);
if ($(window).scrollTop() > dist) {
$('.header').addClass('bg');
$('.header').addClass('navfade');
}
else {
$('.header').removeClass('bg');
}
});
$('.scroll').on('click', function (e) {
e.preventDefault()
$('html, body').animate({
scrollTop: $(this.hash).offset().top
}, 1500);
});
/*----/-----navigation background fade in fade out */
});
</script>

I'm not sure of the technical terms as I haven't looked it up, but an element with margin spacing will extend out from the content box of its parent element unless either padding, or overflow is set.
A quick fix for this is to give #navpromo the overflow: hidden; property.
Sidenote: I love that menu icon animation! :D

JavaScript: css toggle switch to dark mode

I have created a toggle switch using css.
I want #box1 to turn from a white background with black type to a black with white text and the toggle to turn to on.
I'm stuck trying to figure out the JavaScript. The button doesn't switch and the box doesn't turn back to white.
$('#myonoffswitch').change(function(){
console.log('here');
if ($(this).click())
{
$('#box1').addClass('dark-mode');
}
else
{
$('#box1').removeClass('dark-mode');
}
});
How can toggle the dark-mode class.
Fiddle

You can just use the toggleClass method. Demo
$('#myonoffswitch').change(function(){
$('#box1').toggleClass('dark-mode');
});
$(this).click() returns an instance of jQuery, which is a truthy value in JavaScript, this is why addClass was called in the first place
$('#myonoffswitch').change(function() {
$('#box1').toggleClass('dark-mode');
});
.onoffswitch {
position: relative;
width: 90px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block;
overflow: hidden;
cursor: pointer;
border: 2px solid #999999;
border-radius: 20px;
}
.onoffswitch-inner {
display: block;
width: 200%;
margin-left: -100%;
-moz-transition: margin 0.3s ease-in 0s;
-webkit-transition: margin 0.3s ease-in 0s;
-o-transition: margin 0.3s ease-in 0s;
transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before,
.onoffswitch-inner:after {
display: block;
float: left;
width: 50%;
height: 30px;
padding: 0;
line-height: 30px;
font-size: 14px;
color: white;
font-family: Trebuchet, Arial, sans-serif;
font-weight: bold;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "ON";
padding-left: 10px;
background-color: #FFFFFF;
color: #000000;
}
.onoffswitch-inner:after {
content: "OFF";
padding-right: 10px;
background-color: #FFFFFF;
color: #000000;
text-align: right;
}
.onoffswitch-switch {
display: block;
width: 18px;
margin: 6px;
background: #000000;
border: 2px solid #999999;
border-radius: 20px;
position: absolute;
top: 0;
bottom: 0;
right: 56px;
-moz-transition: all 0.3s ease-in 0s;
-webkit-transition: all 0.3s ease-in 0s;
-o-transition: all 0.3s ease-in 0s;
transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
right: 0px;
background-color: #FFFFFF;
}
#box1 {
color: black;
background-color: white;
border: 1px solid;
width: 100px;
height: 100px;
}
#box1.dark-mode {
color: #fff;
background-color: #000;
width: 100px;
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch">
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
<br>
<div id="box1">This is text.</div>