Develop Reference

Waypoints not working properly with my sidenav

I'm attempting to make a side nav on my site which adds the "active" class to it's four buttons but I cannot seem to make it work properly.
I've successfully added waypoints to the code but they always seem to be a little off and it takes a bit of extra scrolling from the user to activate the waypoint. I've also tried to follow the {offset} rules in the documentation but to no veil. They either stop working properly from last to first or they stop doing so from first to last.
In order to make the sidenav work, I've split the page in columns, as shown in the CSS below. Feel free to provide insight on the code, as this is a learning exercise and I KNOW my code is pretty dirty at the moment (particularly Javascript)
The side nav:
<div class="sidebar verticalized" id="sidebar-verticalized">
<ul id="sidenav" class="side nav-fixed hide-on-med-and-down">
<li class="side-link">
<a class="side-link-first link1" onclick="clickOne()" href="#">01</a>
</li>
<li class="side-link">
02
</li>
<li class="side-link">
03
</li>
<li class="side-link">
04
</li>
</ul>
</div>
The CSS:
html {
overflow: scroll;
overflow-x: hidden;
}
::-webkit-scrollbar {
width: 0px; /* remove scrollbar space */
background: transparent; /* optional: just make scrollbar invisible */
}
.page{
display: grid;
grid-template-columns: 300px auto;
}
.sidebar{
position:fixed;
width:300px;
}
.main{
grid-column-start:2;
}
.verticalized {
margin: 0px;
padding:0px;
float: left;
top: 50%;
transform: translateY(-50%) translateX(-50%);
left:9%;
}
my mess of JS (each section is declared below):
var $section1 = $('.header');
var $section2 = $('.portfolio');
var $section3 = $('.what-we-do');
var $section4 = $('.contact');
var $link1 = $('.link1');
var $link2 = $('.link2');
var $link3 = $('.link3');
var $link4 = $('.link4');
$section1.waypoint(function (){
$link1.addClass('active');
$link2.removeClass('active');
$link3.removeClass('active');
$link4.removeClass('active');
});
$section2.waypoint(function(){
$link1.removeClass('active');
$link2.addClass('active');
$link3.removeClass('active');
$link4.removeClass('active');
});
$section3.waypoint(function(){
$link1.removeClass('active');
$link2.removeClass('active');
$link3.addClass('active');
$link4.removeClass('active');
});
$section4.waypoint(function(){
$link1.removeClass('active');
$link2.removeClass('active');
$link3.removeClass('active');
$link4.addClass('active');
});
What I've tried so far:
Offset: bottom-in-view (sections are sometimes too large and therefore the old active element remains)
Offset: +/- x% (This fixes the issue from one end but not the other one: I could be going from 1 to 4 on links and it works, but 4 to 1 is broken and vice versa)
Any and all advice/tips are welcome. I'm trying to imitate the bootstrap navbar behaviour with active items for each section.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
#import url('https://fonts.googleapis.com/css?family=Varela+Round');
html, body {
overflow-x: hidden;
height: 100%;
}
body {
background: #fff;
padding: 0;
margin: 0;
font-family: 'Varela Round', sans-serif;
}
.header {
display: block;
margin: 0 auto;
width: 100%;
max-width: 100%;
box-shadow: none;
background-color: #FC466B;
position: fixed;
height: 60px!important;
overflow: hidden;
z-index: 10;
}
.main {
margin: 0 auto;
display: block;
height: 100%;
margin-top: 60px;
}
.mainInner{
display: table;
height: 100%;
width: 100%;
text-align: center;
}
.mainInner div{
display:table-cell;
vertical-align: middle;
font-size: 3em;
font-weight: bold;
letter-spacing: 1.25px;
}
#sidebarMenu {
height: 100%;
position: fixed;
left: 0;
width: 250px;
margin-top: 60px;
transform: translateX(-250px);
transition: transform 250ms ease-in-out;
background:#414956;
}
.sidebarMenuInner{
margin:0;
padding:0;
border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.sidebarMenuInner li{
list-style: none;
color: #fff;
text-transform: uppercase;
font-weight: bold;
padding: 20px;
cursor: pointer;
border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.sidebarMenuInner li span{
display: block;
font-size: 14px;
color: rgba(255, 255, 255, 0.50);
}
.sidebarMenuInner li a{
color: #fff;
text-transform: uppercase;
font-weight: bold;
cursor: pointer;
text-decoration: none;
}
input[type="checkbox"]:checked ~ #sidebarMenu {
transform: translateX(0);
}
input[type=checkbox] {
transition: all 0.3s;
box-sizing: border-box;
display: none;
}
.sidebarIconToggle {
transition: all 0.3s;
box-sizing: border-box;
cursor: pointer;
position: absolute;
z-index: 99;
height: 100%;
width: 100%;
top: 22px;
left: 15px;
height: 22px;
width: 22px;
}
.spinner {
transition: all 0.3s;
box-sizing: border-box;
position: absolute;
height: 3px;
width: 100%;
background-color: #fff;
}
.horizontal {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px;
}
.diagonal.part-1 {
position: relative;
transition: all 0.3s;
box-sizing: border-box;
float: left;
}
.diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .horizontal {
transition: all 0.3s;
box-sizing: border-box;
opacity: 0;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-1 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(135deg);
margin-top: 8px;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(-135deg);
margin-top: -9px;
}
</style>
<body>
<div class="header"></div>
<input type="checkbox" class="openSidebarMenu" id="openSidebarMenu">
<label for="openSidebarMenu" class="sidebarIconToggle">
<div class="spinner diagonal part-1"></div>
<div class="spinner horizontal"></div>
<div class="spinner diagonal part-2"></div>
</label>
<div id="sidebarMenu">
<ul class="sidebarMenuInner">
<li>Jelena Jovanovic</li>
<li>Company</li>
<li>Instagram</li>
<li>Twitter</li>
<li>YouTube</li>
<li>Linkedin</li>
</ul>
</div>
<div id='center' class="main center">
<div class="mainInner">
<div>PURE CSS SIDEBAR TOGGLE MENU</div>
</div>
<div class="mainInner">
<div>PURE CSS SIDEBAR TOGGLE MENU</div>
</div>
<div class="mainInner">
<div>PURE CSS SIDEBAR TOGGLE MENU</div>
</div>
</div>
</body>`enter code here`

Menu trigger onclick

I want to create a menu for one page site but I'm not very good at JavaScript and I have this code for open and close the menu but I want it to open like with a easy transition because but it just appear.
How can I add fade-in-out or something like that:
<script>
function w3_open() {
document.getElementById("mySidebar").style.visibility = "visible";
}
function w3_close() {
document.getElementById("mySidebar").style.visibility = "hidden";
}
</script>
w3-button{
position:fixed;
width: 42px;
height: 42px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
line-height:1.1;
text-align:center;
top:6.5px;
left: 8px;
background-color: #f2bd66;
z-index:11;
background-position:center;
cursor: pointer;
color: white;
margin-top: 0.7%;
margin-left: 0.7%;
}
.w3-button{
width: 42px;
height: 42px;
margin-top: 0.7%;
margin-left: 0.7%;
}
.w3-button::before {
content:"☰";
font-size:32px;
color:white;
text-align: center;
}
.w3-button:hover{
opacity: 0.6;
}
.w3-sidebar {
position: absolute;
z-index:12;
width:188px;
left: -188px;
line-height:2;
position:fixed;
border-bottom:.5px solid rgba(204, 158, 90, 1);
border-top:.5px solid rgba(204, 158, 90, 1);
background-color:#f2bd66;
font-family: 'Libre Baskerville', serif;
font-weight: 400;
text-align:center;
color: #5b5f5e;
height: 100vh;
border-right:4px solid #af874b;
}
.w3-bar-item {
width: 188px;
margin:0 auto;
line-height:2;
border-bottom:.5px solid rgba(204, 158, 90, 1);
border-top:.5px solid rgba(204, 158, 90, 1);
background-color:transparent;
font-family: 'Libre Baskerville', serif;
font-weight: 400;
text-align:center;
color: #5b5f5e;
float: left;
}
#close-menu{
background-color: #5b5f5e;
color: white;
}
#close-menu:hover{
opacity: 0.7;
}
.nav a:hover {
background-color: #292446;opacity: 0.9;
color: white;
}
<div class="w3-sidebar " style="visibility:hidden" id="mySidebar" >
<button onclick="w3_close()" class="w3-bar-item w3-large" id="close-menu"> Close ×</button>
<nav class="nav">
Inicio
Sobre mí
Galería
Booktubers GT
Recursos E-stela
Redes Sociales
</nav>
</div>
<div class="w3-teal">
<button class="w3-button" onclick="w3_open()"></button>
</div>

