Add automatic animation to hover effect - javascript

i am interested in a carousel animation. so far it reacts to hover. So when I go to the second or third element, these areas enlarge and more information is shown. the areas should also open up one after the other or react as if you were driving across the other two areas. i was looking for slides and carousel animation but i don't know exactly what to look for.
$(document).ready(function () {
$(".bloc").hover(function () {
$(this).toggleClass("active"); //Toggle the active class to the area is hovered
$('.first').toggleClass("active"); //Toggle the active class to the area is hovered
});
});
#import url('https://fonts.googleapis.com/css?family=Oswald:200,300,400,500,600,700');
#import url('https://fonts.googleapis.com/css?family=PT+Sans:400,700');
body {
margin: 0;
}
.container {
width: 100%;
height: 100vh;
}
ul {
margin: 0;
padding: 0;
}
ul li {
position: relative;
display: inline-flex;
columns: 3;
width: calc(25% - 22px);
height: calc(100vh - 20px);
margin: 10px;
background-size: cover;
background-position: center center;
transition: .5s all ease-in-out;
overflow: hidden;
}
ul li .bloc {
position: relative;
overflow: hidden;
}
ul li .content {
opacity: 0;
left: 40px;
bottom: 40px;
position: absolute;
border-left: 6px solid #FFF;
padding-left: 20px;
transition: .2s all;
user-select: none;
}
ul li .content H2 {
letter-spacing: 5px;
color: #FFF;
font-size: 35px;
margin: 0;
}
ul li .content H3 {
font-weight: 400;
color: #FFF;
font-size: 25px;
margin: 0;
}
.active .content {
opacity: 1;
transition: 2s all;
transition-delay: .5s;
}
ul li .bloc::before {
opacity: 0;
position: absolute;
content: '';
background-color: rgba(0, 0, 0, 0);
width: 100%;
height: 100%;
animation: opacity 1s;
}
.active {
position: relative;
width: calc(50% - 22px);
transition: .5s all ease-in-out;
}
.active::before {
top: 0;
position: absolute;
content: '';
background-color: rgba(0, 0, 0, 0.6);
width: 100%;
height: 100%;
animation: opacity 1s;
}
.first {
background: red;
}
.second {
background: red;
}
.third {
float: right;
background: red;
}
#keyframes opacity {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<ul>
<li class="bloc first active">
<div class="content">
<H2>First title</H2>
<H3>It's a first subtitle</H3>
</div>
</li>
<li class="bloc second">
<div class="content">
<H2>Second title</H2>
<H3>Subtitle</H3>
</div>
</li>
<li class="bloc third">
<div class="content">
<H2>Third title</H2>
<H3>Last subtitle</H3>
</div>
</li>
</ul>
</div>
to describe it better, I added a gif animation of how the elements should behave.


You can use setInterval to create a continuous animation and temporarily stop that interval when the user hovers over one of the slides.
$(document).ready(function() {
const animation = () => {
const activeCarouselElement = $('.bloc.active');
activeCarouselElement.removeClass('active');
const nextCarouselElement = activeCarouselElement.next().length ? activeCarouselElement.next() : activeCarouselElement.siblings()[0];
$(nextCarouselElement).addClass('active');
};
let animationInterval = setInterval(animation, 3500);
$(".bloc").hover(function() {
$('.bloc.active').removeClass("active");
$(this).addClass("active");
clearInterval(animationInterval);
});
$(".bloc").mouseleave(function() {
animationInterval = setInterval(animation, 3500);
});
});
#import url('https://fonts.googleapis.com/css?family=Oswald:200,300,400,500,600,700');
#import url('https://fonts.googleapis.com/css?family=PT+Sans:400,700');
body {
margin: 0;
}
.container {
width: 100%;
height: 100vh;
}
ul {
margin: 0;
padding: 0;
}
ul li {
position: relative;
display: inline-flex;
columns: 3;
width: calc(25% - 22px);
height: calc(100vh - 20px);
margin: 10px;
background-size: cover;
background-position: center center;
transition: .5s all ease-in-out;
overflow: hidden;
}
ul li .bloc {
position: relative;
overflow: hidden;
}
ul li .content {
opacity: 0;
left: 40px;
bottom: 40px;
position: absolute;
border-left: 6px solid #FFF;
padding-left: 20px;
transition: .2s all;
user-select: none;
}
ul li .content H2 {
letter-spacing: 5px;
color: #FFF;
font-size: 35px;
margin: 0;
}
ul li .content H3 {
font-weight: 400;
color: #FFF;
font-size: 25px;
margin: 0;
}
.active .content {
opacity: 1;
transition: 2s all;
transition-delay: .5s;
}
ul li .bloc::before {
opacity: 0;
position: absolute;
content: '';
background-color: rgba(0, 0, 0, 0);
width: 100%;
height: 100%;
animation: opacity 1s;
}
.active {
position: relative;
width: calc(50% - 22px);
transition: .5s all ease-in-out;
}
.active::before {
top: 0;
position: absolute;
content: '';
background-color: rgba(0, 0, 0, 0.6);
width: 100%;
height: 100%;
animation: opacity 1s;
}
.first {
background: red;
}
.second {
background: red;
}
.third {
float: right;
background: red;
}
#keyframes opacity {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<ul>
<li class="bloc first active">
<div class="content">
<H2>First title</H2>
<H3>It's a first subtitle</H3>
</div>
</li>
<li class="bloc second">
<div class="content">
<H2>Second title</H2>
<H3>Subtitle</H3>
</div>
</li>
<li class="bloc third">
<div class="content">
<H2>Third title</H2>
<H3>Last subtitle</H3>
</div>
</li>
</ul>
</div>

Related

How to achieve a card slide in animation?

Please take a look at the following basic example:
html,
body {
height: 100%;
}
body {
margin: 0;
}
.sidebar {
height: 100%;
width: 300px;
background-color: pink;
float: left;
}
.students-list {
height: 100%;
width: 200px;
background-color: skyblue;
float: left;
}
<div class="sidebar">
Students List
</div>
<div class="students-list">
</div>
The pink div is a sidebar with a link. at first the second div which is the skyblue one, should be hidden, and when the user clicks on the link the whole div should slide smoothly from the left (From underneath the pink div).
Do any of you have a tip or can help me out how to achieve the animation?
EDIT: Is it possible to also use another button to slide out even a third div to the right of the second div?

