Develop Reference

JS hover animation

First of all i checked all duplicates below. But i still couldnt figure out how to.
make animation hover like transition hover
JS hover-like animation Hover animation with js not working
My problem is
I have
<a class="tooltip animated fadeIn" href="#" style="margin-left: 30px; font-size: 1.6em; font-family: 'Open Sans Condensed'; -webkit-animation-delay: 1s; /* Chrome, Safari, Opera */ animation-delay: 1s; ">
<i class="fa fa-info helper" ></i>
<span class="tooltip-content"><span class="tooltip-text"><span class="tooltip-inner"> If you require access to programs, <br /> please contact to your system administrator </span></span></span>
</a>
And i can use hoover functionality with css like below
#import url(http://fonts.googleapis.com/css?family=Satisfy);
.tooltip {
display: inline;
position: relative;
z-index: 999;
font-size: 1.2em;
color: #D93742;
}
/* Gap filler */
.tooltip::after {
content: '';
position: absolute;
width: 100%;
height: 20px;
bottom: 100%;
left: 50%;
pointer-events: none;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.tooltip:hover::after {
pointer-events: auto;
}
/* Tooltip */
.tooltip-content {
position: absolute;
z-index: 9999;
width: 400px;
left: 50%;
bottom: 100%;
font-size: 18px;
line-height: 1.4;
text-align: center;
font-weight: 400;
color: #D93742; /* #fffaf0; */
background: transparent;
opacity: 0;
margin: 0 0 5px -200px;
cursor: default;
pointer-events: none;
font-family: inherit; /* 'Satisfy', cursive; */
-webkit-font-smoothing: antialiased;
-webkit-transition: opacity 0.3s 0.3s;
transition: opacity 0.3s 0.3s;
}
.tooltip:hover .tooltip-content {
opacity: 1;
pointer-events: auto;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.tooltip-content span {
display: block;
}
.tooltip-text {
border-bottom: 10px solid #D93742; /* #fffaf0; */
overflow: hidden;
-webkit-transform: scale3d(0,1,1);
transform: scale3d(0,1,1);
-webkit-transition: -webkit-transform 0.3s 0.3s;
transition: transform 0.3s 0.3s;
}
.tooltip:hover .tooltip-text {
-webkit-transition-delay: 0s;
transition-delay: 0s;
-webkit-transform: scale3d(1,1,1);
transform: scale3d(1,1,1);
}
.tooltip-inner {
background: rgba(85,61,61,0.95);
padding: 5px;
-webkit-transform: translate3d(0,100%,0);
transform: translate3d(0,100%,0);
webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
color: white;
}
.tooltip:hover .tooltip-inner {
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
/* Arrow */
.tooltip-content::after {
content: '';
bottom: -20px;
left: 50%;
border: solid transparent;
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: transparent;
border-top-color: #D93742; /* #fffaf0; */
border-width: 10px;
margin-left: -10px;
}
I would like to do same thing with javascript mouseover(hover) and mouseout.
First my div mustn't show. I have table which has headers like 'th'. If a user hoover on that header i want to show tooltip with my javascript closure like how css way does. Css codes only opening in certain positions. But my js tooltip one must open for specific table headers. I can show tooltip in js way like below but i cant add animate functionality and css changes to this one. How can i do that ?
<div id="toolTipContainer"
style="z-index:100; font-size: 1.2em; color: #D93742; border-style: solid; border-width: 2px; width: 200px; height: 80px; position:absolute; display:none;">
<span class="tooltiptable-content"><span class="tooltiptable-text"><span class="tooltiptable-inner"> If you require access to modules, <br/> please contact to your system administrator </span></span></span>
</div>
my script :
<script>
$(document).ready(function () {
$('th').mouseover(function () {
if ($(this).index() === 0) {
return;
} else {
const top = $(this).offset().top - 82;
// var left = $(this).offset().left;
const left = $(this).offset().left;
$('#toolTipContainer').css({'top': top, 'left': left, 'width': $(this).width()});
$('.tooltiptable-content').css({'width': $(this).width()});
//show tool tips
$('#toolTipContainer').show();
}
});
$('th').mouseout(function () {
$("#toolTipContainer").hide();
});
$('#toolTipContainer').mouseover(function () {
$('#toolTipContainer').show();
});
$('#toolTipContainer').mouseout(function () {
$('#toolTipContainer').hide();
});
});
</script>

I can show tooltip in js way like below but i cant add animate functionality and css changes to this one. How can i do that ?
You can use the jQuery fadeIn() method instead of show() and fadeOut() instead of hide() to add transitions. If you need more control over the animation there's animate().
Docs:
http://api.jquery.com/fadein/
http://api.jquery.com/animate/

Javascript onclick function doesnt execute (error log - not defined)

I can't get this for the life of me...
I've tried to make a mobile friendly nav that gets hidden if the screen res is less than 600px and a button appears that toggles the menu opacity.
https://jsfiddle.net/ef3mezk5/
Here is the fiddle... I have defined the function at the onclick as simply as possible -
<div class="menu-icon-black" id="menu-icon" onclick="menudrop()">
i am using a separate file that holds the JS engine code here is the portion that is responsible for the menu drop
function menudrop() {
document.getElementById("menu-icon").classList.toggle("change");
document.getElementById("navlist").classList.toggle("show");
}
Uncaught ReferenceError: menudrop is not defined
at HTMLDivElement.onclick ((index):169)
And i can see its clearly defined... what is going on here?
Can someone please look into this and tell me whats wrong?

Seems like you have chosen improper load type at jsfiddle. Instead of load type - on load use no wrap - in body.
Credits to #Pointy.
function menudrop() {
document.getElementById("menu-icon").classList.toggle("change");
document.getElementById("navlist").classList.toggle("show");
}
#media screen and (max-width: 600px) {
.navlist {
background-color: white;
border: 1px solid black;
right: 15%;
opacity: 0;
z-index: 99;
}
.navlist li {
border: none;
font-size: 25px;
float: none;
}
#menu-icon {
display: inline-block;
}
}
.navlist {
width: auto;
margin: 0px;
padding: 0px;
margin-right: 5%;
-webkit-padding-start: 0px;
-webkit-margin-before: 0px;
-webkit-margin-after: 0px;
font-family: "Roboto", sans-serif;
display: inline-block;
position: relative;
}
.navlist li {
float: left;
font-size: 14px;
padding: 10px 15px;
border-right: 1px solid black;
list-style: none;
text-decoration: none;
position: relative;
}
.navlist a {
color: black;
text-decoration: none;
transition: color 0.3s;
/* vendorless fallback */
-o-transition: color 0.3s;
/* opera */
-ms-transition: color 0.3s;
/* IE 10 */
-moz-transition: color 0.3s;
/* Firefox */
-webkit-transition: color 0.3s;
/*safari and chrome */
position: relative;
}
.navlist a:hover {
color: #00bff3;
position: relative;
}
.menu-icon-black {
display: inline-block;
cursor: pointer;
}
.menu-icon-bar1,
.menu-icon-bar2,
.menu-icon-bar3 {
width: 45px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}
/* Rotate first bar */
.change .menu-icon-bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 7px);
transform: rotate(-45deg) translate(-9px, 7px);
}
/* Fade out the second bar */
.change .menu-icon-bar2 {
opacity: 0;
}
/* Rotate last bar */
.change .menu-icon-bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
.show {
opacity: 1 !important;
}
<ul class="navlist" id="navlist">
<li>Начало</li>
<li>Планограма</li>
<li>Запитване</li>
<li>Реклама при нас</li>
</ul>
<div class="menu-icon-black" id="menu-icon" onclick="menudrop()">
<div class="menu-icon-bar1"></div>
<div class="menu-icon-bar2"></div>
<div class="menu-icon-bar3"></div>
</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.