If you don't know how to do that in js, you can make it in pure css :
Toggle class on HTML element without jQuery
If you still want to use js to achive that, you can toggle a class on your menu container when the button is clicked, and make transition with css based on the toggled class. If you use jquery you can do that with simple jquery fade or slide function :
<script>
$('#my-menu-button').click(function(){
$('#my-menu').slideToggle();
})
</script>

I wrote a demo for you:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<style>
.test {
width: 100px;
height: 100px;
background: #000;
display: block;
transition: 1s;
opacity: 0
}
.active {
opacity: 1
}
</style>
</head>
<body>
<div class="test"></div>
<button onclick="show()">show</button>
<button onclick="hide()">hide</button>
<script>
var test = document.querySelector('.test')
function show () {
test.className = 'test active'
}
function hide () {
test.className = 'test'
}
</script>
</body>
</html>

How to create divs based on number present in input field on button click, ONLY ONCE

what i am trying to do is as follows:
Get data from json file on button click.
Show the data in separate boxes,different for each element of array. For example, if my json gives me 3 rows of data, there should be 3 boxes.
Place the boxes in a grid of 2X2.
Exactly like in this imageWireframe for foodcourts
Step 1 i achieved easily. I can also generate boxes on button click but not as shown in image. Also, each time the button is clicked, it adds to the div.I would really appreciate some help. Here is my code:
<!doctype html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<title>Untitled Document
</title>
</head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
</script>
<style>
.shape{
text-align:center;
background-image:url(dark-triangles.png);
width:200px;
height:60px;
line-height:60px;
color:white;
margin:10px;
position:relative;
transition-property: background;
transition-duration: -10s;
transition-timing-function: linear;
}
.shape:before{
content:"";
width:0px;
height:0px;
border-top:60px solid rgba(107,255,55,105);
border-left:60px solid transparent;
position:absolute;
right:0%;
top:0px;
}
.shape:hover{
background: #ff7b29;
cursor: pointer;
}
body {
font-family: "Lato", sans-serif;
}
.sidenav {
height: 100%;
width: 250px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-image: url("doodles.png");
background-color: #cccccc;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
/*.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}*/
/*.sidenav a:hover, .offcanvas a:focus{
color: #f1f1f1;
}*/
/*.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}*/
/*#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}*/
.div1
{
width:400px;
height:auto;
background:none;
margin:auto;
border:2px solid black;
margin-top:70px;
}
.divcontent
{
width:auto;
height:auto;
background:none;
margin:auto;
border:2px solid black;
margin-top:70px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<body ng-controller="myController" background="cloudy-day.png" style="color:black;">
<div id="mySidenav" class="sidenav">
<!-- ×!-->
<input value={{len}}>
</input>
<button class="shape" id="orders" >
Orders
<button class="shape" id="users">
Users
<button class="shape" ng-click="fcclicked()">
Food Courts
<button class="shape">
Delivery Locations
</div>
<div class="div1"; id="d1">
<p align="center">Click one of the buttons to load content.....
</p>
<div ng-repeat="x in names">
{{ x.id}}
{{ x.name }}
{{ x.address }}
</div>
<!-- <script language="javascript">
function cdiv()
{
/* var nums=document.getElementById();
var div = document.createElement("div");
div.style.width = "100px";
div.style.height = "100px";
div.style.background = "red";
div.style.color = "white";
div.innerHTML = "Hello";
div.style.display="inline-block";
div.style.margin="10px";
document.getElementById("d1").appendChild(div);*/
}
</script>!-->
</div>
<script>
angular.module('myApp', [])
.controller('myController', function($scope,$http) {
$scope.fcclicked= function(){
alert("hiii");
$http.get('http:/18.220.71.157:8080/foodcourt/foodcourt/list')
.success(function(response) {
$scope.names = response.foodCourts;
$scope.len=response.foodCourts.length;
//var newEle = angular.element("<table class='square'></div>");
//var target = document.getElementById('d1');
//angular.element(target).append(newEle);
/*for( i =1 ; i <$scope.len ;i++){
var newEle = angular.element("<div class='square' id='myddiv'></div>");
angular.element(target).append(newEle);
}*/
}
);
}
}
);
</script>
<style>
.square {
width: 100px;
height: 100px;
background: red;
display:inline-block;
margin:10px;
}
</style>
<!--<script>
$(document).ready(function(){
$(document).click(function(e){
if(e.target.id=="orders")
{
//$("#d1").append('');
}
if(e.target.id=="users")
{
}
// $("#d1").fadeIn();
//$("#div2").fadeIn("slow");
//$("#div3").fadeIn(3000);
});
});
</script>
<!--<script>
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>!-->
<style>
.minidiv
{
}
</style>
</body>
</html>

Okay, there were a lot of problems
The style tag should b always in the head
The button must be closed <button></button>
The input tag should be closed like this <input />
the script tag resides preferably in the head or in the bottom of the
body
I fixed some styling to float the divs and so you can have the same idea that you wanted, you modify the code as you want now:
angular.module('myApp', [])
.controller('myController', function($scope, $http) {
$scope.fcclicked = function() {
alert("hiii");
$http.get('http:/18.220.71.157:8080/foodcourt/foodcourt/list')
.success(function(response) {
$scope.names = response.foodCourts;
$scope.len = response.foodCourts.length;
});
};
})
.shape {
text-align: center;
background-image: url(dark-triangles.png);
width: 200px;
height: 60px;
line-height: 60px;
color: white;
margin: 10px;
position: relative;
transition-property: background;
transition-duration: -10s;
transition-timing-function: linear;
}
.shape:before {
content: "";
width: 0px;
height: 0px;
border-top: 60px solid rgba(107, 255, 55, 105);
border-left: 60px solid transparent;
position: absolute;
right: 0%;
top: 0px;
}
.shape:hover {
background: #ff7b29;
cursor: pointer;
}
body {
font-family: "Lato", sans-serif;
box-sizing: border-box;
}
.sidenav {
height: 100%;
width: 250px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-image: url("doodles.png");
background-color: #cccccc;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.div1 {
box-sizing: border-box;
width: 400px;
height: auto;
background: none;
margin: auto;
border: 2px solid black;
margin-top: 70px;
overflow: hidden;
}
.divcontent {
width: auto;
height: auto;
background: none;
margin: auto;
border: 2px solid black;
margin-top: 70px;
}
.square {
box-sizing: border-box;
width: 48%;
height: 100px;
background: red;
display: inline-block;
margin: 1%;
float: left;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!doctype html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<title>Untitled Document
</title>
</head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<body ng-controller="myController" background="cloudy-day.png" style="color:black;">
<div id="mySidenav" class="sidenav">
<input value={{len}} />
<button class="shape" id="orders">Orders</button>
<button class="shape" id="users">Users</button>
<button class="shape" ng-click="fcclicked()">Food Courts</button>
<button class="shape">Delivery Locations</button>
</div>
<div class="div1" id="d1">
<p align="center">Click one of the buttons to load content.....
</p>
<div class="square" ng-repeat="x in names">
{{ x.id}} {{ x.name }} {{ x.address }}
</div>
</div>
</body>
</html>

html page goes crazy when resizing the browser

So I want to build a modal that contains 3 pages and a progress bar that changes whenever I click on a button. The problem is when I resize my browser the progress bar goes out from the modal.
Here is my code:
$( document ).ready(function() {
$('.trigger').click(function() {
$('.modal-wrapper').toggleClass('open');
$('.page-wrapper').toggleClass('blur');
return false;
});
$('.go').click(function () {
$('.pg2').toggleClass('active') ;
}) ;
$('.gg').click(function () {
$('.pg3').toggleClass('active') ;
}) ;
});
var pageIndex = 1;
showPages(pageIndex);
function nextPage(n) {
showPages(pageIndex += n);
}
function showPages(n) {
var i;
var pages = document.getElementsByClassName("pop");
if (n > pages.length) {pageIndex = 1}
if (n < 1) {pageIndex = pages.length}
for (i = 0; i < pages.length; i++) {
pages[i].style.display = "none";
}
pages[pageIndex-1].style.display = "block";
}
#import url(https://fonts.googleapis.com/css?family=Courgette|Oswald);
#import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
html, body{
width:100%;
height:100%;
margin:0;
}
.sent{
font-family: Dancing Script, Georgia, Times, serif;
font-size :35px ;
text-align: center;
color:#01bce5 ;
}
.page-wrapper{
width:100%;
height:100%;
background:url(http://feelgrafix.com/data/background/background-1.jpg) center no-repeat;
background-size:cover;
}
.blur{
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
}
a.btn{
width:150px;
display:block;
margin:-25px 0 0 -75px;
padding:1em 0;
position:absolute;
top:50%; left:50%;
font:1.125em 'Arial', sans-serif;
font-weight:700;
text-align:center;
text-decoration:none;
color:#fff;
background:rgba(217,67,86,1);
}
a.go{
width:150px;
display:block;
margin:-25px 0 0 -75px;
padding:1em 0;
position:absolute;
top:60%; left:80%;
font:1.125em 'Arial', sans-serif;
font-weight:700;
text-align:center;
text-decoration:none;
color:#fff;
background:rgba(217,67,86,1);
}
a.gg{
width:200px;
height: 10px;
display:block;
margin:-25px 0 0 -250px;
padding:1em 0;
position:absolute;
top:70%; left:80%;
font:1.125em 'Arial', sans-serif;
font-weight:400;
text-align:center;
text-decoration:none;
color:#fff;
background:rgba(217,67,86,1);
}
.modal-wrapper{
width:100%;
height:100%;
position:fixed;
top:0; left:0;
background:rgba(255,257,153,0.75);
visibility:hidden;
opacity:0;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
overflow: hidden;
list-style-position: inside;
}
.modal-wrapper.open{
opacity:1;
visibility:visible;
overflow: hidden;
list-style-position: inside;
}
.modal{
width:600px;
height:600px;
display:block;
margin:50% 0 0 -300px;
position:relative;
top:40%; left:50%;
background:#fff;
opacity:0;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
overflow: hidden;
word-break:break-all;
}
.modal-wrapper.open .modal{
margin-top:-200px;
opacity:1;
}
.head{
width:90%;
height:32px;
padding:1.5em 5%;
overflow:hidden;
background:#01bce5;
}
.btn-close{
width:32px;
height:32px;
display:block;
float:right;
}
.btn-close::before, .btn-close::after{
content:'';
width:32px;
height:6px;
display:block;
background:#fff;
}
.btn-close::before{
margin-top:12px;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}
.btn-close::after{
margin-top:-6px;
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg);
}
.content{
padding:5%;
}
.flat-button {
position: relative;
width: 150px; height: 60px;
background: #E74C3C;
margin: 0 auto;
margin-top: 40px;
overflow: hidden;
z-index: 1;
cursor: pointer;
transition: color .3s;
/* Typo */
line-height: 60px;
text-align: center;
color: #fff;
}
.flat-button:after {
position: absolute;
top: 90%; left: 0;
width: 100%; height: 100%;
background: #C0392B;
content: "";
z-index: -2;
transition: transform .3s;
}
.flat-button:hover::after {
transform: translateY(-80%);
transition: transform .3s;
}
.round-image{
border-radius:100%;
height: 280px;
margin: 0 auto;
overflow:hidden;
width: 280px;
}
.descrip{
padding:1em 0;
position:absolute;
top:40%;
left:70%;
font:1.125em 'Arial', sans-serif;
text-align:center;
text-decoration:none;
margin:-25px 0 0 -75px;
}
.progressbar {
counter-reset: step;
}
.progressbar li {
list-style-type: none;
width: 15%;
float: left;
font-size: 12px;
position: relative;
text-align: center;
text-transform: uppercase;
color: #7d7d7d;
left:350px;
height: 10px;
}
.progressbar li:before {
width: 30px;
height: 30px;
content: counter(step);
counter-increment: step;
line-height: 30px;
border: 5px solid #7d7d7d;
display: block;
text-align: center;
margin: 200px auto 10px auto;
border-radius: 50%;
}
.progressbar li:after {
width: 100%;
height: 7px;
content: '';
position: absolute;
background-color: #7d7d7d;
top: 215px;
left: -50%;
}
.progressbar li:first-child:after {
content: none;
}
.progressbar li.active {
color: green;
}
.progressbar li.active:before {
border-color: #01bce5;
}
.progressbar li.active + li:after {
background-color: #01bce5;
}
.titre{
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="./main.css">
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="./fontawesome/css/font-awesome.min.css">
<link rel="stylesheet" href="http:////fonts.googleapis.com/css?family=Dancing+Script">
<title></title>
</head>
<body>
<div class="page-wrapper">
<a class="btn trigger" href="javascript:;">Popup!</a>
</div>
<div class="modal-wrapper">
<div class="modal">
<div class="head">
<a class="btn-close trigger" href="javascript:;"></a>
</div>
<div class="content">
<div class="container">
<div class="pop fade">
<div class="text">
<h1 class='sent'>FIRST PAGE </h1>
</div>
<img src="http://i.imgur.com/2ZgHKbQ.jpg" alt="Beach in your dream" class="round-image" >
<p class='descrip'>Lorem ipsum dolor sit amet, consectetur adipisicing elit </p>
<a class="btn go" href='javascript:;' onclick='nextPage(1);'>GO!</a>
</div>
<div class="pop fade">
<div class="text">
<h3 class="titre">Lorem ipsum dolor sit amet</h3>
</div>
<a class="btn gg" href='javascript:;' onclick='nextPage(1);'>GO!</a>
</div>
<div class="pop fade">
<div class="text">
<h1 class='sent'>Inscription</h1>
</div>
</div>
</div>
</div>
</div>
<ul class="progressbar">
<li class="active"></li>
<li class='pg2'></li>
<li class="pg3"></li>
</ul>
</div>
</body>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"> </script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="./index.js" type="text/javascript"></script>
</html>

I think your issue is here:
.progressbar li {
list-style-type: none;
width: 15%;
float: left;
font-size: 12px;
position: relative;
text-align: center;
text-transform: uppercase;
color: #7d7d7d;
left:350px;
height: 10px;
}
The left:350px; property is hardcoding a value that is pushing the progress bar to the right... I would recommend to use a percentage. Also the list that creates the progress bar is outside of the modal view. Maybe would be better that is inside.
Finally if you are testing responsive design add this meta tag <meta name="viewport" content="width=device-width, initial-scale=1"> in your head. It will help your site when it renders on mobile devices

In your HTML code add
<div style="clear:both"></div>
before
<ul class="progressbar">
<li class="active"></li>
<li class='pg2'></li>
<li class="pg3"></li>
</ul>
Then change left:350px to left:x%.
.progressbar li {
list-style-type: none;
width: 15%;
float: left;
font-size: 12px;
position: relative;
text-align: center;
text-transform: uppercase;
color: #7d7d7d;
left:20%;
height: 10px;
}
if you want your design work for every size of browser then making different css for different display size must help you.
use following meta tag in head of your code
<meta name="viewport" content="width=device-width, initial-scale=1">
then import two css using media query
<link rel="stylesheet" media="screen and (max-width:768px)" type="text/css" href="./mobile.css">
<link rel="stylesheet" media="screen and (min-width:769px)" type="text/css" href="./desktop.css">
if your browser screen resolution is less than 768px browser will render mobile.css
if resolution is more than 768 browser will render destop.css you can check your browser css here. check resolution for different screen size will clear you more.
Learn more about responsive web design here
Note now most of modern browser support % as input for size elements like width margin height etc use this instead of px will also help you to make html more responsive for more device and screen size.
FYI, you can also use internal media query for css like
body
{
width: 75%;
}
#media only screen and (max-width: 500px) {
body {
width: 91.66%;
}
}

.animate() in jQuery and if condition seems to don't work

I'm not an expert in jQuery and I try to create a kind of button-toggle :
When I click on the switch-button "Home/News", the content should switch too.
But that seems to don't work... Despite the if condition, the condition AND the else are executed... I don't get it. Someone can tell me where do I failed ?
Here is the jsfiddle : https://jsfiddle.net/zgLsbw2h/1/
The jQuery :
$(document).ready(function(){
function switchButton(){
console.log("coucou")
$('.onoffswitch').click(function(){
if($('.onoffswitch').hasClass('nothere')){
$('.container_slide_actu').animate({
left : 0}, 700);
$('.onoffswitch').removeClass('nothere');
}else{
$('.container_slide_actu').animate({
left : '-100%'}, 700);
$('.onoffswitch').addClass('nothere');
}
});
}
switchButton();
});
Thanks in advance.
**Edit
More explanation (in hope to simplify):
I have two html container. When I click on the button, I want to switch them. By default, I got the container1 ; when I click odd => container2 ; when I click even => container1...
Some screenshots to explain :
-The banner of my website (default => container1 (1 on the screenshot)) and the slideshow (who comes over the banner => container2 (2 on the screenshot)) : http://prntscr.com/dpwxat

The reason for your animation going in and out is because the onclick is running twice. The reason for that is because you targeted the "onoffswitch" class, which you have more than one of. If you target the"#myonoffswitch" instead, it being an id, only targets one thing and will only fire once. I cleaned up your JS a bit too. Check it out, let me know what you think.
$(document).ready(function(){
$('#myonoffswitch').on("click", function(){
if($("#myonoffswitch").is(':checked') == false) {
$('.container_slide_actu').animate({
left : 0}, 700);
}else{
$('.container_slide_actu').animate({
left : '-100%'}, 700);
}
});
});
body{
margin:0;
}
.banner-site{
width:100%;
background-color:white !important;
background-position:center !important;
background-repeat:no-repeat !important;
background-size:cover !important;
background-attachment:fixed;
height:350px;
display:flex;
align-items:center;
margin-top:-15px;
transition:all .7s;
position:relative;
border-bottom:1px solid white;
border-top:1px solid white;
overflow:hidden;
}
.banner-site:hover h1{
color:white;
border:2px solid white;
text-shadow:1px 1px 5px rgba(0,0,0,.9);
}
.banner-site:hover h1 a{
color:white;
}
.banner-site a{
color:black;
text-decoration:none;
transition:all .7s;
}
.banner-site .false-hover{
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
background-color:rgba(0,0,0,0);
z-index:1;
transition:all .7s;
}
.banner-site h1{
text-align:center;
border:2px solid #161416;
color:#161416;
margin:auto;
padding:10px;
border-radius:2px;
font-family:'Cinzel';
font-size:30px;
font-weight:300;
text-transform:uppercase;
position:relative;
z-index:2;
text-shadow:1px 1px 5px rgba(255,255,255,.9);
transition:all .3s;
}
.banner-site .false-hover:hover{
background-color:rgba(0,0,0,.5);
}
/*On/Off switch | ty https://proto.io/freebies/onoff/ */
.onoffswitch {
position: absolute; width: 90px;
-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
opacity:.5;/*à voir si on keep*/
right:10px; bottom:15px;
z-index:9999;
display:block;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block; overflow: hidden; cursor: pointer;
border: 2px solid #999999; border-radius: 20px; text-transform:uppercase;
}
.onoffswitch-inner {
display: block; width: 200%; margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
display: block; float: left; width: 50%; height: 30px; padding: 0; line-height: 30px;
font-size: 14px; color: white; font-family: 'Oswald', Arial, sans-serif; font-weight: bold;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "Home";
padding-left: 10px;
background-color: #000000; color: #FFFFFF;
}
.onoffswitch-inner:after {
content: "News";
padding-right: 10px;
background-color: #FFFFFF; color: #000000;
text-align: right;
}
.onoffswitch-switch {
display: block; width: 25px; margin: 2.5px;
background: #FFFFFF;
position: absolute; top: 0; bottom: 0;
right: 56px;
border: 2px solid #999999; border-radius: 20px;
transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
right: 0px;
}
.container_slide_actu{
width:100%;
height:350px;
z-index:999;
position:absolute;
top:0;
left:-100%;
display:block;
}
#mavideo {
top: 0;
left: 0;
width: 100%;
height: 350px;
object-fit:cover;
}
/*look http://www.alsacreations.com/tuto/lire/1620-une-video-arriere-plan-sur-toute-la-page.html*/
<!DOCTYPE html>
<html>
<head>
<title></title>
<body>
<div class="banner-site" style="background-image:url('https://media.senscritique.com/media/000009498078/1200/Lady_Vengeance.jpg')">
<h1><a class="tdn cgrey" href="#" title="Retour à l'accueil de">Play it's evil?</a></h1>
<div class="false-hover"></div>
<!-- Button on/off à replace-->
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked autocomplete="off">
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
<div class="container_slide_actu">
<video id="mavideo" controls autoplay muted loop="true">
<source src="" type="video/mp4">
</video>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</body>
</html>

I added console.log('has nothere'); and console.log('nothere not present'); only to make sure the if was working and noticed at the beginning that both the if and else conditions were being met on a single click.
Not sure what you are trying to accomplish yet but I moved the add/remove class lines inside an anonymous function to be executed once the animation has been completed.
$(document).ready(function(){
function switchButton(){
console.log("coucou")
$('.onoffswitch').click(function(){
if($('.onoffswitch').hasClass('nothere')){
console.log('has nothere');
$('.container_slide_actu').animate({
left : 0}, 700, function() {
// Animation complete.
$('.onoffswitch').removeClass('nothere');
});
}else{
console.log('nothere not present');
$('.container_slide_actu').animate({
left : '-100%'}, 700, function() {
// Animation complete.);
$('.onoffswitch').addClass('nothere');
});
}
});
}
switchButton();
});
Please try and let me know.