Please check the below code
body {
font-family: "Roboto", sans-serif;
font-size: 18px;
overflow-x: hidden;
}
main {
padding: 40px 25px;
transition: .5s ease-in-out;
width: 100%;
}
nav {
background: #36a;
bottom: 0;
box-shadow: 0 0 5px #666;
height: 100%;
left: -17.5rem;
padding-top: 38px;
position: absolute;
top: 0;
transition: .5s ease-in-out;
width: 17rem;
user-select: none;
}
nav a {
color: #eee;
display: block;
padding: 12px 16px;
transition: .5s;
text-decoration: none;
-webkit-user-drag: none;
}
nav a:hover {
background-color: #39c;
}
#nav-collapse {
padding: 8px 12px;
position: absolute;
right: 0;
top: 0;
}
#nav-expand {
background-color: #333;
color: #eee;
display: block;
left: 0;
top: 0;
padding: 8px 12px;
position: absolute;
text-decoration: none;
transition: .5s linear;
user-select: none;
-webkit-user-drag: none;
}
#nav-expand:focus {
opacity: 0;
}
#nav-expand:focus ~ main {
margin-left: 17rem;
transition-delay: .25s;
}
#nav-expand:focus ~ nav {
left: 0;
transition-delay: .25s;
}
#nav-expand:hover {
background-color: #369;
color: #fff;
}
.icon {
display: inline-block;
background-position: center;
background-repeat: no-repeat;
height: 12px;
width: 12px;
}
.icon-cross {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAABHNCSVQICAgIfAhkiAAAAPdJREFUGJV1jz9LhWAYxc+9rVZDQ+DcEI0NLU19gxr6Ci3tuvjnA+gggSBt4qzzO90b5FBubkHgEM1CBL5K93Ia8jWv4G88/A7PeQAArusekXwRQpiGYSzQ4/v+Gcn3OI6vMRJf+cdWFXrxs8+bOI5vkCTJLckf/rMtiuJhJJIk67oWAIA0Te8mhR2klGvbtg/UvNlC27ZPSlwquaqqZwA1dmGe56uu676HxPO8U5IfMyuGp+fEt+nTQghzqWnaMYBDdUVKuXYc5yLLsnsAmz5e6Lp+AgCIouiK5FfTNCvLsvanT5dl+Wia5t6wOwiC87GoCMPwUom/I2EVwEqOzwUAAAAASUVORK5CYII=');
}
.icon-menu {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAABHNCSVQICAgIfAhkiAAAAB5JREFUKJFj/P///38GEgATKYoHKWAc9TQRgGRPAwD0IAv+FT8LPwAAAABJRU5ErkJggg==');
}
<a id="nav-expand" href="#">
<span class="icon icon-menu"></span>
Menu
</a>
<nav>
<a id="nav-collapse" href="#">
<span class="icon icon-cross"></span>
</a>
Link1
Link2
Link3
Link4
</nav>
<main>
<h2>Push Sidebar Exmaple</h2>
<p>Please click on menu button.</p>
</main>

Footer has a white space to the right