I'm trying to put a CSS&Javascript button to do the job of another label&input checkbox?

Essentially, I'm trying to combine two online tutorials:
1st is from the good folks here http://medialoot.com/blog/how-to-create-a-responsive-navigation-menu-using-only-css/ which gives me a button that creates a drop down menu that displays hides with css display attribute, which I have working:
<!-- Load Drop down menu #maxwidth 760px -->
<label for="show-menu" class="show-menu">Show Menu</label>
<input type="checkbox" id="show-menu" role="button">
<!-- END Drop down menu -->
I have this working, hiding and showing my
<ul id="menu">
but I want the below menu button to do the same job. The second is from a great tut for a menu icon that changes to a cross and back again with css and javascript:
http://callmenick.com/post/animating-css-only-hamburger-menu-icons
<div class="o-grid__item">
<button class="c-hamburger c-hamburger--htx" >
<span>Toggle</span>
</button>
</div>
I tried putting on inside the other, but it seemed to lose the functionality… Any help much appreciated.
– – -
OK the full markup is:
<!-- Load Drop down menu #maxwidth 760px -->
<label for="show-menu" class="show-menu">Show Menu</label>
<input type="checkbox" id="show-menu" role="button">
<!-- END Drop down menu -->
<!-- START Hamburger Icon -->
<div class="o-grid__item">
<button class="c-hamburger c-hamburger--htx" >
<span>Toggle</span>
</button>
</div>
<!-- END Hamburger Icon -->
<!-- END Button for menu below when below CSS Mediaquery -->
<ul id="menu">
<li><a class="item1" href="/item1.html">item1</a></li>
<li><a class="item2" href="/item2.html">item2</a></li>
<li><a class="item3" href="/item3.html">item3</a></li>
</ul>
The second part also has the following Javascript:
<script>
(function() {
"use strict";
var toggles = document.querySelectorAll(".c-hamburger");
for (var i = toggles.length - 1; i >= 0; i--) {
var toggle = toggles[i];
toggleHandler(toggle);
};
function toggleHandler(toggle) {
toggle.addEventListener( "click", function(e) {
e.preventDefault();
(this.classList.contains("is-active") === true) ? this.classList.remove("is-active") : this.classList.add("is-active");
});
}
})();
</script>
and the following is the css used for the css checkbox:
/*Style 'show menu' label button and hide it by default*/
.show-menu {
padding: 10px 0;
display: none;
}
/*Hide checkbox*/
input[type=checkbox]{
display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
display: inline-block;
}
/*Responsive Styles*/
#media screen and (max-width : 760px){
/*Make dropdown links appear inline*/
ul {
position: static;
display: none;
right: 0px;
line-height: 1.2em;
padding-right: 20px
}
/*Create vertical spacing*/
li {
margin-bottom: 1px;
text-align: right;
line-height: normal;
background-color: rgba(0, 0, 0, 0.0);
}
/*Make all menu links full width*/
ul li, li a {
width: 100%;
}
/*Display 'show menu' link*/
.show-menu {
padding-right: 0px;
position: absolute;
display: block;
right: 0px;
top: 10px;
}
}
and the following is the css used for the css/javascript button animation:
.c-hamburger {
display: block;
position: relative;
overflow: hidden;
margin: 0;
padding: 0;
width: 96px;
height: 96px;
font-size: 0;
text-indent: -9999px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
box-shadow: none;
border-radius: none;
border: none;
cursor: pointer;
-webkit-transition: background 0.3s;
transition: background 0.3s;
}
.c-hamburger:focus {
outline: none;
}
.c-hamburger span {
display: block;
position: absolute;
top: 32px;
left: 30px;
right: 30px;
height: 4px;
background: white;
border-radius: 1px;
}
.c-hamburger span::before,
.c-hamburger span::after {
position: absolute;
display: block;
left: 0;
width: 100%;
height: 4px;
background-color: #fff;
content: "";
border-radius: 1px;
}
.c-hamburger span::before {
top: -10px;
}
.c-hamburger span::after {
bottom: -10px;
}
.c-hamburger--htx {
background-color: transparent;
}
.c-hamburger--htx span {
-webkit-transition: background 0s 0.3s;
transition: background 0s 0.3s;
}
.c-hamburger--htx span::before,
.c-hamburger--htx span::after {
-webkit-transition-duration: 0.3s, 0.3s;
transition-duration: 0.3s, 0.3s;
-webkit-transition-delay: 0.3s, 0s;
transition-delay: 0.3s, 0s;
}
.c-hamburger--htx span::before {
-webkit-transition-property: top, -webkit-transform;
transition-property: top, transform;
}
.c-hamburger--htx span::after {
-webkit-transition-property: bottom, -webkit-transform;
transition-property: bottom, transform;
}
/* active state, i.e. menu open */
.c-hamburger--htx.is-active {
background-color:;
}
.c-hamburger--htx.is-active span {
background: none;
}
.c-hamburger--htx.is-active span::before {
top: 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.c-hamburger--htx.is-active span::after {
bottom: 0;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.c-hamburger--htx.is-active span::before,
.c-hamburger--htx.is-active span::after {
-webkit-transition-delay: 0s, 0.3s;
transition-delay: 0s, 0.3s;
}

Vertically center div responsively

I'm trying to vertically center the nav panel responsively, so that it is centered on all screens that are ~940px and up. I found this article CSS-Tricks but I have been unable to implement this with my current code effectively.
html
<body>
<!-- Header -->
<div class="header">
<i id="nav-button" class="fa fa-2x fa-navicon"></i>
<header class="logo">
<img src="../Assets/images/logo.png" alt="">
</header>
<i id="account-control" class="fa fa-2x fa-user"></i>
</div>
<!-- Content Wrapper-->
<div class="wrapper">
<!-- Content -->
<div id="content">
</div>
<!-- Collapsible Menu -->
<div id="nav-sidebar">
<div class="nav-items">
<nav class="mainmenu">
<ul>
<li class="active"><i class="fa fa-dashboard" alt="Dashboard"></i></li>
<li><i class="fa fa-dollar" alt="Billing"></i></li>
<li><i class="fa fa-support" alt="Support"></i></li>
<li><i class="fa fa-cubes" alt="Servers"></i></li>
<li><i class="fa fa-cogs" alt="Settings"></i></li>
<li><i class="fa fa-bar-chart-o" alt="Reports"></i></li>
</ul>
</nav>
</div>
</div>
</div>
css
/* Core */
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
display: block;
font-family: "Open Sans", sans-serif;
font-size: 12px;
font-weight: 400;
line-height: 1.42857;
color: black;
background-color: white;
}
ul {
margin: 0;
padding: 0;
-webkit-margin-before: 0em;
-webkit-margin-after: 0em;
-webkit-padding-start: 0px;
}
.wrapper {
position: fixed;
width: 100%;
height: 100%;
top: 75px;
z-index: 0;
}
#content {
position: relative;
left: 0;
z-index: 0;
height: 100%;
overflow: auto;
}
/* Header */
.header {
background-color: white;
width: 100%;
height: 75px;
position: absolute;
top: 0;
z-index: 2;
box-shadow: 1px 0 1px #bdc3c7;
}
#nav-button {
color: #555c60;
position: absolute;
left: 40px;
top: 35%;
-webkit-transition: -webkit-transform 0.2s;
-moz-transition: -moz-transform 0.2s;
transition: transform 0.2s;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
font-smoothing: antialiased;
}
#nav-button.nav-button-open {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transition: -webkit-transform 0.2s;
-moz-transition: -moz-transform 0.2s;
transition: transform 0.2s;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
font-smoothing: antialiased;
}
.logo {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#account-control {
color: #555c60;
position: absolute;
right: 40px;
top: 35%;
-webkit-transition: -webkit-transform 0.2s;
-moz-transition: -moz-transform 0.2s;
transition: transform 0.2s;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
font-smoothing: antialiased;
}
/* Navigation Sidebar */
#nav-sidebar {
position: absolute;
top: 0;
left: 0;
visibility: hidden;
width: 80px;
background: none;
opacity: 1;
z-index: 1;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
transition: all 0.2s;
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
transform: translateX(-100%);
}
#nav-sidebar:after {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
content: '';
opacity: 1;
}
#nav-sidebar:before {
content: '';
height: 100%;
vertical-align: middle;
}
.nav-sidebar-open #nav-sidebar {
visibility: visible;
-webkit-transition-timing-function: ease-in-out;
-moz-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -webkit-transform;
transition-property: transform;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
transform: translateX(0);
-webkit-transition-speed: 0.2s;
-moz-transition-speed: 0.2s;
transition-speed: 0.2s;
}
.nav-sidebar-open #nav-sidebar:after {
width: 0;
height: 0;
opacity: 0;
}
.nav-items {
position: relative;
box-shadow: 1px 1px 1px #bdc3c7;
vertical-align: middle;
}
.mainmenu ul {
list-style: none;
margin: 0;
padding: 0;
}
.mainmenu ul li {
display: block;
text-align: center;
}
.mainmenu ul li a {
position: relative;
display: inline-block;
color: #555c60;
text-decoration: none;
font-size: 18px;
line-height: 80px;
height: 80px;
width: 100%;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
font-smoothing: antialiased;
-webkit-transition: background .4s ease-in-out;
-moz-transition: background .4s ease-in-out;
transition: background .4s ease-in-out;
-webkit-transition-property: color,text;
-webkit-transition-duration: .3s, .3s;
-webkit-transition-timing-function: linear, ease-in-out;
-moz-transition-property: color,text;
-moz-transition-duration: .3s;
-moz-transition-timing-function: linear, ease-in-out;
-o-transition-property: color,text;
-o-transition-duration: .3s, .3s;
-o-transition-timing-function: linear, ease-in-out;
}
.mainmenu ul li a:hover, .mainmenu ul li a:active {
background: #3498db;
color: white;
-webkit-transition: background .4s ease-in-out;
-moz-transition: background .4s ease-in-out;
transition: background .4s ease-in-out;
-webkit-transition-property: color,text;
-webkit-transition-duration: .3s, .3s;
-webkit-transition-timing-function: linear, ease-in-out;
-moz-transition-property: color,text;
-moz-transition-duration: .3s;
-moz-transition-timing-function: linear, ease-in-out;
-o-transition-property: color,text;
-o-transition-duration: .3s, .3s;
-o-transition-timing-function: linear, ease-in-out;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
font-smoothing: antialiased;
}
.mainmenu ul li a:first-child {
border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.mainmenu ul li a:last-child {
border-bottom: none;
}
.mainmenu ul li a i {
margin: 20px;
}
js
jQuery(document).ready(function($) {
/* Sidebar */
$('#nav-button').click(function() {
$('#nav-button').toggleClass('nav-button-open');
$('body').toggleClass('nav-sidebar-open');
return false;
});
});(jQuery);
P.S. (Don't be afraid of 190 lines of CSS, ~90 lines are CSS transitions that you can ignore.)
Also, here is the jsFiddle for you to play around with. Thank you so much for your help ahead of time.

I am guessing it's the panel that slides out you want to be vertically aligned to the height of the view port if the view port is 940px or wider. I was unsure about other things and so I managed to achieve this but I had to clean it up a bit. Feel free to use parts you need and discard the other. It's not ever a good idea to position:fix the wrapper, not sure why you did this. Also don't know why you had a display:block on the body.
DEMO: http://jsbin.com/zaguzo/1
Same html, same jQuery
You may also want to add a min-height, this is a demo of that: http://jsbin.com/wegow/1
The most relevant is the following but many other things need to be adjusted as well:
/* --- added --- */
#media (min-width:940px) {
#nav-sidebar {
top: 50%;
margin-top: -213px;
/*height of total of this div by 2 minus 1/2 height of header */
}
}
CSS
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body,
html {
margin: 0; /* -- added -- */
padding: 0; /* -- added -- */
}
body {
font-family: "Open Sans", sans-serif;
font-size: 12px;
font-weight: 400;
line-height: 1.42857;
color: black;
background-color: white;
}
ul {
margin: 0;
padding: 0;
}
/* -- wrapper not needed .wrapper {} -- */
#content {
position: relative;
z-index: 0;
padding:95px 20px 20px 20px;
transition: padding .5s ease-in-out;
}
.nav-sidebar-open #content {padding-left:100px;}
/* Header */
.header {
background-color: white;
height: 75px;
position: absolute;
top: 0;
z-index: 2;
box-shadow: 1px 0 1px #bdc3c7;
width: 100%;
}
#nav-button {
color: #555c60;
position: absolute;
left: 40px;
top: 35%;
-webkit-transition: -webkit-transform 0.2s;
-moz-transition: -moz-transform 0.2s;
transition: transform 0.2s;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
font-smoothing: antialiased;
}
#nav-button.nav-button-open {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
transform: rotate(90deg);
}
.logo {
position: absolute;
top: 50%;
left: 50%;
}
#account-control {
color: #555c60;
position: absolute;
right: 40px;
top: 35%;
}
/* Navigation Sidebar */
#nav-sidebar {
position: fixed;
top:75px;
left: -88px;
width: 80px;
background: none;
z-index: 1;
transition: all .5s ease-in-out;
}
.nav-sidebar-open #nav-sidebar {
left:0;
}
.nav-items {
position: relative;
box-shadow: 1px 1px 1px #bdc3c7;
}
.mainmenu ul {
list-style: none;
margin: 0;
padding: 0;
}
.mainmenu ul li {
display: block;
text-align: center;
}
.mainmenu ul li a {
position: relative;
display: block;
color: #555c60;
text-decoration: none;
font-size: 18px;
line-height: 80px;
height: 80px;
width: 100%;
background:#fff;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
/* --- added --- */
#media (min-width:940px) {
#nav-sidebar {
top: 50%;
margin-top: -213px;
/*height of total of this div by 2 minus 1/2 height of header */
}
}