Develop Reference

How do I add local-storage to a JavaScript Function for Light/Dark Mode

My current JavaScript function switches between Light and Dark Mode. However when the user refreshed the page, the selected mode is forgotten and reverts back to light mode.
How do I add local-storage to function to make it required when toggling between light and dark?
I am sure this is another conditional statement below my current function, but I am unsure whether my current JavaScript would work as is, or that I would need to re-write it.
<!-- Light/Dark Mode Container -->
<input type="checkbox" id="input-color-switch">
<label for="input-color-switch" class="color-switch">
<div id="star" class="color-switch-toggle">
<div class="color-switch-toggle star" id="star-1">★</div>
<div class="color-switch-toggle star" id="star-2">★</div>
</div>
<div id="moon" class="color-switch-toggle"></div>
</label>
#input-color-switch {
display: none;
}
label {
display: block;
float: left;
margin: 20px;
width: 116px;
height: 56px;
background-color: lightgray;
border-radius: 56px;
transform: translateY(-50%);
cursor: pointer;
transition: 0.3s ease background-color;
overflow: hidden;
}
#star {
position: absolute;
top: 13px;
left: 13px;
width: 30px;
height: 30px;
background-color: #fff;
transform: scale(1);
border-radius: 50%;
transition: 0.3s ease top, 0.3s ease left, 0.3s ease transform,
0.3s ease background-color;
z-index: 1;
}
#star-1 {
position: relative;
}
#star-2 {
position: absolute;
transform: rotateZ(36deg);
}
.star {
top: 0;
left: -7px;
font-size: 54px;
line-height: 28px;
color: #fff;
transition: 0.3s ease color;
}
#moon {
position: absolute;
bottom: -52px;
right: 8px;
width: 40px;
height: 40px;
background-color: #fff;
border-radius: 50%;
transition: 0.3s ease bottom;
}
#moon:before {
content: "";
position: absolute;
top: -12px;
left: -17px;
width: 40px;
height: 40px;
background-color: var(--secondary-color);
border-radius: 50%;
transition: 0.3s ease background-color;
}
#input-color-switch:checked + label {
background-color: #000;
}
#input-color-switch:checked + label #star {
top: 3px;
left: 64px;
transform: scale(0.3);
background-color: lightblue;
}
#input-color-switch:checked + label .star {
color: lightblue;
}
#input-color-switch:checked + label #moon {
bottom: 8px;
}
#input-color-switch:checked + label #moon:before {
background-color: #000;
}
/* End of Light/Dark Mode */
const colorSwitch = document.getElementById('input-color-switch');
colorSwitch.addEventListener('click', checkMode);
function checkMode () {
if(colorSwitch.checked) {
console.log('dark on')
darkModeOn();
} else {
console.log('dark off')
darkModeOff();
}
};
function darkModeOn () {
document.body.classList.add('dark-mode');
}
function darkModeOff () {
document.body.classList.remove('dark-mode');
}
//Light/Dark Mode Toggle Function End