Basically, as you will see, when i preview the device in mobile S, the footer does not fill the entire browser width unlike the nav bar. This problem is happening from mobile S size to laptop L size!
The code in jsFiddle is more complete!
https://imgur.com/l131R3E
How can i get rid of this white space?
Code: https://jsfiddle.net/84td5z1x/
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.ulSecções');
const navLinks = document.querySelectorAll('.ulSecções li');
//Toggle Nav
burger.addEventListener('click', () => {
nav.classList.toggle('navActive');
//Animate Links
navLinks.forEach((link, index) => {
if (link.style.animation) {
link.style.animation = '';
} else {
link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.5}s`;
}
});
//Burger Animation
burger.classList.toggle('toggle');
});
}
navSlide();
/*Ignore this*/
div.whiteSpace {
width: 100%;
height: 1000px;
}
/*Mobile navBar Burger*/
.burger {
display: none;
float: right;
padding: 31px 49px;
cursor: pointer;
}
.burger div {
width: 27px;
height: 3px;
margin: 5px;
background-color: rgb(192, 163, 68);
transition: all 0.3s ease;
border-radius: 2px;
}
/*Background Menu*/
nav.menu {
width: 100%;
height: 85px;
background-color: rgb(24, 24, 24);
box-shadow: 0px 1px 16px 3px;
}
/*Costumização do body */
body {
background-color: rgb(255, 255, 255);
}
body .menu {
position: fixed;
z-index: 100;
}
/*Costumização logo */
.ulLogo li {
list-style: none;
}
.ulLogo li a img {
width: 180px;
float: left;
padding: 19px 0px 0px 60px;
}
/*Transição Logo Opacity*/
.ulLogo li a img#espiral:hover {
opacity: 0.7;
transition: opacity 300ms linear 0s;
}
.ulLogo li a img#espiral:not(:hover) {
opacity: 1;
transition: opacity 399ms linear 0s;
}
/*Costumização sections */
nav .ulSecções {
float: left;
padding-left: 90px;
}
nav ul.ulSecções li {
float: left;
list-style: none;
position: relative;
line-height: 90px;
}
nav ul.ulSecções li a {
display: block;
font-family: "Ubuntu", "Palatino", sans-serif;
color: rgb(192, 163, 68);
text-transform: uppercase;
font-size: 14px;
letter-spacing: 0.1em;
opacity: 0.9;
padding: 0px 18px;
}
nav ul.ulSecções li a i {
font-size: 16px;
}
nav ul.ulSecções li a.loja {
font-weight: 700;
font-size: 14px;
letter-spacing: 0.1em;
}
/*Footer*/
body footer div.footer {
width: 100%;
height: 170px;
background-color: rgb(24, 24, 24);
}
footer div.icons {
width: 100%;
height: auto;
margin: auto;
padding: 20px 0px;
}
body footer div.icons ul {
margin: 0px;
padding: 0px;
text-align: center;
}
body footer div.icons ul li {
display: inline-block;
list-style: none;
width: 50px;
height: 50px;
margin: 10px 10px;
}
body footer div.icons ul li a {
color: rgb(255, 255, 255);
font-size: 28px;
}
#keyframes navLinkFade {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0px);
}
}
/*Toggle burger*/
.toggle .line1 {
transform: rotate(-45deg) translate(-5px, 6px);
}
.toggle .line2 {
opacity: 0;
}
.toggle .line3 {
transform: rotate(45deg) translate(-5px, -6px);
}
/*Mobile screen adjustments*/
/*Mobile S*/
#media screen and (max-width: 980px) {
nav.menu {
width: 100%;
height: 140px;
}
.ulLogo li {
margin-left: 25%;
}
.ulLogo li a img {
width: 400px;
}
.ulSecções {
position: absolute;
right: 0px;
height: 40vh;
top: 139px;
background-color: rgba(0, 0, 0, 0.9);
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
overflow: scroll;
transform: translateX(100%);
transition: transform 400ms ease-out 0s;
}
nav ul.ulSecções li a {
display: block;
font-family: "Ubuntu", "Palatino", sans-serif;
color: rgb(192, 163, 68);
text-transform: uppercase;
font-size: 40px;
letter-spacing: 0em;
opacity: 0.9;
padding: 0px 10px;
}
nav ul.ulSecções li a.loja {
font-size: 35px;
}
nav ul.ulSecções li a i {
font-size: 35px;
}
div.burger {
display: block;
padding-right: 100px;
padding-top: 57px;
}
.burger div {
width: 40px;
height: 5px;
margin: 4px;
}
/*Footer*/
body footer div.footer {
width: 100%;
/*Erro aqui!!*/
height: 250px;
background-color: rgb(24, 24, 24);
}
body footer div.icons ul li {
display: inline-block;
list-style: none;
width: 50px;
height: 50px;
margin: 15px 30px;
}
body footer div.icons ul li a {
color: rgb(255, 255, 255);
font-size: 50px;
}
}
.navActive {
transform: translateX(0%)
}
<header>
<nav class="menu">
<div>
<ul class="ulLogo">
<li title="Logo Carla Ornelas">
<img id="espiral" src="../Logo.png">
</li>
</ul>
</div>
<div>
<ul class="ulSecções">
<li> Home </li>
<li class="carla"> <a class="carlaOrnelas" href="#" title="Carla Ornelas">Carla Ornelas</a>
</li>
<li>Cursos
</li>
</li>
<li>Conteúdos Especiais
</li>
<li>Recursos
</li>
<li> Contatos </li>
<li> </i> </li>
</ul>
</div>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
</header>
<div class="whiteSpace"></div>
<!--Footer-->
<footer>
<div class="footer">
<div class="icons">
<ul>
<li> <i class="fa fa-instagram" aria-hidden="true"></i> </li>
<li> <i class="fa fa-facebook-square" aria-hidden="true"></i> </li>
<li> <i class="fa fa-youtube-play" aria-hidden="true"> </i> </li>
</ul>
</div>
</div>
</footer>

Add body {margin: 0;} to reset default margin.

At the top of your CSS, add.
*{
margin: 0;
}
This should remove the pre-existing margin, that is present by default on browsers.
I always start my css with
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
Know more about the CSS universal selector (*)

The body is set to margin 8px, set it to 0. The above answer is correct.
https://imgur.com/a/Vy2i5YR

Pop up doesn't show me the photo I want

Problem with 'Classes' and GetElementById?
As you can see in my CodePen, there are some photo in the Gallery section, when you click on someone of that, there is a pop up shows up, i need to open each different photo in that pop up when you click on that, and some info about the product, near the photo on the pop up, I think there is a problem in the Var on JS, I have to name the classes of the photo from child 1 to child 15?
I don't understand where the problem is
window.onload=function(){
var selectable = document.getElementsByClassName('child');
for(var i = 0, j = selectable.length; i < j; i++) {
selectable[i].addEventListener("click", function() {
document.querySelector('.bg-modal').style.display = "flex";
});
}
document.querySelector('.close').addEventListener("click", function() {
document.querySelector('.bg-modal').style.display = "none";
});
}
#import url('https://fonts.googleapis.com/css?family=IBM+Plex+Mono');
body {
font-family: 'IBM Plex Mono', monospace;
background-color: #000000;
height: 100%;
}
.header{
height: 100vh;
color: #f1f1f1;
display: flex;
flex-direction: column;
align-items: center;
background-size: cover;
justify-content: center;
margin-bottom: 30px;
}
.content {
position: fixed;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
color: #f1f1f1;
width: 100%;
padding: 30px;
}
.topnav {
overflow: hidden;
background-color: #000000;
height: 25rem;
align-items: center;
align-content: center;
text-align: center;
margin: 2px;
}
.topnav a {
float: center;
display: inline-block ;
color: #f2f2f2;
text-align: center;
padding: 15px 15px 15px 15px;
text-decoration: none;
font-size: 17px;
margin: 3px;
}
.topnav a:hover {
background-color: #66ff66;
color: black;
}
#logo-container img {
width:40%;
height: auto;
float: center;
}
.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
#media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: center;
display: block;
}
}
#media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
#Livello_1_copia{
right: 0; bottom: 10rem; top: 2rem;
min-width: 100%; min-height:100%;
width: auto; height: auto;
z-index: 100;
background: repeat;
background-size: cover;
display: block;
position: absolute;
pointer-events: none;
color: whitesmoke;
}
.svg{
fill:#ffffff;
padding-top: 15rem;
top: 20rem;
height: 100%;
z-index: 800;
}
/*OVERLAY_Box-container della galleria*/
.overlays {
display: flex;
flex-wrap: wrap;
content: '';
position: absolute;
background: rgba(0, 0, 0, 0);
border-radius: 5px;
top: 25rem;
right: 5rem;
left: 5rem;
align-items: center;
margin:7%;
}
div.child:hover {
cursor: crosshair;
}
/*Parent*/
.parent {
display: flex;
flex-wrap: wrap;
top: 30rem;
padding-top: 0rem;
z-index: 50;
}
/*Child=Figlio del genitore= contenitore sigole foto*/
.child {
flex: 1 0 20%; /* explanation below */
margin: 6px;
height: flex;
background: rgba(0, 0, 0, 0);
align-self: center;
border-radius: 6px;
margin-bottom: 50px;
}
/*Img del figlio*/
.child img {
max-width: 100%;
height: flex;
margin: 0;
bottom: 10rem;
border-radius: 6px;
margin-bottom: 6px;
}
.overlay p {
font-size:1vw;
font-weight: bold;
color: #00ff00;
}
.child .overlay {
margin-bottom: -40px;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.5); /* Black see-through */
border-radius: 6px;
color: #f1f1f1;
height: 100%;
width: 100%;
transition: .30s ease;
opacity:0;
color: white;
font-size: 13px;
text-align: center;
}
#Avatar:hover .overlay {
opacity: 1;
}
#Avatar1:hover .overlay {
opacity: 1;
}
#Avatar2:hover .overlay {
opacity: 1;
}
#Avatar3:hover .overlay {
opacity: 1;
}
#Avatar4:hover .overlay {
opacity: 1;
}
#Avatar5:hover .overlay {
opacity: 1;
}
#Avatar6:hover .overlay {
opacity: 1;
}
#Avatar7:hover .overlay {
opacity: 1;
}
#Avatar8:hover .overlay {
opacity: 1;
}
#Avatar9:hover .overlay {
opacity: 1;
}
#Avatar10:hover .overlay {
opacity: 1;
}
#Avatar11:hover .overlay {
opacity: 1;
}
#Avatar12:hover .overlay {
opacity: 1;
}
#Avatar13:hover .overlay {
opacity: 1;
}
#Avatar14:hover .overlay {
opacity: 1;
}
#Avatar15:hover .overlay {
opacity: 1;
}
/*OVERBOX TESTO IMG*/
.overbox {
background-color: #4CAF50;
position: absolute;
top: 2px;
left: 0;
right: 0;
color: #ffffff;
z-index: 100;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
opacity: 0;
max-width: 30vh;
height: 24vh;
padding: 130px 20px;
flex: 1 0 20%; /* explanation below */
border-radius: 6px;
margin: 6px;
font-size: 10px;
}
.child:hover .overbox { opacity:50; }
.child .overtext {
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
transform: translateY(40px);
-webkit-transform: translateY(40px);
}
.child .title {
font-size: 2.5em;
text-transform: uppercase;
opacity: 50%;
transition-delay: 0.1s;
transition-duration: 0.2s;
}
.child:hover .title,
.child:focus .title {
opacity: 1;
transform: translateY(0px);
-webkit-transform: translateY(0px);
}
.child .tagline {
font-size: 0.8em;
opacity: 0;
transition-delay: 0.2s;
transition-duration: 0.2s;
}
.child:hover .tagline,
.child:focus .tagline {
opacity: 1;
transform: translateX(20px);
-webkit-transform: translateX(0px);
}
/* - fine . OVERBOX TESTO IMG*/
#videogallery{
top: 10rem;
}
video {
object-fit: cover;
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
z-index: -100;
}
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: #4CAF50;
color: #ffffff;
text-align: center;
margin-top: auto;
}
.bg-modal{
width: 100%;
height: 100%;
background-color: rgba(63,191,63,0.64);
position: fixed;
top:0;
justify-content: center;
align-items: center;
display: none;
}
.modal-content {
height: 500px;
width: 500px;
background-color: white;
border-radius: 4px;
text-align: center;
padding: 20px;
position: relative;
}
#fotopopup{
width: 100%;
}
.close {
position: absolute;
top: 0;
right: 10px;
font-size: 42px;
color: #333;
transform: rotate(45deg);
cursor: pointer;
&:hover {
color: #666;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>PINSTRIPE GRILLZ</title>
<script type="text/javascript" src="gallery\js\jquery.js"></script>
<script type="text/javascript" src="gallery\js\main.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
<link rel="stylesheet" href="gallery\css/main.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body class="body">
<header>
<div class="topnav" id="myTopnav">
<div id="logo-container"><a href="index.html"><img src="https://i.ibb.co/FgJ2BYn/PINSTRIPE-Logo-Site.png" alt="PINSTRIPE-Logo-Site" border="0">
</div>
Gallery
Contact
About
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
</header>
<div class="embed-responsive embed-responsive-16by9">
<video playsinline autoplay muted loop id="videogallery">
<source src="gallery\img\bg_2.mp4" type="video/mp4">
</video>
</div>
<div class="overlays">
<div class="child" id="Avatar15"><img src="https://i.ibb.co/7SPJ5Jz/VL.jpg" alt="VL" border="0">
<div class="overlay"><p>White&yellow gold snakes #maibunia</p></div>
</div>
<div class="child" id="Avatar14"><img src="https://i.ibb.co/7SPJ5Jz/VL.jpg" alt="VL" border="0">
<div class="overlay"><p>#dg_bladee 🏝</p></div>
</div>
<div class="child" id="Avatar13"><img src="https://i.ibb.co/7SPJ5Jz/VL.jpg" alt="VL" border="0">
<div class="overlay"><p>xxxstxr</p></div>
</div>
<div class="child" id="Avatar12"><img src="https://i.ibb.co/7SPJ5Jz/VL.jpg" alt="VL" border="0">
<div class="overlay"><p>#ziskasecuris</p></div>
</div>
<div class="child" id="Avatar11"><img src="https://i.ibb.co/7SPJ5Jz/VL.jpg" alt="VL" border="0">
<div class="overlay"><p>LV fangs #lui.vi</p></div>
</div>
<div class="child" id="Avatar10"><img src="https://i.ibb.co/7SPJ5Jz/VL.jpg" alt="VL" border="0">
<div class="overlay"><p>#prettypukee coin</p></div>
</div>
<div class="child" id="Avatar9"><img src="https://i.ibb.co/7SPJ5Jz/VL.jpg" alt="VL" border="0">
<div class="overlay"><p>Black gold biohazard #freddy.boy_bstrd</p></div>
</div>
<div class="child" id="Avatar8"><img src="https://i.ibb.co/7SPJ5Jz/VL.jpg" alt="VL" border="0">
<div class="overlay"><p>Silver</p></div>
</div>
<div class="child" id="Avatar7"><img src="gallery\img/skll.jpg" >
<div class="overlay"><p>10x10 cobalt chrome</p></div>
</div>
<div class="child" id="Avatar6"><img src="gallery\img/4.jpg" >
<div class="overlay"><p>#dg_bladee</p></div>
</div>
<div class="child" id="Avatar5"><img src="gallery\img/ggvlff.jpg" >
<div class="overlay"><p>#imran_potato</p></div>
</div>
<div class="child" id="Avatar4"><img src="gallery\img/spnet.jpg" >
<div class="overlay"><p>Spiderweb</p></div>
</div>
<div class="child" id="Avatar3"><img src="gallery\img/Evil.jpg" >
<div class="overlay"><p>Evil / #yungsherman95</p></div>
</div>
<div class="child" id="Avatar2"><img src="gallery\img/shrk.jpg" >
<div class="overlay"><p>Razor shark teeth</p></div>
</div>
<div class="child" id="Avatar1"><img src="gallery\img/wirte.jpg" >
<div class="overlay"><p>8 bottom Barbwire</p></div>
</div>
</div>
<div class="svg-container unclickable" onclick="return false">
<svg class="svg 1.1 svg-container" id="Livello_1_copia" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 722.3 312.2" style="enable-background:new 0 0 722.3 312.2; transform: scale(1,-1)" xml:space="preserve">
<g>
<path d="M39.1,297.4c9.7,6.6,19.3,7.9,25.2,7.9c3.3,0,5.5-0.4,5.7-0.4l3.2-0.6l-3-1.3c-0.8-0.3-18.3-8.1-12.7-26.3l0.9-2.8
l-2.4,1.6c-5.3,3.6-10.8,4.7-15.7,2.9c-4.7-1.7-8.3-5.7-9.9-11.4l-0.4,0.1c0.1-0.2,0.2-0.5,0.3-0.7c0.9-2.2,2.4-4.2,4.3-5.5
c1-0.7,2-1.2,3.1-1.6c1.1-0.4,2.3-0.7,3.4-0.8c2.3-0.4,4.8-0.3,7.2-0.1l8.4,0.7l-7.9-2.6c-2.1-0.7-4.3-1.2-6.5-1.5
c-2.2-0.2-4.5-0.2-6.7,0.2c-2.2,0.4-4.3,1.2-6.2,2.4c0,0,0,0,0,0V216c0,0,0,0,0,0c1.4,0.2,2.8,0.2,4.2-0.2c1.4-0.3,2.7-0.8,3.9-1.5
c1.2-0.7,2.3-1.5,3.4-2.6l3.3-3.2l-4.4,1.6c-1.2,0.5-2.6,0.8-4,1c-1.4,0.2-2.8,0.1-4.1-0.3c-0.8-0.2-1.6-0.6-2.3-1V6.8
c0,0-4.7,27.4-7.9,30.2L21,37.4v226C21,268.4,22.3,285.9,39.1,297.4z M23,38.3c2.6-3.2,3.4-6.6,4.3-11.5V208
c-0.2-0.3-0.4-0.5-0.6-0.8c-0.3-0.3-0.4-0.6-0.6-0.9l-0.6-1c0.2,0.7,0.3,1.5,0.6,2.2c0.3,0.7,0.6,1.4,1.1,2v0.4h0.3
c0.4,0.5,0.9,0.9,1.4,1.4l1,0.6c0.3,0.2,0.7,0.3,1.1,0.5c1.5,0.6,3.2,0.7,4.7,0.6c0,0,0.1,0,0.1,0c-0.9,0.5-1.8,1-2.8,1.4
c-1.2,0.4-2.4,0.6-3.7,0.7c-1.3,0.1-2.6-0.2-3.9-0.5c0.6,0.3,1.1,0.6,1.8,0.9v43.4h0.5c-1.1,1.1-1.9,2.5-2.2,4c0.7-1.7,1.9-3,3.4-4
h0.3v-0.2c0.2-0.1,0.3-0.2,0.5-0.3c1.8-1,3.9-1.5,5.9-1.7c1.5-0.2,3.1-0.2,4.7-0.1c-1.2,0.2-2.3,0.6-3.5,1c-1.2,0.5-2.4,1.2-3.4,2
c-2.1,1.7-3.5,4-4.3,6.5c-0.1,0.5-0.2,0.9-0.3,1.4l-0.5,0.1c0.1,0.3,0.2,0.7,0.3,1c-0.2,1.7-0.2,3.4,0.1,5c0-1.3,0.1-2.5,0.4-3.8
c2.1,5.1,5.8,8.9,10.4,10.5c4.5,1.6,9.6,1.1,14.4-1.4l-2.1,2.9l-1.3,0.9c-7.6,5.8-18.1-0.1-18.2-0.2l-3.6-2l2.3,3.5
c8.7,13.4,24.5,16.6,25.1,16.7l4.3,0.8L57,299c-0.3-0.2-6.9-5.3-4.8-15.2l0.2-1l2.2-3.1c-2.1,12.9,7,20.4,11.8,23.5
c-5.1,0.3-15.7-0.2-26.3-7.4c-16-10.9-17.2-27.6-17.2-32.4V38.3z M53.2,297.8c-4.5-1.5-12.4-4.9-18.2-11.9c3.7,1.3,9.6,2.5,15-0.3
C49.4,291.3,51.4,295.4,53.2,297.8z"/>
</g>
</svg>
<svg class="svg 1.1 svg-container" id="Livello_1_copia" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 722.3 312.2" style="enable-background:new 0 0 722.3 312.2;transform: scale(-1,-1)" xml:space="preserve">
<g>
<path d="M39.1,297.4c9.7,6.6,19.3,7.9,25.2,7.9c3.3,0,5.5-0.4,5.7-0.4l3.2-0.6l-3-1.3c-0.8-0.3-18.3-8.1-12.7-26.3l0.9-2.8
l-2.4,1.6c-5.3,3.6-10.8,4.7-15.7,2.9c-4.7-1.7-8.3-5.7-9.9-11.4l-0.4,0.1c0.1-0.2,0.2-0.5,0.3-0.7c0.9-2.2,2.4-4.2,4.3-5.5
c1-0.7,2-1.2,3.1-1.6c1.1-0.4,2.3-0.7,3.4-0.8c2.3-0.4,4.8-0.3,7.2-0.1l8.4,0.7l-7.9-2.6c-2.1-0.7-4.3-1.2-6.5-1.5
c-2.2-0.2-4.5-0.2-6.7,0.2c-2.2,0.4-4.3,1.2-6.2,2.4c0,0,0,0,0,0V216c0,0,0,0,0,0c1.4,0.2,2.8,0.2,4.2-0.2c1.4-0.3,2.7-0.8,3.9-1.5
c1.2-0.7,2.3-1.5,3.4-2.6l3.3-3.2l-4.4,1.6c-1.2,0.5-2.6,0.8-4,1c-1.4,0.2-2.8,0.1-4.1-0.3c-0.8-0.2-1.6-0.6-2.3-1V6.8
c0,0-4.7,27.4-7.9,30.2L21,37.4v226C21,268.4,22.3,285.9,39.1,297.4z M23,38.3c2.6-3.2,3.4-6.6,4.3-11.5V208
c-0.2-0.3-0.4-0.5-0.6-0.8c-0.3-0.3-0.4-0.6-0.6-0.9l-0.6-1c0.2,0.7,0.3,1.5,0.6,2.2c0.3,0.7,0.6,1.4,1.1,2v0.4h0.3
c0.4,0.5,0.9,0.9,1.4,1.4l1,0.6c0.3,0.2,0.7,0.3,1.1,0.5c1.5,0.6,3.2,0.7,4.7,0.6c0,0,0.1,0,0.1,0c-0.9,0.5-1.8,1-2.8,1.4
c-1.2,0.4-2.4,0.6-3.7,0.7c-1.3,0.1-2.6-0.2-3.9-0.5c0.6,0.3,1.1,0.6,1.8,0.9v43.4h0.5c-1.1,1.1-1.9,2.5-2.2,4c0.7-1.7,1.9-3,3.4-4
h0.3v-0.2c0.2-0.1,0.3-0.2,0.5-0.3c1.8-1,3.9-1.5,5.9-1.7c1.5-0.2,3.1-0.2,4.7-0.1c-1.2,0.2-2.3,0.6-3.5,1c-1.2,0.5-2.4,1.2-3.4,2
c-2.1,1.7-3.5,4-4.3,6.5c-0.1,0.5-0.2,0.9-0.3,1.4l-0.5,0.1c0.1,0.3,0.2,0.7,0.3,1c-0.2,1.7-0.2,3.4,0.1,5c0-1.3,0.1-2.5,0.4-3.8
c2.1,5.1,5.8,8.9,10.4,10.5c4.5,1.6,9.6,1.1,14.4-1.4l-2.1,2.9l-1.3,0.9c-7.6,5.8-18.1-0.1-18.2-0.2l-3.6-2l2.3,3.5
c8.7,13.4,24.5,16.6,25.1,16.7l4.3,0.8L57,299c-0.3-0.2-6.9-5.3-4.8-15.2l0.2-1l2.2-3.1c-2.1,12.9,7,20.4,11.8,23.5
c-5.1,0.3-15.7-0.2-26.3-7.4c-16-10.9-17.2-27.6-17.2-32.4V38.3z M53.2,297.8c-4.5-1.5-12.4-4.9-18.2-11.9c3.7,1.3,9.6,2.5,15-0.3
C49.4,291.3,51.4,295.4,53.2,297.8z"/>
</g>
</svg>
</div>
<div class="footer">
<p>© PinStripe Custom Jewelery .</p>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
<!-- Modal Section -->
<div class="bg-modal">
<div class="modal-content">
<div class="close">+</div>
<img src="" alt="" id="fotopopup">
</div>
</div>
</body>
</html>

You can retrieve the image from the clicked element and pass it as the src of your element inside the popup like this :
window.onload=function(){
var selectable = document.getElementsByClassName('child');
for(var i = 0, j = selectable.length; i < j; i++) {
selectable[i].addEventListener("click", function(e) {
document.getElementById('fotopopup').setAttribute('src', e.target.attributes['src'].value);
document.querySelector('#text-block').innerHTML = e.target.nextElementSibling.innerHTML;
document.querySelector('.bg-modal').style.display = "flex";
});
}
document.querySelector('.close').addEventListener("click", function() {
document.querySelector('.bg-modal').style.display = "none";
});
}
HTML of modal
<div class="bg-modal">
<div class="modal-content">
<div class="close">+</div>
<img src="" alt="" id="fotopopup">
<span id="text-block"></span>
</div>
</div>
Live demo

Slide menu is not sliding

My code contains HTML, CSS and js file. Though I'm ok with CSS learning JS so I am getting stuck in it. The green color window in output seems to be slide but not happening so.
I am also using <script src="js/modernizr.custom.js"></script> to refer to the js page but it not happening so even if I have tried all these reloated stuff but i unable to refer from HTML even if it's not working on the same HTML page under TAG
$( "#toggle" ).click(function() {
$(".menu").toggleClass("closed");
$(this).toggleClass("closed");
$(".content").toggleClass("closed");
$("#wrapper").toggleClass("closed")
});
* { font-family:courier; box-sizing:border-box; }
html, body { margin:0; padding:0; height:100%; min-height:100%; background-color:floralwhite }
.menu { width:250px; height:100%; position:fixed; background-color:seagreen; transition:all 1s; left:0; z-index:50; overflow-y:auto; padding-bottom:100px; }
.menu.closed { left:-250px; }
#toggle { background-color:seagreen; height:100%; min-height:100%; width:50px; position:fixed; top:0; bottom:0; left:0px; z-index:25; &:hover { cursor:pointer; } &.closed { left:0px; top:0; bottom:0; right:0; width:100%; height:100%; opacity:.3; } transition:all .7s ease; }
.menu ul { list-style-type:none; padding:0; margin:85px 0 0 40px; padding-right:40px; }
.menu ul li { color:floralwhite; font-size:20px; margin:0 0 5px 0; display:block; height:40px; line-height:40px; &:hover { background-color:lighten(seagreen, 10%); cursor:pointer; } padding-left:10px; transition:all .3s; }
<div id="toggle">
</div>
<div class="menu closed">
<ul>
<li>Home</li>
<li>Logo</li>
<li>Stuff</li>
<li>Cooking</li>
<li>Games</li>
</ul>
</div>

Your CSS contains SCSS elements, like
#toggle {
...
#toggle:hover {
cursor: pointer;
}
...
}
There is no nesting in plain CSS. Convert these nested rules to normal CSS (and add jQuery to the snippet) to make it work.
In general, always make sure, that your markup, styles and javascript code doesn't have syntax errors. There are tons of tools for that.
$("#toggle").click(function() {
$(".menu").toggleClass("closed");
$(this).toggleClass("closed");
$(".content").toggleClass("closed");
$("#wrapper").toggleClass("closed")
});
* {
font-family: courier;
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
height: 100%;
min-height: 100%;
background-color: floralwhite
}
.menu {
width: 250px;
height: 100%;
position: fixed;
background-color: seagreen;
transition: all 1s;
left: 0;
z-index: 50;
overflow-y: auto;
padding-bottom: 100px;
}
.menu.closed {
left: -250px;
}
#toggle {
background-color: seagreen;
height: 100%;
min-height: 100%;
width: 50px;
position: fixed;
top: 0;
bottom: 0;
left: 0px;
z-index: 25;
transition: all .7s ease;
}
#toggle:hover {
cursor: pointer;
}
#toggle.closed {
left: 0px;
top: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
opacity: .3;
}
.menu ul {
list-style-type: none;
padding: 0;
margin: 85px 0 0 40px;
padding-right: 40px;
}
.menu ul li {
color: floralwhite;
font-size: 20px;
margin: 0 0 5px 0;
display: block;
height: 40px;
line-height: 40px;
padding-left: 10px;
transition: all .3s;
}
.menu ul li:hover {
background-color: lighten(seagreen, 10%);
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="toggle">
</div>
<div class="menu closed">
<ul>
<li>Home</li>
<li>Logo</li>
<li>Stuff</li>
<li>Cooking</li>
<li>Games</li>
</ul>
</div>

$("#toggle").click(function() {
$(".menu").toggleClass("closed");
$(this).toggleClass("closed");
$(".content").toggleClass("closed");
$("#wrapper").toggleClass("closed")
});
* {
font-family: courier;
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
height: 100%;
min-height: 100%;
background-color: floralwhite
}
.menu {
width: 250px;
height: 100%;
position: fixed;
background-color: seagreen;
transition: all 1s;
left: 0;
z-index: 50;
overflow-y: auto;
padding-bottom: 100px;
}
.menu.closed {
left: -250px;
}
#wrapper { margin-left: 50px;}
#wrapper.closed{ left: 250px; margin-left: 0px; transition: all .3s; position: relative;}
#toggle {
background-color: seagreen;
height: 100%;
min-height: 100%;
width: 50px;
position: fixed;
top: 0;
bottom: 0;
left: 0px;
z-index: 25;
transition: all .7s ease;
}
#toggle:hover {
cursor: pointer;
}
#toggle.closed {
left: 0px;
top: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
opacity: .3;
}
.menu ul {
list-style-type: none;
padding: 0;
margin: 85px 0 0 40px;
padding-right: 40px;
}
.menu ul li {
color: floralwhite;
font-size: 20px;
margin: 0 0 5px 0;
display: block;
height: 40px;
line-height: 40px;
padding-left: 10px;
transition: all .3s;
}
.menu ul li:hover {
background-color: lighten(seagreen, 10%);
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="toggle"> menu
</div>
<div class="menu closed">
<ul>
<li>Home</li>
<li>Logo</li>
<li>Stuff</li>
<li>Cooking</li>
<li>Games</li>
</ul>
</div>
<div id="wrapper"> dwdlkqnbwkjdbjqkbwkbqkh </div>

Changing CSS panel to 100% width creates jumpy jQuery scroll

I'm trying to link the nav bar list items to transition a scroll to specific panels on the page. After making adjustment to the CSS to make all panel backgrounds (.maincontent) 100% page width the scroll effect no longer works...
CSS:
/****Landscape****/
/*global styles*/
.body {
width: 100%;
margin: 0;
list-style: none;
text-decoration: none;
font-size: 1.05em;
font-family: Helvetica Neue, Helvetica, Arial, Sans-serif;
}
a {
appearance: none;
font-size: 1.05em;
font-family: Helvetica Neue, Helvetica, Arial, Sans-serif;
background: transparent;
color: #000000;
border: none;
letter-spacing: 0.15em;
text-transform: uppercase;
transition: color 0.5s ease;
list-style: none;
text-decoration: none;
}
a:focus,
a:hover {
color: #e6e8eb;
cursor: pointer;
transition: color 0.5s ease;
width: inherit;
right: 0;
left: 0;
}
a:active {
color: #484747;
}
/*----/----global styles*/
/*Maincontent*/
.maincontent {
position: absolute;
top: 0;
left: 0;
width: 100%;
font-size: 1.05em;
font-family: Helvetica Neue, Helvetica, Arial, Sans-serif;
}
/*----/----Maincontent*/
/*contact panel*/
.letmeknow:hover {
color: #464c4c;
cursor: pointer;
transition: color 0.5s ease;
}
.letmeknow {
appearance: none;
width: 80%;
height: 50px;
font-size: 1.05em;
background: transparent;
color: #e6e8eb;
border: none;
letter-spacing: 0.15em;
text-transform: uppercase;
transition: color 0.5s ease;
outline: none;
border: none;
}
/*Contact submit Form*/
#container {
width: 840px;
margin: 25px auto;
}
.whysign {
float: left;
background-color: white;
width: 480px;
height: 347px;
border-radius: 0 5px 5px 0;
padding-top: 20px;
padding-right: 20px;
}
.signup {
float: left;
width: 300px;
padding: 30px 20px;
background-color: white;
text-align: center;
border-radius: 5px 0 0 5px;
}
[type=text] {
display: block;
margin: 0 auto;
width: 80%;
border: 0;
border-bottom: 1px solid rgba(0, 0, 0, .2);
height: 45px;
line-height: 45px;
margin-bottom: 10px;
font-size: 1em;
color: rgba(0, 0, 0, .4);
}
input[type="submit"] {
appearance: none;
width: 80%;
height: 50px;
font-size: 1.05em;
background: transparent;
color: #e6e8eb;
border: none;
letter-spacing: 0.15em;
text-transform: uppercase;
transition: color 0.5s ease;
outline: none;
border: none;
}
input[type="submit"]:hover {
color: #464c4c;
cursor: pointer;
transition: color 0.5s ease;
}
[type='text']:focus {
outline: none;
border-color: #53CACE;
}
span:hover {
color: #53CACE;
}
/*----/----contact form*/
/*Nav Bar*/
.header {
background: #ffffff;
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 99999;
}
.nav {
background: #ffffff;
float: right;
text-align: right;
}
.nav > li {
display: inline-block;
padding: 2px;
padding-right: 30px;
}
/*----/----Nav Bar*/
/*Panels*/
.panel {
width: 100%;
background: #000000;
color: #ffffff;
height: 40em;
padding: 3em;
}
.links {
color: #ffffff;
}
.panel .inner {
padding-top: 10%;
color: #df
}
.panel.panel-blank {
background: #ffffff;
color: #000000;
}
/*----/----Panels*/
/*logo*/
.logo {
float: left;
display: inline-block;
width: 15px;
height: 15px;
padding: 18px;
cursor: pointer;
}
/*----/----logo*/
/****Portrait****/
#media (max-width: 850px) {
/*global styles*/
.body {
width: 100%;
margin: 0;
list-style: none;
text-decoration: none;
}
.header {
background: #ffffff;
width: 100%;
position: fixed;
top: 0;
left: 0;
}
.nav {
position: fixed;
width: 100%;
text-align: center;
display: none;
background-color: #ffffff;
left: 0;
top: 39px;
}
.nav > li {
postition: absolute;
display: block;
left: 0;
width: 100%;
padding-top: 0.6em;
padding-bottom: 1em;
}
.nav > li:hover {
postition: absolute;
display: block;
left: 0;
width: 100%;
padding-top: 0.6em;
padding-bottom: 1em;
cursor: pointer;
}
/*----/----global styles*/
/*logo*/
.logo {
float: left;
display: block;
width: 15px;
height: 15px;
padding: 18px;
cursor: pointer;
}
/*----/----logo*/
/*navigation icon*/
#toggle-menu {
float: right;
display: block;
width: 15px;
height: 15px;
padding: 20px;
}
#toggle-menu div {
width: 15px;
height: 15px;
position: relative;
}
#toggle-menu span {
display: block;
width: 15px;
height: 3px;
background: black;
position: absolute;
-webkit-transition: -webkit-transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
-moz-transition: -moz-transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
transition: transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
-webkit-transform-origin: center;
-moz-transform-origin: center;
transform-origin: center;
}
#toggle-menu span.top {
top: 0px;
}
#toggle-menu span.middle {
top: 6px;
}
#toggle-menu span.bottom {
top: 12px;
}
/*----/----navigation icon*/
/*navigation icon animation*/
#toggle-menu.menu-is-active span {
-webkit-transition: -webkit-transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out;
-moz-transition: -moz-transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out;
transition: transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out;
}
#toggle-menu.menu-is-active span.top,
#toggle-menu.menu-is-active span.middle {
top: 6px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
#toggle-menu.menu-is-active span.middle {
opacity: 0;
}
#toggle-menu.menu-is-active span.bottom {
top: 6px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/*----/----navigation icon animation*/
}
/*----/----Portrait*/
jQuery:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
jQuery(document).ready(function () {
$(window).resize(function(){
if ($(window).width() >=850) {
$(".nav").show();
}
else{ $(".nav").hide();}
});
$('#toggle-menu').click(function () {
$(this).toggleClass('menu-is-active')
});
/* click outside of nav to trigger navigation icon animation*/
$(document).click(function () {
$("#toggle-menu").removeClass();
});
$("nav").click(function (e) {
e.stopPropagation();
return false;
});
/*----/----navigation icon animation*/
/*toggle menu*/
jQuery("#toggle-menu").click(function () {
jQuery(".nav").slideToggle();
});
/* click outside of nav to close toggle*/
$(document).click(function () {
if ($(window).width() < 850) {
$(".nav").hide();
} else {
$(".nav").show();
}
});
$("#toggle-menu").click(function (e) {
e.stopPropagation();
return false;
});
/*----/----toggle menu*/
/*Jump Scroll*/
$(function() {
var $window = $(window), $document = $(document),
transitionSupported = typeof document.body.style.transitionProperty === "string", // detect CSS transition support
scrollTime = 1; // scroll time in seconds
$(document).on("click", "a[href*=#]:not([href=#])", function(e) {
var target, avail, scroll, deltaScroll;
if (location.pathname.replace(/^\//, "") == this.pathname.replace(/^\//, "") && location.hostname == this.hostname) {
target = $(this.hash);
target = target.length ? target : $("[id=" + this.hash.slice(1) + "]");
if (target.length) {
avail = $document.height() - $window.height();
if (avail > 0) {
scroll = target.offset().top;
if (scroll > avail) {
scroll = avail;
}
} else {
scroll = 0;
}
deltaScroll = $window.scrollTop() - scroll;
// if we don't have to scroll because we're already at the right scrolling level,
if (!deltaScroll) {
return; // do nothing
}
e.preventDefault();
if (transitionSupported) {
$("html").css({
"margin-top": deltaScroll + "px",
"transition": scrollTime + "s ease-in-out"
}).data("transitioning", scroll);
} else {
$("html, body").stop(true, true) // stop potential other jQuery animation (assuming we're the only one doing it)
.animate({
scrollTop: scroll + "px"
}, scrollTime * 1000);
return;
}
}
}
});
if (transitionSupported) {
$("html").on("transitionend webkitTransitionEnd msTransitionEnd oTransitionEnd", function(e) {
var $this = $(this),
scroll = $this.data("transitioning");
if (e.target === e.currentTarget && scroll) {
$this.removeAttr("style").removeData("transitioning");
$("html, body").scrollTop(scroll);
}
});
}
});
/*----/----Jump Scroll*/
/*contact let me know toggle*/
jQuery(".letmeknow").click(function () {
jQuery(".container").slideToggle();
});
/*----/-----contact let me know toggle*/
});
HTML:
<div class="header">
<div class="navbar">
LogoPlaceHolder
<a id="toggle-menu">
<div>
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
</a>
<ul class="nav">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</div>
</div>
<div class="maincontent">
<div class="panel multiplepanels" id="panel1">
<div class="inner"> 1 </div>
</div>
<div class="panel panel-blank multiplepanels" id="panel2">
<div class="inner">
<p>Work Title 1</p> View Project → </div>
</div>
<div class="panel multiplepanels" id="panel3">
<div class="inner">
<p>Work Title 2</p> View Project → </div>
</div>
<div class="panel panel-blank multiplepanels" id="panel4">
<div class="inner">
<p>Work Title 3</p> View Project → </div>
</div>
<div class="panel multiplepanels" id="panel5">
<div class="inner">
<p>Work Title 4</p> View Project → </div>
</div>
<div class="panel panel-blank multiplepanels" id="panel6">
<div class="inner">
<p>Work Title 5</p> View Project → </div>
</div>
<div class="panel multiplepanels" id="panel7">
<div class="inner">
<p>Work Title 6</p> View Project → </div>
</div>
<div class="panel panel-blank multiplepanels" id="panel8">
<div class="inner">
<P>Like what I do?</P>
<p>Let me know</p>
<div id='container'>
<div class='signup'>
<p> Send me a message </p>
<form>
<input type='text' placeholder='First:' />
<input type='text' placeholder='Last:' />
<input type='text' placeholder='Email:' />
<input type='text' placeholder='Phone:' />
<input type='submit' placeholder='SUBMIT' />
</form>
</div>
</div>
<div class="thank you">
<p>Thank you for your message!</p>
</div>
</div>
</div>
<div class="panel multiplepanels" id="panel9">
<div class="inner">
<p>Social</p>
</div>
</div>
</div>
<footer>
<div class="panel panel-blank" id="panel10">
<div class="inner"> © 2015 thiswebsite.com</div>
</div>
</footer>

It is caused by giving .maincontent absolute positioning. This makes html not be the full height of the document. And the script relies on this for the transition. So here are a few changes to make :
Demo
Take a way the dot from body (sidenote) :
.body {
...
}
Remove positioning here :
.maincontent {
width: 100%;
font-size: 1.05em;
font-family: Helvetica Neue, Helvetica, Arial, Sans-serif;
}
And then box-sizing on this element to remove the horizontal scrollbar :
.panel {
width: 100%;
background: #000000;
color: #ffffff;
height: 40em;
padding: 3em;
box-sizing: border-box;
}

Categories

Resources