We Keep Coding

Text appearing under meniu page CSS HTML

I created a HTML Website and I have a problem with it, i got a menu from the Internet and edited the website and now I realized that the menu items appear under the menu background.
I got the website online on andrei-marin.com you can check it out.
One thing i discovered is that if you put 'display: flex' in the header, the meniu works perfect but everything is out of the place..
I will add the code below.
// function to open/close nav
function toggleNav(){
// if nav is open, close it
if($("nav").is(":visible")){
$("nav").fadeOut();
$("button").removeClass("menu");
}
// if nav is closed, open it
else{
$("button").addClass("menu");
$("nav").fadeIn().css('display', 'flex');
}
}
// when clicking + or ☰ button
$("button").click(function(){
// when clicking ☰ button, open nav
if($("header").hasClass("open")){
toggleNav();
}
// when clicking + button, open header
else{
$("header").addClass("open");
}
});
// close nav
$("#nav-close").click(function(){
toggleNav();
});
// scroll to sections
$("nav li").click(function(){
// get index of clicked li and select according section
var index = $(this).index();
var target = $("content section").eq(index);
toggleNav();
$('html,body').delay(300).animate({
scrollTop: target.offset().top
}, 500);
});
/* GLOBAL STYLES */
body, html {
height: 100%;
margin: 0;
font-family: Arial;
background-color: lightgray;
}
.main_image{
padding-top:50%;
background-image: url('bg.jpg');
height:100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding-top: 0em;
display: flex;
justify-content: center;
}
/* DEMO-SPECIFIC STYLES */
.typewriter{
margin-top:25%;
font-size: 20px;
}
.typewriter h1 {
color: #fff;
overflow: hidden; /* Ensures the content is not revealed until the animation */
border-right: .15em solid orange; /* The typwriter cursor */
white-space: nowrap; /* Keeps the content on a single line */
margin: 0 auto; /* Gives that scrolling effect as the typing happens */
letter-spacing: .15em; /* Adjust as needed */
animation:
typing 3.5s steps(30, end),
blink-caret .5s step-end infinite;
}
/* The typing effect */
#keyframes typing {
from { width: 0 }
to { width: 100% }
}
/* The typewriter cursor effect */
#keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: white }
}
header {
width: 100%;
height: 100%;
top: 0;
left: 0;
flex-direction: column;
justify-content: center;
align-items: center;
}
header button {
position: relative;
z-index: 10;
}
header button {
font-family: "Font Awesome 5 Free";
font-weight: 900;
position: absolute;
bottom: 100px;
left: calc(50% - 60px);
width: 120px;
height: 50px;
border: 0;
box-shadow: 2px 1px 20px 0 rgba(0, 0, 0, 0.5);
border-radius: 10px;
cursor: pointer;
background: #fff;
font-size: 1em;
color: #09203f;
transition: all 0.8s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955), box-shadow 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
overflow: hidden;
}
header button:hover {
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.5);
}
header button:focus {
outline: 0;
}
header button:before, header button:after {
font-family: "Font Awesome 5 Free";
transition: all 0.8s cubic-bezier(0.645, 0.045, 0.355, 1);
top: 17px;
position: absolute;
}
header button:before {
content: "\f067";
opacity: 1;
left: 53px;
}
header button:after {
content: "\f0c9";
opacity: 0;
left: 0;
}
header.open button {
position: fixed;
left: 40px;
bottom: 40px;
width: 50px;
border-radius: 50%;
}
header.open button:before {
opacity: 0;
left: 100%;
}
header.open button:after {
opacity: 1;
left: 18px;
}
header.open button.menu {
width: 100%;
height: 100%;
bottom: 0;
left: 0;
border-radius: 0;
}
header.open button.menu:after {
left: -100%;
}
content section {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
text-transform: uppercase;
font-size: 1em;
letter-spacing: 2pt;
color: #fff;
}
nav {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
display: none;
}
nav ul {
list-style: none;
}
nav ul li {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
text-transform: uppercase;
line-height: 2;
letter-spacing: 1pt;
font-size: 2em;
color: #09203f;
animation: fadeDown .5s forwards;
opacity: 0;
cursor: pointer;
transform: translateY(-20px);
transition: all 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
nav ul li:hover {
text-shadow: 2px 1px 40px rgba(0, 0, 0, 0.5);
opacity: .8;
}
nav ul li:nth-child(1) {
animation-delay: 0.8s;
}
nav ul li:nth-child(2) {
animation-delay: 0.9s;
}
nav ul li:nth-child(3) {
animation-delay: 1s;
}
nav #nav-close {
position: fixed;
top: 40px;
right: 40px;
font-size: 1.5em;
cursor: pointer;
animation: fadeDown .5s forwards;
animation-delay: 1.1s;
opacity: 0;
color: #09203f;
transform: translateY(-20px);
}
#keyframes fadeDown {
0% {
opacity: 0;
transform: translateY(-20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Andrei Marin</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Montserrat:400,700'>
<link rel="stylesheet" href="master.css">
</head>
<body>
<header>
<div class="main_image">
<div class="typewriter">
<h1>Andrei Marin</h1>
</div>
<button></button>
</header>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
<div id="nav-close"><i class="fas fa-times"></i></div>
</nav>
<content>
<section>Home</section>
<section>About</section>
<section>Projects</section>
<section>Contact</section>
</content>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src="master.js"></script>
</body>
</html>

Try removing your z-index: 10; in header button{ (line 59) ?

changing css class and a jquery function when it reaches a div

I want to change a class from "class A" to "Class B" when it reaches DIV of "Class A" to "Class B"..
Here is the thing what I want, I have push menu when hamburger icon. The icon is generally in white background with black box shadow. My whole website background is dark. So it is perfect for dark background.
But I have few DIVs which are in white, when I reach that white DIV my menu is hardly visible.
So my question is I want to change the class of my menu from white to black when it reaches white background div. And I want to change the function of that menu as well in jquery. Because I have a "click" function to expand the menu.
Here is the HTML:
$('.nav-trigger').on('click', function() {
$(this).toggleClass('on');
$('.nav-menu').fadeToggle(200);
});
* {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
}
body {
margin: 0;
font-family: "Advent Pro", sans-serif;
overflow-x: hidden;
}
section {
width: 100%;
padding: 0 7%;
display: table;
margin: 0;
max-width: none;
background-color: #23222a;
height: 100vh;
color: #fff;
}
.content {
display: table-cell;
vertical-align: middle;
color: #fff;
}
.nav-trigger {
width: 30px;
height: 30px;
position: fixed;
top: 10px;
right: 10px;
z-index: 20;
cursor: pointer;
-webkit-transition: top .1s ease-in-out;
transition: top .1s ease-in-out;
}
.nav-trigger span {
display: block;
width: 100%;
height: 2px;
background: #fff;
margin: 7px auto;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.3);
}
.nav-trigger span:first-child {
top: 0;
left: 0;
}
.nav-trigger span:nth-child(2) {
width: 20px;
top: 10px;
left: 0;
}
.nav-trigger span:last-child {
top: 20px;
left: 0;
}
.nav-trigger .on {
top: 10px;
}
.nav-trigger.on span:first-child {
-webkit-transform: translateY(10px) rotate(45deg);
transform: translateY(10px) rotate(45deg);
}
.nav-trigger.on span:nth-child(2) {
-webkit-transform: translateX(50px);
transform: translateX(50px);
opacity: 0;
}
.nav-trigger.on span:last-child {
-webkit-transform: translateY(-8px) rotate(-45deg);
transform: translateY(-8px) rotate(-45deg);
}
.nav-trigger-dark {
width: 30px;
height: 30px;
position: fixed;
top: 10px;
right: 10px;
z-index: 20;
cursor: pointer;
-webkit-transition: top .1s ease-in-out;
transition: top .1s ease-in-out;
}
.nav-trigger-dark span {
display: block;
width: 100%;
height: 2px;
background: #000;
margin: 7px auto;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
box-shadow: 0 0 3px 1px rgba(255, 255, 255, 0.3);
}
.nav-trigger-dark span:first-child {
top: 0;
left: 0;
}
.nav-trigger-dark span:nth-child(2) {
width: 20px;
top: 10px;
left: 0;
}
.nav-trigger-dark span:last-child {
top: 20px;
left: 0;
}
.nav-trigger-dark .on {
top: 10px;
}
.nav-trigger-dark.on span:first-child {
-webkit-transform: translateY(10px) rotate(45deg);
transform: translateY(10px) rotate(45deg);
}
.nav-trigger-dark.on span:nth-child(2) {
-webkit-transform: translateX(50px);
transform: translateX(50px);
opacity: 0;
}
.nav-trigger-dark.on span:last-child {
-webkit-transform: translateY(-8px) rotate(-45deg);
transform: translateY(-8px) rotate(-45deg);
}
.nav-menu {
height: 100%;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: none;
z-index: 19;
overflow: hidden;
}
.nav-menu ul {
list-style-type: none;
padding: 0;
margin: 0;
width: 100%;
max-width: 100%;
text-align: center;
position: relative;
-webkit-transition: opacity .35s, visibility .35s, height .35s;
transition: opacity .35s, visibility .35s, height .35s;
}
.nav-menu ul a {
position: relative;
float: left;
margin: 0;
width: 25%;
height: 100vh;
text-align: center;
cursor: pointer;
background: #e65454;
color: #fff;
text-decoration: none;
}
#media (max-width: 30em) {
.nav-menu ul a {
width: 100%;
height: 25vh;
}
}
.nav-menu ul a li {
position: absolute;
text-transform: uppercase;
font-family: "Advent Pro", sans-serif;
top: 45%;
left: 0;
position: relative;
-webkit-animation: fadeInRight .5s ease forwards;
animation: fadeInRight .5s ease forwards;
}
#media (max-width: 30em) {
.nav-menu ul a li {
top: 25%;
}
}
.nav-menu ul a h2.mb {
-webkit-transition: -webkit-transform 0.35s;
transition: -webkit-transform 0.35s;
transition: transform 0.35s;
transition: transform 0.35s, -webkit-transform 0.35s;
margin-bottom: -20px;
font-size: 2.25rem;
/* 36/16 */
}
#media (max-width: 30em) {
.nav-menu ul a h2.mb {
font-size: 1.688rem;
/* 27/16 */
}
}
#media (min-width: 48em) and (max-width: 61.9375em) {
.nav-menu ul a h2.mb {
font-size: 2rem;
/* 32/16 */
margin-bottom: -13px;
}
}
.nav-menu ul a h2.mt {
-webkit-transition: -webkit-transform 0.35s;
transition: -webkit-transform 0.35s;
transition: transform 0.35s;
transition: transform 0.35s, -webkit-transform 0.35s;
margin-bottom: -73px;
font-size: 2.25rem;
/* 36/16 */
}
#media (max-width: 30em) {
.nav-menu ul a h2.mt {
font-size: 1.688rem;
/* 27/16 */
}
}
#media (min-width: 48em) and (max-width: 61.9375em) {
.nav-menu ul a h2.mt {
font-size: 2rem;
/* 32/16 */
}
}
.nav-menu ul a i {
font-style: normal;
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s;
-webkit-transform: translate3d(0, -30px, 0);
transform: translate3d(0, -30px, 0);
font-size: 1.875rem;
/* 30/16 */
}
#media (max-width: 30em) {
.nav-menu ul a i {
display: none;
}
}
.nav-menu ul a:hover {
background: #fff;
color: #e65454;
}
.nav-menu ul a:hover h2 {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.nav-menu ul a:hover i {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.nav-menu ul a.active {
background: #fff;
color: #e65454;
}
.nav-menu ul a.active:hover {
color: #000;
}
#-webkit-keyframes fadeInRight {
0% {
opacity: 0;
left: 20%;
}
100% {
opacity: 1;
left: 0;
}
}
#keyframes fadeInRight {
0% {
opacity: 0;
left: 20%;
}
100% {
opacity: 1;
left: 0;
}
}
.bgwhite {
background: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav-trigger">
<span></span><span></span><span></span>
</div>
<div class="nav-menu">
<ul>
<li><h2 class="mt">Home</h2><i>Go to</i></li>
<li><h2 class="mb">About</h2><i>Me</i></li>
<li><h2 class="mt">Work</h2><i>My</i></li>
<li><h2 class="mb">Contact</h2><i>Me</i></li>
</ul>
</div>
<section>
<div class="content">
</div>
</section>
<section class="bgwhite">
<div class="content">
</div>
</section>
as you can see in the snippit above when i reach the white background section, my hamburger menu trigger is hardly visible..
I have a css class with dark menu in the name of "nav-trigger dark".
Now I want to change that "nav-trigger" class to "nav-trigger-dark" class in that html and in that jquery script as well.

I believe I understood the effect you're trying to achieve.
In my solution I listen to the scroll event on the document and when I reach a new section I check whether that section contains a particular class, if it does I alter my navbar class to match the style I want to display.
Check this Fiddle for more information.
It goes like this:
HTML:
<nav>
<p class="js_header white">
Text
</p>
</nav>
<section class="bg-black"></section>
<section class="bg-white"></section>
<section class="bg-black"></section>
<section class="bg-white"></section>
CSS (the important part):
nav .white {
color: white;
}
nav .black {
color: black;
}
section.bg-black {
background-color: black;
}
section.bg-white {
background-color: white;
}
Javascript:
$(document).scroll(function (e) {
$.each($('section'), function (index, section) {
if($(this).scrollTop() >= section.getBoundingClientRect().top && $(this).scrollTop() <= section.getBoundingClientRect().bottom){
if ($(section).hasClass('bg-black')) {
$('.js_header').removeClass('black');
$('.js_header').addClass('white');
} else {
$('.js_header').removeClass('white');
$('.js_header').addClass('black');
}
}
});
});
UPDATE: Ok I got what you mean on your comments, in order to change the nav click behaviour when changing the class you need to add the listener to the body targeting the selector you want, instead of binding to the specific class from the beginning.
The JS would go like this for the changing the click behaviour:
$('body').on('click', '.nav-trigger', function() {
alert('light clicked');
$(this).toggleClass('on');
$('.nav-menu').fadeToggle(200);
});
$('body').on('click', '.nav-trigger-dark', function() {
alert('dark clicked');
$(this).toggleClass('on');
$('.nav-menu').fadeToggle(200);
});
I've altered your snippet to the following:
$('body').on('click', '.nav-trigger', function() {
alert('light clicked');
$(this).toggleClass('on');
$('.nav-menu').fadeToggle(200);
});
$('body').on('click', '.nav-trigger-dark', function() {
alert('dark clicked');
$(this).toggleClass('on');
$('.nav-menu').fadeToggle(200);
});
$(document).scroll(function (e) {
$.each($('section'), function (index, section) {
if($(this).scrollTop() >= section.getBoundingClientRect().top && $(this).scrollTop() <= section.getBoundingClientRect().bottom){
if ($(section).hasClass('bgwhite')) {
$('.js_navbar').removeClass('nav-trigger');
$('.js_navbar').addClass('nav-trigger-dark');
} else {
$('.js_navbar').removeClass('nav-trigger-dark');
$('.js_navbar').addClass('nav-trigger');
}
}
});
});
* {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
}
body {
margin: 0;
font-family: "Advent Pro", sans-serif;
overflow-x: hidden;
}
section {
width: 100%;
padding: 0 7%;
display: table;
margin: 0;
max-width: none;
background-color: #23222a;
height: 100vh;
color: #fff;
}
.content {
display: table-cell;
vertical-align: middle;
color: #fff;
}
.nav-trigger {
width: 30px;
height: 30px;
position: fixed;
top: 10px;
right: 10px;
z-index: 20;
cursor: pointer;
-webkit-transition: top .1s ease-in-out;
transition: top .1s ease-in-out;
}
.nav-trigger span {
display: block;
width: 100%;
height: 2px;
background: #fff;
margin: 7px auto;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.3);
}
.nav-trigger span:first-child {
top: 0;
left: 0;
}
.nav-trigger span:nth-child(2) {
width: 20px;
top: 10px;
left: 0;
}
.nav-trigger span:last-child {
top: 20px;
left: 0;
}
.nav-trigger .on {
top: 10px;
}
.nav-trigger.on span:first-child {
-webkit-transform: translateY(10px) rotate(45deg);
transform: translateY(10px) rotate(45deg);
}
.nav-trigger.on span:nth-child(2) {
-webkit-transform: translateX(50px);
transform: translateX(50px);
opacity: 0;
}
.nav-trigger.on span:last-child {
-webkit-transform: translateY(-8px) rotate(-45deg);
transform: translateY(-8px) rotate(-45deg);
}
.nav-trigger-dark {
width: 30px;
height: 30px;
position: fixed;
top: 10px;
right: 10px;
z-index: 20;
cursor: pointer;
-webkit-transition: top .1s ease-in-out;
transition: top .1s ease-in-out;
}
.nav-trigger-dark span {
display: block;
width: 100%;
height: 2px;
background: #000;
margin: 7px auto;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
box-shadow: 0 0 3px 1px rgba(255, 255, 255, 0.3);
}
.nav-trigger-dark span:first-child {
top: 0;
left: 0;
}
.nav-trigger-dark span:nth-child(2) {
width: 20px;
top: 10px;
left: 0;
}
.nav-trigger-dark span:last-child {
top: 20px;
left: 0;
}
.nav-trigger-dark .on {
top: 10px;
}
.nav-trigger-dark.on span:first-child {
-webkit-transform: translateY(10px) rotate(45deg);
transform: translateY(10px) rotate(45deg);
}
.nav-trigger-dark.on span:nth-child(2) {
-webkit-transform: translateX(50px);
transform: translateX(50px);
opacity: 0;
}
.nav-trigger-dark.on span:last-child {
-webkit-transform: translateY(-8px) rotate(-45deg);
transform: translateY(-8px) rotate(-45deg);
}
.nav-menu {
height: 100%;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: none;
z-index: 19;
overflow: hidden;
}
.nav-menu ul {
list-style-type: none;
padding: 0;
margin: 0;
width: 100%;
max-width: 100%;
text-align: center;
position: relative;
-webkit-transition: opacity .35s, visibility .35s, height .35s;
transition: opacity .35s, visibility .35s, height .35s;
}
.nav-menu ul a {
position: relative;
float: left;
margin: 0;
width: 25%;
height: 100vh;
text-align: center;
cursor: pointer;
background: #e65454;
color: #fff;
text-decoration: none;
}
#media (max-width: 30em) {
.nav-menu ul a {
width: 100%;
height: 25vh;
}
}
.nav-menu ul a li {
position: absolute;
text-transform: uppercase;
font-family: "Advent Pro", sans-serif;
top: 45%;
left: 0;
position: relative;
-webkit-animation: fadeInRight .5s ease forwards;
animation: fadeInRight .5s ease forwards;
}
#media (max-width: 30em) {
.nav-menu ul a li {
top: 25%;
}
}
.nav-menu ul a h2.mb {
-webkit-transition: -webkit-transform 0.35s;
transition: -webkit-transform 0.35s;
transition: transform 0.35s;
transition: transform 0.35s, -webkit-transform 0.35s;
margin-bottom: -20px;
font-size: 2.25rem;
/* 36/16 */
}
#media (max-width: 30em) {
.nav-menu ul a h2.mb {
font-size: 1.688rem;
/* 27/16 */
}
}
#media (min-width: 48em) and (max-width: 61.9375em) {
.nav-menu ul a h2.mb {
font-size: 2rem;
/* 32/16 */
margin-bottom: -13px;
}
}
.nav-menu ul a h2.mt {
-webkit-transition: -webkit-transform 0.35s;
transition: -webkit-transform 0.35s;
transition: transform 0.35s;
transition: transform 0.35s, -webkit-transform 0.35s;
margin-bottom: -73px;
font-size: 2.25rem;
/* 36/16 */
}
#media (max-width: 30em) {
.nav-menu ul a h2.mt {
font-size: 1.688rem;
/* 27/16 */
}
}
#media (min-width: 48em) and (max-width: 61.9375em) {
.nav-menu ul a h2.mt {
font-size: 2rem;
/* 32/16 */
}
}
.nav-menu ul a i {
font-style: normal;
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s;
-webkit-transform: translate3d(0, -30px, 0);
transform: translate3d(0, -30px, 0);
font-size: 1.875rem;
/* 30/16 */
}
#media (max-width: 30em) {
.nav-menu ul a i {
display: none;
}
}
.nav-menu ul a:hover {
background: #fff;
color: #e65454;
}
.nav-menu ul a:hover h2 {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.nav-menu ul a:hover i {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.nav-menu ul a.active {
background: #fff;
color: #e65454;
}
.nav-menu ul a.active:hover {
color: #000;
}
#-webkit-keyframes fadeInRight {
0% {
opacity: 0;
left: 20%;
}
100% {
opacity: 1;
left: 0;
}
}
#keyframes fadeInRight {
0% {
opacity: 0;
left: 20%;
}
100% {
opacity: 1;
left: 0;
}
}
.bgwhite {
background: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav-trigger js_navbar">
<span></span><span></span><span></span>
</div>
<div class="nav-menu">
<ul>
<li><h2 class="mt">Home</h2><i>Go to</i></li>
<li><h2 class="mb">About</h2><i>Me</i></li>
<li><h2 class="mt">Work</h2><i>My</i></li>
<li><h2 class="mb">Contact</h2><i>Me</i></li>
</ul>
</div>
<section>
<div class="content">
</div>
</section>
<section class="bgwhite">
<div class="content">
</div>
</section>

You can calculate the offset of white elements and then compare that with the scroll value. Then if you are on that divs, you change your css :
$(function() {
var oTop = $('#blueDiv').offset().top - $('#blueDiv').outerHeight() ;
$(window).scroll(function(){
var pTop = $('body').scrollTop();
//console.log( pTop + ' - ' + oTop );
if( pTop > oTop && pTop<oTop + $('#blueDiv').outerHeight() + $('#navbar').outerHeight() ){
white();
}else {
blue();
}
});
});
function white(){
document.getElementById("navbar").className = "";
document.getElementById("navbar").className = "navbar-white";
//Add your code here
}
function blue(){
document.getElementById("navbar").className = "";
document.getElementById("navbar").className = "navbar-blue";
//Add your code here
}
#navbar {
position : fixed;
top : 0px;
height : 30px;
width:100%;
opacity:0.7;
}
#blueDiv {
background-color : blue;
height:30px;
}
.navbar-white {
background-color: white;
}
.navbar-blue {
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navbar" class="navbar-blue">
menu
</div>
<p> s</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> s2</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> s3</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> s4</p>
<p> </p>
<p> </p>
<div id="blueDiv">counter...</div>
<p> s</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> s2</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> s3</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> s4</p>
<p> </p>
<p> </p>

Disable CSS animation effect in IE

I am using a cool "pop" hover effect in CSS which looks great in Chrome.
However, in Internet Explorer 11 (and below) the box area goes blank on hover and then black.
Is there a way to disable this in IE or at least fix the glitch where it disappears briefly?
Demo: http://jsfiddle.net/0hLLkyh3/
#import url(http://fonts.googleapis.com/css?family=Roboto);
h2 {
font-size: 18px;
margin-bottom: 20px;
line-height: 28px;
margin-top: 0;
font-weight: 900;
}
.effects {} body {
margin: 0 auto;
max-width: 800px;
padding: 40px 20px 20px 20px;
font-family: sans-serif;
color: #333;
line-height: 140%;
}
img {
border: none;
}
small {
display: block;
}
p,
[class^="hvr-"] {
font-family: 'Roboto', sans-serif;
}
[class^="hvr-"] {
/*display: inline-block;*/
/*vertical-align: middle;*/
margin: .4em;
padding: 1em;
cursor: pointer;
background: #e1e1e1;
text-decoration: none;
color: #666;
/* Prevent highlight colour when element is tapped */
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.aligncenter {
text-align: center;
}
a {
color: #2098D1;
text-decoration: none;
}
.mt-30 {
margin-top: 30px;
}
a:hover {
background: black
}
/*!
* Hover.css (http://ianlunn.github.io/Hover/)
* Version: 2.0.2
* Author: Ian Lunn #IanLunn
* Author URL: http://ianlunn.co.uk/
* Github: https://github.com/IanLunn/Hover
* Made available under a MIT License:
* http://www.opensource.org/licenses/mit-license.php
* Hover.css Copyright Ian Lunn 2014. Generated with Sass.
*/
/* 2D TRANSITIONS */
/* Pop */
#-webkit-keyframes web-hvr-pop {
50% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
}
#keyframes hvr-pop {
50% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
}
.hvr-pop {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
}
.hvr-pop:hover,
.hvr-pop:focus,
.hvr-pop:active {
-webkit-animation-name: web-hvr-pop;
animation-name: hvr-pop;
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
<div class="effects">
<a class="hvr-pop" href="#">Pop</a>
</div>

-ms-animation-name:none; would fix that
#import url(http://fonts.googleapis.com/css?family=Roboto);
h2{
font-size:18px;
margin-bottom: 20px;
line-height: 28px;
margin-top:0;
font-weight: 900;
}
.effects{
}
body {
margin: 0 auto;
max-width: 800px;
padding: 40px 20px 20px 20px;
font-family: sans-serif;
color: #333;
line-height: 140%;
}
img {
border: none;
}
small {
display: block;
}
p, [class^="hvr-"] {
font-family:'Roboto', sans-serif;
}
[class^="hvr-"] {
/*display: inline-block;*/
/*vertical-align: middle;*/
margin: .4em;
padding: 1em;
cursor: pointer;
background: #e1e1e1;
text-decoration: none;
color: #666;
/* Prevent highlight colour when element is tapped */
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.aligncenter {
text-align: center;
}
a {
color: #2098D1;
text-decoration: none;
}
.mt-30{
margin-top:30px;
}
a:hover {
background:black
}
/*!
* Hover.css (http://ianlunn.github.io/Hover/)
* Version: 2.0.2
* Author: Ian Lunn #IanLunn
* Author URL: http://ianlunn.co.uk/
* Github: https://github.com/IanLunn/Hover
* Made available under a MIT License:
* http://www.opensource.org/licenses/mit-license.php
* Hover.css Copyright Ian Lunn 2014. Generated with Sass.
*/
/* 2D TRANSITIONS */
/* Pop */
#-webkit-keyframes web-hvr-pop {
50% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
}
#keyframes hvr-pop {
50% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
}
.hvr-pop {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
}
.hvr-pop:hover, .hvr-pop:focus, .hvr-pop:active {
-webkit-animation-name: web-hvr-pop;
-moz-animation-name: web-hvr-pop;
animation-name: hvr-pop;
-ms-animation-name:none;
-moz-animation-duration: 0.3s;
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
<div class="effects">
<a class="hvr-pop" href="#">Pop</a>
</div>

How can I have something like a message variable for a popup

I am looking for a way to get and display a message variable using jQuery and javascript. This is my situation: I have a code for a popup, but I don't want to have to copy and paste it for every single situation, and I only want the message to change.
This is the code I have to make one popup work:
jQuery(document).ready(function($){
//open popup
$('.cd-popup-trigger').on('click', function(event){
event.preventDefault();
$('.cd-popup').addClass('is-visible');
});
//close popup
$('.cd-popup').on('click', function(event){
if( $(event.target).is('.cd-popup-close') || $(event.target).is('.cd-popup') ) {
event.preventDefault();
$(this).removeClass('is-visible');
}
});
//close popup when clicking the esc keyboard button
$(document).keyup(function(event){
if(event.which=='27'){
$('.cd-popup').removeClass('is-visible');
}
});
});
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, main {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* --------------------------------
Primary style
-------------------------------- */
html * {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-size: 100%;
font-family: "Lato", sans-serif;
color: #8f9cb5;
background-color: #ffd88f;
}
a {
color: #35a785;
text-decoration: none;
}
/* --------------------------------
Modules - reusable parts of our design
-------------------------------- */
.img-replace {
/* replace text with an image */
display: inline-block;
overflow: hidden;
text-indent: 100%;
color: transparent;
white-space: nowrap;
}
/* --------------------------------
xnugget info
-------------------------------- */
.cd-nugget-info {
text-align: center;
position: absolute;
width: 100%;
height: 50px;
line-height: 50px;
bottom: 0;
left: 0;
}
.cd-nugget-info a {
position: relative;
font-size: 14px;
color: #5e6e8d;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
transition: all 0.2s;
}
.no-touch .cd-nugget-info a:hover {
opacity: .8;
}
.cd-nugget-info span {
vertical-align: middle;
display: inline-block;
}
.cd-nugget-info span svg {
display: block;
}
.cd-nugget-info .cd-nugget-info-arrow {
fill: #5e6e8d;
}
/* --------------------------------
Main components
-------------------------------- */
header {
height: 200px;
line-height: 200px;
text-align: center;
background-color: #5e6e8d;
color: #FFF;
}
header h1 {
font-size: 20px;
font-size: 1.25rem;
}
.cd-popup-trigger {
display: block;
width: 170px;
height: 50px;
line-height: 50px;
margin: 3em auto;
text-align: center;
color: #FFF;
font-size: 14px;
font-size: 0.875rem;
font-weight: bold;
text-transform: uppercase;
border-radius: 50em;
background: #35a785;
box-shadow: 0 3px 0 rgba(0, 0, 0, 0.07);
}
#media only screen and (min-width: 1170px) {
.cd-popup-trigger {
margin: 6em auto;
}
}
/* --------------------------------
xpopup
-------------------------------- */
.cd-popup {
position: fixed;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: rgba(94, 110, 141, 0.9);
opacity: 0;
visibility: hidden;
-webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s;
-moz-transition: opacity 0.3s 0s, visibility 0s 0.3s;
transition: opacity 0.3s 0s, visibility 0s 0.3s;
}
.cd-popup.is-visible {
opacity: 1;
visibility: visible;
-webkit-transition: opacity 0.3s 0s, visibility 0s 0s;
-moz-transition: opacity 0.3s 0s, visibility 0s 0s;
transition: opacity 0.3s 0s, visibility 0s 0s;
}
.cd-popup-container {
position: relative;
width: 90%;
max-width: 400px;
margin: 4em auto;
background: #FFF;
border-radius: .25em .25em .4em .4em;
text-align: center;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
-webkit-transform: translateY(-40px);
-moz-transform: translateY(-40px);
-ms-transform: translateY(-40px);
-o-transform: translateY(-40px);
transform: translateY(-40px);
/* Force Hardware Acceleration in WebKit */
-webkit-backface-visibility: hidden;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.cd-popup-container p {
padding: 3em 1em;
}
.cd-popup-container .cd-buttons:after {
content: "";
display: table;
clear: both;
}
.cd-popup-container .cd-buttons li {
float: left;
width: 50%;
list-style: none;
}
.cd-popup-container .cd-buttons a {
display: block;
height: 60px;
line-height: 60px;
text-transform: uppercase;
color: #FFF;
-webkit-transition: background-color 0.2s;
-moz-transition: background-color 0.2s;
transition: background-color 0.2s;
}
.cd-popup-container .cd-buttons li:first-child a {
background: #fc7169;
border-radius: 0 0 0 .25em;
}
.no-touch .cd-popup-container .cd-buttons li:first-child a:hover {
background-color: #fc8982;
}
.cd-popup-container .cd-buttons li:last-child a {
background: #b6bece;
border-radius: 0 0 .25em 0;
}
.no-touch .cd-popup-container .cd-buttons li:last-child a:hover {
background-color: #c5ccd8;
}
.cd-popup-container .cd-popup-close {
position: absolute;
top: 8px;
right: 8px;
width: 30px;
height: 30px;
}
.cd-popup-container .cd-popup-close::before, .cd-popup-container .cd-popup-close::after {
content: '';
position: absolute;
top: 12px;
width: 14px;
height: 3px;
background-color: #8f9cb5;
}
.cd-popup-container .cd-popup-close::before {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
left: 8px;
}
.cd-popup-container .cd-popup-close::after {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
right: 8px;
}
.is-visible .cd-popup-container {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
#media only screen and (min-width: 1170px) {
.cd-popup-container {
margin: 8em auto;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
View Pop-up
<div class="cd-popup" role="alert">
<div class="cd-popup-container">
<p>Are you sure you want to delete this element?</p>
<ul class="cd-buttons">
<li>Yes</li>
<li>No</li>
</ul>
Close
</div> <!-- cd-popup-container -->
</div> <!-- cd-popup -->
In sort I need to somehow get the message to display depending on which popup button I click but without having to rewrite the jQuery and Html changing the classes of everything.
Thank you. Let me now if I wasn't clear enough.

Trigger this when on click:
$('.cd-popup-container p').text('New Message');
Edit:
Html
<div id="Delete1">Yes</div>
<div id="Nothing">No</div>
Javascript
$('#Delete1').click(function(){
$('.cd-popup-container p').text('Message 1');
});

Images adapting to window re-size too early

I have this divider that has inside it images. When i re-size horizontally the window starting from the right to the left, the images starts going down before the right-end of the browser reach it. Any help to make the images move down each other when the right-end of the browser reach it?
JSFIDDLE: https://jsfiddle.net/prtdaay1/2/
CSS:
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
ol, ul {
list-style: none;
}
html {
background-color: #FFFFFF;
-webkit-font-smoothing: antialiased;
}
body {
background-color: #ffffff;
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 1.5em;
color: #545454;
background-color: #ffffff;
text-align: center;
max-width:1600px;
overflow: hidden;
overflow-y: scroll;
}
h1, h2, h3, h4, h5, h6 {
color: #222;
font-weight: 600;
line-height: 1.3em;
}
h2 {
margin-top: 1.3em;
}
.custom-class {
text-align: right;
margin-top:-130px;
margin-right: 20px;
}
a {
color: #000000;
text-decoration: none;
}
b, strong {
font-weight: 600;
}
samp {
display: none;
}
img {
-webkit-animation: colorize 2s cubic-bezier(0, 0, .78, .36) 1;
animation: colorize 2s cubic-bezier(0, 0, .78, .36) 1;
background: transparent;
border-style:none;
border-radius: 4px;
display: block;
margin: 1.3em auto;
max-width: 95%;
}
.logo {
text-align: center;
margin-top:40px;
}
li {
list-style-type: none;
font-size: 1.5em;
padding-top: 8px;
text-align:center;
border-style: none;
}
.menu li {
position: relative;
top: 180px;
left: 0px;
}
#item7 {
transition: opacity .8s, left .8s ease-out;
-moz-transition: opacity .8s, left .8s ease-out;
-webkit-transition: opacity .8s, left .8s ease-out;
-o-transition: opacity .8s, left .8s ease-out;
margin-left:105px
}
#item6 {
transition: opacity 1s, left 1s ease-out;
-moz-transition: opacity 1s, left 1s ease-out;
-webkit-transition: opacity 1s, left 1s ease-out;
-o-transition: opacity 1s, left 1s ease-out;
margin-left: 95px;
}
#item5 {
transition: opacity 1.2s, left 1.2s ease-out;
-moz-transition: opacity 1.2s, left 1.2s ease-out;
-webkit-transition: opacity 1.2s, left 1.2s ease-out;
-o-transition: opacity 1.2s, left 1.2s ease-out;
margin-left: 60px;
}
#item4 {
transition: opacity 1.4s, left 1.4s ease-out;
-moz-transition: opacity 1.4s, left 1.4s ease-out;
-webkit-transition: opacity 1.4s, left 1.4s ease-out;
-o-transition: opacity 1.4s, left 1.4s ease-out;
margin-left: 123px;
}
#item3 {
transition: opacity 1.6s, left 1.6s ease-out;
-moz-transition: opacity 1.6s, left 1.6s ease-out;
-webkit-transition: opacity 1.6s, left 1.6s ease-out;
-o-transition: opacity 1.6s, left 1.6s ease-out;
margin-left: 113px;
}
#item2 {
transition: opacity 1.8s, left 1.8s ease-out;
-moz-transition: opacity 1.8s, left 1.8s ease-out;
-webkit-transition: opacity 1.8s, left 1.8s ease-out;
-o-transition: opacity 1.8s, left 1.8s ease-out;
margin-left: 130px;
}
#item1 {
transition: opacity 2s, left 2s ease-out;
-moz-transition: opacity 2s, left 2s ease-out;
-webkit-transition: opacity 2s, left 2s ease-out;
-o-transition: opacity 2s, left 2s ease-out;
margin-left: 117px;
}
#item1>button{background:none;border:none;outline:none;cursor:pointer;font-size: 1em;}
#item2>button{background:none;border:none;outline:none;cursor:pointer;font-size: 1em;}
#item3>button{background:none;border:none;outline:none;cursor:pointer;font-size: 1em;}
#item4>button{background:none;border:none;outline:none;cursor:pointer;font-size: 1em;}
#item5>button{background:none;border:none;outline:none;cursor:pointer;font-size: 1em;}
#item6>button{background:none;border:none;outline:none;cursor:pointer;font-size: 1em;}
#item7>button{background:none;border:none;outline:none;cursor:pointer;font-size: 1em;}
.permahover li {
opacity: 1;
left: -33%;
}
.headlines li {
font-size:1.5em;
color:#000000;
transition: all 0.5s;
cursor: pointer;
}
.headlines:hover li, .headlines.active li {
/* PARENT HOVER */
opacity:0.4;
cursor: pointer;
/* Dim all */
}
.headlines li:hover, .headlines li.active {
/* SINGLE HOVER */
opacity: 1;
/* Max one */
color:#000000;
cursor: pointer;
}
#first
{ display: none;
width: 50%;
height: 220px;
top: 20%;
margin: auto;
position: relative;
}
#first img
{
height: 100px;
width: 100px;
float:left;
margin-right: 5%;
cursor: pointer;
}
#second
{
width: 50%;
height: 220px;
margin:auto;
padding-left: 170px;
margin-top: -215px;
}
#second img
{
height: 100px;
width: 100px;
float:left;
margin-right: 5%;
cursor: pointer;
}
#third
{
display: none;
width: 50%;
height: 220px;
margin:auto;
padding-left: 150px;
margin-top: -215px;
}
#third img
{
height: 100px;
width: 100px;
float:left;
margin-right: 5%;
cursor: pointer;
}
#-webkit-keyframes colorize {
0% {
-webkit-filter: grayscale(100%);
}
100% {
-webkit-filter: grayscale(0%);
}
}
#keyframes colorize {
0% {
filter: grayscale(100%);
}
100% {
filter: grayscale(0%);
}
}
}
<!-- slider css-->
#wrapper {
width: 10%;
padding: px 0;
}
#slider-container {
padding: 20px 50px;
height: 300px;
top:-18%;
left: 50px;
width: 700px;
overflow: hidden;
position: relative;
}
.slider-view-area {
overflow: hidden;
max-height: 300px;
}
#nav p {
position: absolute;
top: 40px;
left: 0px;
cursor:pointer;
color:grey;
}
#prev {
margin-left: 520px;
font-size: 30px;
}
#next {
right: -440px;
font-size: 30px;
}
#mask {
width: 5000px;
height: 100%;
}
.item {
width: 1200px;
height: 100%;
float: left;
}
.content img {
height: 100px;
width: 17%;
float:left;
margin-right: 10px;
margin-bottom: 10px;
cursor: pointer;
}
.content {
width: 50%;
height: 220px;
top: 30px;
left:
margin: auto;
position: relative;
}
.content a {
position: relative;
top: -17px;
left: 170px;
}
.selected {
background: #fff;
font-weight: 700;
}
.clear {
clear:both;
}
.hidden {
display: none;
}

Try to fix these id's style
#second {
height: 220px;
margin: -215px auto auto;
padding-left: 170px;
width: 50%;
}
#third {
display: none;
height: 220px;
margin: -215px auto auto;
padding-left: 150px;
width: 50%;
}
Instead of that use max width and and avoid padding you can use margin: auto to show in center.