You can set a flag for dark-mode in the localStorage on click, also a listener for windows.onload event to read that flag and apply the dark-mode:
const colorSwitch = document.getElementById('input-color-switch');
colorSwitch.addEventListener('click', checkMode);
function checkMode () {
if(colorSwitch.checked) {
console.log('dark on')
darkModeOn();
} else {
console.log('dark off')
darkModeOff();
}
};
function darkModeOn () {
document.body.classList.add('dark-mode');
localStorage.setItem('dark-mode', 'on');
}
function darkModeOff () {
document.body.classList.remove('dark-mode');
localStorage.removeItem('dark-mode');
}
//Light/Dark Mode Toggle Function End
window.addEventListener('load', () => {
if (localStorage.getItem('dark-mode')) {
colorSwitch.checked = true;
darkModeOn();
}
});
#input-color-switch {
display: none;
}
label {
display: block;
float: left;
margin: 20px;
width: 116px;
height: 56px;
background-color: lightgray;
border-radius: 56px;
transform: translateY(-50%);
cursor: pointer;
transition: 0.3s ease background-color;
overflow: hidden;
}
#star {
position: absolute;
top: 13px;
left: 13px;
width: 30px;
height: 30px;
background-color: #fff;
transform: scale(1);
border-radius: 50%;
transition: 0.3s ease top, 0.3s ease left, 0.3s ease transform,
0.3s ease background-color;
z-index: 1;
}
#star-1 {
position: relative;
}
#star-2 {
position: absolute;
transform: rotateZ(36deg);
}
.star {
top: 0;
left: -7px;
font-size: 54px;
line-height: 28px;
color: #fff;
transition: 0.3s ease color;
}
#moon {
position: absolute;
bottom: -52px;
right: 8px;
width: 40px;
height: 40px;
background-color: #fff;
border-radius: 50%;
transition: 0.3s ease bottom;
}
#moon:before {
content: "";
position: absolute;
top: -12px;
left: -17px;
width: 40px;
height: 40px;
background-color: var(--secondary-color);
border-radius: 50%;
transition: 0.3s ease background-color;
}
#input-color-switch:checked + label {
background-color: #000;
}
#input-color-switch:checked + label #star {
top: 3px;
left: 64px;
transform: scale(0.3);
background-color: lightblue;
}
#input-color-switch:checked + label .star {
color: lightblue;
}
#input-color-switch:checked + label #moon {
bottom: 8px;
}
#input-color-switch:checked + label #moon:before {
background-color: #000;
}
/* End of Light/Dark Mode */
body.dark-mode {
background-color: #222;
}
<!-- Light/Dark Mode Container -->
<input type="checkbox" id="input-color-switch">
<label for="input-color-switch" class="color-switch">
<div id="star" class="color-switch-toggle">
<div class="color-switch-toggle star" id="star-1">★</div>
<div class="color-switch-toggle star" id="star-2">★</div>
</div>
<div id="moon" class="color-switch-toggle"></div>
</label>

Having a navigation bar onclick/href execute animation on a circle element then loading a new page - How?

I have a circle class element .circle and a navigation bar on a demo homepage home.html. I need clicking on one of the navigation's elements href to resume.html) to do an animation (growing its dimension) to have it matched in size to a similar element .circleRe on the linked page (resume.html) and only then move to that page. So, how to delay loading the second page while doing the animation?
P.S. The circle also response to hovering (and slightly enlarging it to have a text.)
I've tried using JavaScript and had partial success, but it seems that the href cancels the animation effect. #keyframes does not seem to be the right solution
nav {
overflow: hidden;
background-color: #333;
position: fixed;
z-index: 10
}
nav a {
font-family: DoubleBass;
font-weight: normal;
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
nav a:hover {
background-color: #ddd;
color: black;
}
.circle {
background: #D73309;
opacity: 0.7;
width: 37.5vmin;
height: 37.5vmin;
border-radius: 50%;
margin: 0 auto;
position: fixed;
z-index: 1;
top: -100px;
right: -70px;
-webkit-transition: width 1.2s, height 1.2s, box-shadow 1.2s;
/* Safari */
transition: width 1.2s, height 1.2s, box-shadow 1.2s;
}
.quotes {
opacity: 0;
font-size: .9em;
line-height: 120%;
padding: 70px 0px 0px 20px;
}
.circle:hover {
width: 60vmin;
height: 60vmin;
opacity: 1;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.circle:hover .quotes {
opacity: 1;
-webkit-transition: opacity 1.2s;
transition: opacity 1.2s;
}
.circleRe {
background: #D73309;
opacity: 1;
width: 140vmax;
height: 140vmax;
border-radius: 50%;
margin: 0 auto;
position: absolute;
z-index: 1;
top: -500px;
right: -400px;
}
<header>
<nav>
Home
Resume
Archive
Films
</nav>
</header>
<body>
<div class="circle">
<p class="quotes"></p>
</div>
</body>

$('.links').click(function(e) {
e.preventDefault();
//Show the UI Loader here
$('.loaders').show();
setTimeout(function() {
//Hide the UI Loader after 5 seconds
$('.loaders').hide();
}, 5000);
});
nav {
overflow: hidden;
background-color: #333;
position: fixed;
z-index: 10
}
nav a {
font-family: DoubleBass;
font-weight: normal;
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
nav a:hover {
background-color: #ddd;
color: black;
}
.circle {
background: #D73309;
width: 37.5vmin;
height: 37.5vmin;
border-radius: 50%;
margin: 0 auto;
position: fixed;
z-index: 100;
top: -100px;
right: -70px;
-webkit-transition: width 1.2s, height 1.2s, box-shadow 1.2s;
/* Safari */
transition: width 1.2s, height 1.2s, box-shadow 1.2s;
}
.quotes {
opacity: 0;
font-size: .9em;
line-height: 120%;
padding: 70px 0px 0px 20px;
}
.loaders {
border: 16px solid #f3f3f3;
border-top: 16px solid #3498db;
border-radius: 50%;
animation: spin 2s linear infinite;
position: fixed;
width: 100%;
height: 100%;
z-index: 1000;
top: 0px;
left: 0px;
opacity: .5;
/* in FireFox */
filter: alpha(opacity=50);
/* in IE */
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<nav>
<a id='lnkHome' class='links' href="JavaScript:void(0);">Home</a>
<a id='lnkResume' class='links' href="JavaScript:void(0);">Resume</a>
<a id='lnkArchieve' class='links' href="JavaScript:void(0);">Archive</a>
<a id='lnkFilms' class='links' href="JavaScript:void(0);">Films</a>
</nav>
</header>
<body>
<div class="circle">
<p class="quotes">
</p>
</div>
<div class="loaders" style="display:none;"></div>
</body>
Note:- Show loader on click and after some times, you can hide that loader.
so the user will not be able to interact with DOM(UI).
Hope this helps!

Js var, not defined [duplicate]

This question already has an answer here:
jQuery TypeError: $ is undefined
(1 answer)
Closed 5 years ago.
Hi guys for some reason this variable wont work on my file. I have a picture, and when the user hovers over it, its suppose to bring up a swipe box with some information about the pic. However the box wont appear for some reason.
HTML/JS:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link href="css/custom.css" rel="stylesheet">
<script type="text/javascript">
var modal = $('.modal');
modal.hover(function() {
$(this).toggleClass('open');
});
alsolike(
"qEybdR", "Checkbox Radial Wash",
"dPdoNp", "Google Messenger Icon Button",
"BJAjF", "Masonry Multi Column Grid"
);
</script>
</head>
<body>
<a class="drib" href="http://drbl.in/okRS">View it on Dribbble <i class="fa fa-dribbble"></i></a>
<div class="modal">
<div class="image-container"></div>
<div class="content">
<div class="wrapper">
<div class="category">First Drive Review</div>
<h2>2015 Dodge Challenger SRT Hellcat</h2>
<h4>Andy Wendler <span>from</span> July 2014</h4>
<div class="line"></div>
<p>Make room, Beelzebub, there’s a new demon-prince pony car in town, and it’s from the people who once brought you a real Demon. Known in this mortal realm as the Dodge Challenger SRT Hellcat...</p>Read More <i class="fa fa-caret-right"></i>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
CSS:
.modal {
width: 600px;
height: 400px;
margin: 50px auto;
border-radius: 5px;
overflow: hidden;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
position: relative;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.modal .image-container {
background: url("http://media.caranddriver.com/images/14q3/612022/2015-dodge-challenger-srt-hellcat-first-drive-review-car-and-driver-photo-615298-s-original.jpg");
background-size: cover;
background-position: center center;
display: inline-block;
width: 100%;
height: 100%;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.modal .content {
width: 40%;
height: 100%;
position: absolute;
right: -40%;
top: 0;
background: white;
box-shadow: -10px 0 25px rgba(0, 0, 0, 0.5);
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.modal .wrapper {
width: 100%;
height: 100%;
position: relative;
padding: 24px;
}
.modal .wrapper h2 {
font-family: "Georgia", serif;
font-style: italic;
font-weight: bold;
font-size: 26px;
line-height: 32px;
margin: 8px 0 10px 20px;
opacity: 0;
-webkit-transition: all 0.2s;
transition: all 0.2s;
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.modal .wrapper h4 {
text-transform: uppercase;
color: #999;
font-size: 12px;
position: relative;
top: 4px;
opacity: 0;
-webkit-transition: all 0.2s;
transition: all 0.2s;
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.modal .wrapper h4 span {
text-transform: none;
font-style: italic;
font-family: "Georgia", serif;
}
.modal .wrapper .category {
background: #333;
padding: 7px 15px;
display: inline-block;
color: white;
text-transform: uppercase;
font-size: 10px;
letter-spacing: 1px;
font-weight: 500;
position: absolute;
top: -24px;
left: 20px;
-webkit-transition: all 0.2s;
transition: all 0.2s;
-webkit-transition-delay: 0.5s;
transition-delay: 0.5s;
}
.modal .wrapper .line {
width: 50px;
height: 2px;
opacity: 0;
background: #E3000C;
margin: 16px 0 14px;
-webkit-transition: all 0.2s;
transition: all 0.2s;
-webkit-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.modal .wrapper p {
font-size: 14px;
line-height: 24px;
opacity: 0;
-webkit-transition: all 0.2s;
transition: all 0.2s;
-webkit-transition-delay: 0.5s;
transition-delay: 0.5s;
}
.modal .wrapper p span {
text-transform: uppercase;
font-size: 0.75em;
font-weight: 500;
letter-spacing: 0.5px;
}
.modal .wrapper a {
display: block;
text-align: right;
text-decoration: none;
font-style: italic;
font-size: 12px;
color: #999;
font-family: "Georgia", serif;
margin-top: 12px;
-webkit-transition: all 0.2s;
transition: all 0.2s;
opacity: 0;
}
.modal .wrapper a i.fa {
-webkit-transition: all 0.2s;
transition: all 0.2s;
margin-left: 2px;
color: #E3000C;
}
.modal .wrapper a:hover {
color: #E3000C;
}
.modal .wrapper a:hover i.fa {
margin-left: 12px;
}
.modal.open .image-container {
width: 60%;
}
.modal.open .content {
right: 0;
}
.modal.open .content .category {
top: 0;
}
.modal.open .content h2 {
opacity: 1;
margin-left: 0;
}
.modal.open .content h4 {
top: 0;
opacity: 1;
}
.modal.open .content .line {
width: 90px;
opacity: 1;
}
.modal.open .content p {
opacity: 1;
}
.modal.open .content a {
opacity: 1;
}
.trigger {
position: absolute;
top: 24px;
right: 24px;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 1px;
text-decoration: none;
color: #333;
}
* {
box-sizing: border-box;
}
.drib {
text-align: center;
display: block;
margin-top: 20px;
color: #fff;
}
.drib .fa {
color: #ea4c89;
}
body {
background: #777;
font-family: "Lato", sans-serif;
}
Thanks for the help

You can't use jquery until you have included jquery, ie:
<script type="text/javascript">
var modal = $('.modal');
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
must be:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
var modal = $('.modal');
</script>
there's still some debate as to the best place to put these (in the <head> (so available to the page) or just before </body> (so the content loads quicker)) as long as they are in the correct order.

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.

move button from right to left on hover with css3 animation

I am trying to reproduce the effect of the button on the right of this page.
Begin position :
End position after animation :
I have done this HTML code :
<div id="btnFeedbackHome">
<div><img src="img/home_feedback.png" id="feedbackImgHomeBtn" /></div>
<p>Ideas & feedback</p>
</div>
And CSS :
#btnFeedbackHome {
width: 180px;
height: 45px;
position: absolute;
top: 320px;
right: 0;
background-color: #35BDCF;
cursor: pointer;
}
#btnFeedbackHome p{
color: white;
font-weight: 600;
position: absolute;
top: 1px;
right: 8px;
font-size: 14px;
}
#btnFeedbackHome div{
width: 45px;
background-color: #2A97A6;
height: 45px;
}
#feedbackImgHomeBtn {
margin-top: 9px;
margin-left: 7px;
}
For the moment, my code show the end position but i don't know how to do to perform the same translation effect on my div.
Could you help me ?

I think this is what you want. Still any queries feel free to ask.
body
{
overflow-x:hidden;
}
#btnFeedbackHome {
width: 180px;
height: 45px;
position: absolute;
top: 320px;
right: -135px;
transition:all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
background-color: #35BDCF;
cursor: pointer;
}
#btnFeedbackHome p{
color: white;
font-weight: 600;
position: absolute;
top: 1px;
right: 8px;
font-size: 14px;
}
#btnFeedbackHome div{
width: 45px;
background-color: #2A97A6;
height: 45px;
}
#feedbackImgHomeBtn {
margin-top: 9px;
margin-left: 7px;
}
#btnFeedbackHome:hover
{
right: 0px;
}
<div id="btnFeedbackHome">
<div><img src="img/home_feedback.png" id="feedbackImgHomeBtn" /></div>
<p>Ideas & feedback</p>
</div>

You can achieve this with a simple CSS transition on the element. I've created a JSFiddle that builds on your example to show how to do this with no JavaScript as the only thing you need is a hover added to the main container. http://jsfiddle.net/cudome3h/1/
If you do everything that you did and just change the CSS to what I have here you will get a similar effect:
#btnFeedbackHome {
width: 180px;
height: 45px;
position: absolute;
top: 320px;
right: -140px;
background-color: #35BDCF;
cursor: pointer;
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
}
#btnFeedbackHome:hover {
right: 0;
}