Adapting image gallery code snippet to Django project

Adapting image gallery code snippet to Django project - javascript

I'm building a website using Django and I want to add this image gallery to one of my pages, but I'm having issues integrating the code.
The HTML, SCSS, and JS code I want to add is here:
https://gist.github.com/CodeMyUI/9769b75c7a81d24138ae74bdbadc39e4 and I've added the code snippets below.
I've added the JS (inside a <script> element) and HTML to my django template. I've added a Django-SASS processor to my project to handle the SCSS, following these steps (https://engineertodeveloper.com/how-to-easily-use-sass-scss-with-django/). I'm trying to change the SCSS to use my images, so I modified the background-image property in the SCSS from
background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/onepgscr-#{$i + 3}.jpg');
to
background-image: url("BHM_bike.png"), url("BHM_bike.png"), url("BHM_bike.png");
So that the resulting block looks like this:
#for $i from 0 to $numOfEls {
&:nth-child(#{$i + 1}) {
$x: (100% + $elMrgRel) * $i;
transform: translate3d($x,0,0);
transform-origin: $x + 50% 50%;
#include contElActive {
&:not(.s--active) {
transform: scale(0.5) translate3d($x,0,0);
opacity: 0;
transition: transform $fadeoutAT, opacity $fadeoutAT;
}
}
.el__inner {
transition-delay: $initDelayStep * $i;
}
.el__bg {
transform: translate3d($elW * $i * -1,0,0);
&:before {
transition-delay: 0.1s * $i;
background-image: url("BHM_bike.png"), url("BHM_bike.png"), url("BHM_bike.png");
}
}
}
I'm not getting any images loading though.
var $cont = document.querySelector('.cont');
var $elsArr = [].slice.call(document.querySelectorAll('.el'));
var $closeBtnsArr = [].slice.call(document.querySelectorAll('.el__close-btn'));
setTimeout(function() {
$cont.classList.remove('s--inactive');
}, 200);
$elsArr.forEach(function($el) {
$el.addEventListener('click', function() {
if (this.classList.contains('s--active')) return;
$cont.classList.add('s--el-active');
this.classList.add('s--active');
});
});
$closeBtnsArr.forEach(function($btn) {
$btn.addEventListener('click', function(e) {
e.stopPropagation();
$cont.classList.remove('s--el-active');
document.querySelector('.el.s--active').classList.remove('s--active');
});
});
*, *:before, *:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: #008000;
font-family: 'Open Sans', Helvetica, Arial, sans-serif;
}
$vertPad: 80px;
$sidePad: 70px;
$numOfEls: 3;
$elMrg: 1%;
$initAT: 1s;
$initDelayStep: 0.1s;
$fullInitAT: $initAT + $initDelayStep * ($numOfEls - 1);
$moveAT: 0.6s;
$expandAT: 0.7s;
$expandDelay: 0.1s;
$bgScaleAT: 0.8s;
$fadeoutAT: $moveAT + $expandAT/2;
$indexHoverAT: 0.5s;
$closeBtnAT: 0.3s;
$closeBtnLineDelay: 0.15s;
$fullExpandAT: $moveAT + $expandDelay + $expandAT;
$contentFadeinAT: 0.5s;
#mixin elHover {
.el:hover & {
#content;
}
}
#mixin elActive {
.el.s--active & {
#content;
}
}
#mixin contInactive {
.cont.s--inactive & {
#content;
}
}
#mixin contElActive {
.cont.s--el-active & {
#content;
}
}
.cont {
position: relative;
overflow: hidden;
height: 100vh;
padding: $vertPad $sidePad;
&__inner {
position: relative;
height: 100%;
&:hover .el__bg:after {
opacity: 1;
}
}
}
.el {
$elW: (100% - $elMrg * ($numOfEls - 1)) / $numOfEls;
$elMrgRel: percentage($elMrg / $elW);
position: absolute;
left: 0;
top: 0;
width: $elW;
height: 100%;
background: #252525;
transition: transform $moveAT $expandAT, width $expandAT, opacity $moveAT $expandAT, z-index 0s $moveAT + $expandAT;
will-change: transform, width, opacity;
&:not(.s--active) {
cursor: pointer;
}
&__overflow {
overflow: hidden;
position: relative;
height: 100%;
}
&__inner {
overflow: hidden;
position: relative;
height: 100%;
transition: transform $initAT;
#include contInactive {
transform: translate3d(0,100%,0);
}
}
&__bg {
position: relative;
width: calc(100vw - #{$sidePad * 2});
height: 100%;
transition: transform $moveAT $expandAT;
will-change: transform;
&:before {
content: "";
position: absolute;
left: 0;
top: -5%;
width: 100%;
height: 110%;
background-size: cover;
background-position: center center;
transition: transform $initAT;
transform: translate3d(0,0,0) scale(1);
#include contInactive {
transform: translate3d(0,-100%,0) scale(1.2);
}
#include elActive {
transition: transform $bgScaleAT;
}
}
&:after {
$opacityAT: 0.5s;
content: "";
z-index: 1;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.3);
opacity: 0;
transition: opacity $opacityAT;
#include contElActive {
transition: opacity $opacityAT $fullExpandAT;
opacity: 1 !important;
}
}
}
&__preview-cont {
z-index: 2;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
transition: all 0.3s $fullInitAT - 0.2s;
#include contInactive {
opacity: 0;
transform: translateY(10px);
}
#include contElActive {
opacity: 0;
transform: translateY(30px);
transition: all 0.5s;
}
}
&__heading {
color: #fff;
text-transform: uppercase;
font-size: 18px;
}
&__content {
z-index: -1;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
padding: 30px;
opacity: 0;
pointer-events: none;
transition: all 0.1s;
#include elActive {
z-index: 2;
opacity: 1;
pointer-events: auto;
transition: all $contentFadeinAT $fullExpandAT;
}
}
&__text {
text-transform: uppercase;
font-size: 40px;
color: #fff;
}
&__close-btn {
z-index: -1;
position: absolute;
right: 10px;
top: 10px;
width: 60px;
height: 60px;
opacity: 0;
pointer-events: none;
transition: all 0s $closeBtnAT + $closeBtnLineDelay;
cursor: pointer;
#include elActive {
z-index: 5;
opacity: 1;
pointer-events: auto;
transition: all 0s $fullExpandAT;
}
&:before,
&:after {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 100%;
height: 8px;
margin-top: -4px;
background: #fff;
opacity: 0;
transition: opacity 0s;
#include elActive {
opacity: 1;
}
}
&:before {
transform: rotate(45deg) translateX(100%);
#include elActive {
transition: all $closeBtnAT $fullExpandAT cubic-bezier(.72,.09,.32,1.57);
transform: rotate(45deg) translateX(0);
}
}
&:after {
transform: rotate(-45deg) translateX(100%);
#include elActive {
transition: all $closeBtnAT $fullExpandAT + $closeBtnLineDelay cubic-bezier(.72,.09,.32,1.57);
transform: rotate(-45deg) translateX(0);
}
}
}
&__index {
overflow: hidden;
position: absolute;
left: 0;
bottom: $vertPad * -1;
width: 100%;
height: 100%;
min-height: 250px;
text-align: center;
font-size: 100vw / $numOfEls;
line-height: 0.85;
font-weight: bold;
transition: transform $indexHoverAT, opacity $moveAT/2 $expandAT + $expandDelay + $moveAT;
transform: translate3d(0,1vw,0);
#include elHover {
transform: translate3d(0,0,0);
}
#include contElActive {
transition: transform $indexHoverAT, opacity $moveAT/2;
opacity: 0;
}
&-back,
&-front {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
}
&-back {
color: #2f3840;
opacity: 0;
transition: opacity $indexHoverAT/2 $indexHoverAT/2;
#include elHover {
transition: opacity $indexHoverAT/2;
opacity: 1;
}
}
&-overlay {
overflow: hidden;
position: relative;
transform: translate3d(0,100%,0);
transition: transform $indexHoverAT 0.1s;
color: transparent;
&:before {
content: attr(data-index);
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
color: #fff;
transform: translate3d(0,-100%,0);
transition: transform $indexHoverAT 0.1s;
}
#include elHover {
transform: translate3d(0,0,0);
&:before {
transform: translate3d(0,0,0);
}
}
}
}
#for $i from 0 to $numOfEls {
&:nth-child(#{$i + 1}) {
$x: (100% + $elMrgRel) * $i;
transform: translate3d($x,0,0);
transform-origin: $x + 50% 50%;
#include contElActive {
&:not(.s--active) {
transform: scale(0.5) translate3d($x,0,0);
opacity: 0;
transition: transform $fadeoutAT, opacity $fadeoutAT;
}
}
.el__inner {
transition-delay: $initDelayStep * $i;
}
.el__bg {
transform: translate3d($elW * $i * -1,0,0);
&:before {
transition-delay: 0.1s * $i;
background-image: url("BHM_bike.png"), url("BHM_bike.png"), url("BHM_bike.png");
}
}
}
}
&:hover {
.el__bg:after {
opacity: 0;
}
}
&.s--active {
z-index: 1;
width: 100%;
transform: translate3d(0,0,0);
transition: transform $moveAT, width $expandAT $moveAT + $expandDelay, z-index 0s;
.el__bg {
transform: translate3d(0,0,0);
transition: transform $moveAT;
&:before {
transition-delay: $moveAT;
transform: scale(1.1);
}
}
}
}
.icon-link {
position: absolute;
left: 5px;
bottom: 5px;
width: 32px;
img {
width: 100%;
vertical-align: top;
}
&--twitter {
left: auto;
right: 5px;
}
}
{% extends './base.html' %}
{% load sass_tags %}
{% load static %}
{% load fullcalendar_tags %}
{% block content %}
<!-- Header -->
<header class="w3-display-container w3-content w3-wide" style="max-width:1500px;" id="home">
<img class="w3-image" src="{% static 'BobbleHead/images/BHM_bike.png' %}" alt="BHBike" width="1500" height="700">
<div class="w3-display-middle w3-margin-top w3-center">
<h1 class="w3-xxlarge w3-text-white"><span class="w3-padding w3-black w3-opacity-min"><b>BobbleHeadMoto</b></span></h1>
</div>
</header>
<div class="w3-container w3-content w3-center w3-padding-32" style="max-width:800px">
<!-- Packages and Pricing Section -->
<div id="packages">
<h2 class="w3-wide">Packages & Pricing</h2>
<div class="cont s--inactive">
<!-- cont inner start -->
<div class="cont__inner">
<!-- el start -->
<div class="el">
<div class="el__overflow">
<div class="el__inner">
<div class="el__bg"></div>
<div class="el__preview-cont">
<h2 class="el__heading">Section 1</h2>
</div>
<div class="el__content">
<div class="el__text">Whatever</div>
<div class="el__close-btn"></div>
</div>
</div>
</div>
<div class="el__index">
<div class="el__index-back">1</div>
<div class="el__index-front">
<div class="el__index-overlay" data-index="1">1</div>
</div>
</div>
</div>
<!-- el end -->
<!-- el start -->
<div class="el">
<div class="el__overflow">
<div class="el__inner">
<div class="el__bg"></div>
<div class="el__preview-cont">
<h2 class="el__heading">Section 2</h2>
</div>
<div class="el__content">
<div class="el__text">Whatever</div>
<div class="el__close-btn"></div>
</div>
</div>
</div>
<div class="el__index">
<div class="el__index-back">2</div>
<div class="el__index-front">
<div class="el__index-overlay" data-index="2">2</div>
</div>
</div>
</div>
<!-- el end -->
<!-- el start -->
<div class="el">
<div class="el__overflow">
<div class="el__inner">
<div class="el__bg"></div>
<div class="el__preview-cont">
<h2 class="el__heading">Section 3</h2>
</div>
<div class="el__content">
<div class="el__text">Whatever</div>
<div class="el__close-btn"></div>
</div>
</div>
</div>
<div class="el__index">
<div class="el__index-back">3</div>
<div class="el__index-front">
<div class="el__index-overlay" data-index="3">3</div>
</div>
</div>
</div>
<!-- el end -->
</div>
<!-- cont inner end -->
</div>
</div>
</div>
<!-- End page content -->
{% endblock %}

Related

Show / Hide entire HTML pages clicking on menu links - pure JS

Kindly ask for your advice making working a javascript navigation bar.
It should be supposed to:
open a page preview clicking on the link (I think to have achieve that, even though with a too long code block);
open the selected page with the second click (the first is just for the preview -- i tried with a container.classList.toggle("active"); inside each element.onclick function but didn't work)
give you the chance to open the page clicking directly on the preview (I don't have a clue how to do so)
const hamburger_menu = document.querySelector(".hamburger-menu");
const container = document.querySelector(".container");
hamburger_menu.addEventListener("click", () => {
container.classList.toggle("active");
document.getElementById("home-btn").onclick = function() {
document.getElementById("home").style.display = "block";
document.getElementById("services").style.display = "none";
document.getElementById("portfolio").style.display = "none";
document.getElementById("about").style.display = "none";
document.getElementById("contact").style.display = "none";
};
document.getElementById("services-btn").onclick = function() {
document.getElementById("services").style.display = "block";
document.getElementById("home").style.display = "none";
document.getElementById("portfolio").style.display = "none";
document.getElementById("about").style.display = "none";
document.getElementById("contact").style.display = "none";
};
document.getElementById("portfolio-btn").onclick = function() {
document.getElementById("portfolio").style.display = "block";
document.getElementById("home").style.display = "none";
document.getElementById("services").style.display = "none";
document.getElementById("about").style.display = "none";
document.getElementById("contact").style.display = "none";
};
document.getElementById("about-btn").onclick = function() {
document.getElementById("about").style.display = "block";
document.getElementById("home").style.display = "none";
document.getElementById("services").style.display = "none";
document.getElementById("portfolio").style.display = "none";
document.getElementById("contact").style.display = "none";
};
document.getElementById("contact-btn").onclick = function() {
document.getElementById("contact").style.display = "block";
document.getElementById("home").style.display = "none";
document.getElementById("services").style.display = "none";
document.getElementById("portfolio").style.display = "none";
document.getElementById("about").style.display = "none";
};
});
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
min-height: 100vh;
width: 100%;
background-color: #485461;
background-image: linear-gradient(135deg, #485461 0%, #28313b 74%);
overflow-x: hidden;
transform-style: preserve-3d;
}
.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 100;
height: 5rem;
}
.menu {
max-width: 72rem;
height: inherit;
width: 100%;
margin: 0 auto;
padding: 0 2rem;
display: flex;
align-items: center;
color: #fff;
}
.logo {
font-size: 1.1rem;
font-weight: 600;
letter-spacing: 2px;
line-height: 4rem;
}
.logo span {
font-weight: 300;
}
.hamburger-menu {
height: 4rem;
width: 3rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: flex-end;
margin-left: auto;
}
.bar {
width: 1.9rem;
height: 1.5px;
border-radius: 2px;
background-color: #eee;
transition: 0.5s;
position: relative;
}
.bar::before,
.bar::after {
content: "";
position: absolute;
width: inherit;
height: inherit;
background-color: #eee;
transition: 0.5s;
}
.bar::before {
transform: translateY(-9px);
}
.bar::after {
transform: translateY(9px);
}
.main {
position: relative;
width: 100%;
left: 0;
z-index: 5;
overflow: hidden;
transform-origin: left;
transform-style: preserve-3d;
transition: 0.5s;
}
header {
min-height: 100vh;
width: 100%;
background: url("../milky_way.jpg") no-repeat top center / cover;
position: relative;
}
.overlay {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(43, 51, 59, 0.8);
display: flex;
justify-content: center;
align-items: center;
}
.inner {
max-width: 50rem;
text-align: center;
color: #fff;
padding: 0 2rem;
}
.title {
font-size: 2.72rem;
margin-bottom: 1.25rem
}
.description {
font-family: "Open Sans";
margin-bottom: 3rem;
}
.btn {
font-size: 0.75rem;
margin: 1rem;
padding: 0.6rem 1.2rem;
background-color: #1179e7;
border: 2px solid #1179e7;
border-radius: 25px;
color: #fff;
background-color: transparent;
text-transform: uppercase;
cursor: pointer;
text-decoration: none;
}
.btn:hover {
animation: pulse 1s;
box-shadow: 0 0 0 2em transparent;
}
#keyframes pulse {
0% {
box-shadow: 0 0 0 0 #1179e7;
}
}
.container.active .bar {
transform: rotate(360deg);
background-color: transparent;
}
.container.active .bar::before {
transform: translateY(0) rotate(45deg);
}
.container.active .bar::after {
transform: translateY(0) rotate(-45deg);
}
.container.active .main {
animation: main-animation 0.5 ease;
cursor: pointer;
transform: perspective(1300px) rotateY(20deg) translateZ(310px) scale(0.5);
}
#keyframes main-animation {
from{
transform: translate(0);
}
to{
transform: perspective(1300px) rotateY(20deg) translateZ(310px) scale(0.5);
}
}
.links {
position: absolute;
width: 30%;
right: 0;
top: 0;
height: 100vh;
z-index: 2;
display: flex;
justify-content: center;
align-items: center;
}
ul {
list-style: none;
}
.links a {
text-decoration: none;
color: #bbb;
padding: 0.7rem 0;
display: inline-block;
font-size: 1rem;
font-weight: 300;
text-transform: uppercase;
letter-spacing: 1px;
transition: 0.3s;
opacity: 0;
transform: translateY(10px);
animation: hide 0.5s forwards ease;
}
.links a:hover {
color: #fff;
}
.container.active .links a {
animation: appear 0.5s forwards ease var(--i);
}
#keyframes appear {
from{
opacity: 0;
transform: translateY(10px);
}
to{
opacity: 1;
transform: translateY(0px);
}
}
#keyframes hide {
from{
opacity: 1;
transform: translateY(0px);
}
to{
opacity: 0;
transform: translateY(10px);
}
}
.shadow {
position: absolute;
width: 100%;
height: 100vh;
top: 0;
left: 0;
transform-style: preserve-3d;
transform-origin: left;
transition: 0.5s;
background-color: white;
}
.shadow.one {
z-index: -1;
opacity: 0.15;
}
.shadow.two {
z-index: -2;
opacity: 0.1;
}
.container.active .shadow.one {
animation: shadow-one 0.6s ease-out;
transform: perspective(1300px) rotateY(20deg) translateZ(215px) scale(0.5);
}
#keyframes shadow-one {
0%{
transform: translate(0);
}
5%{
transform: perspective(1300px) rotateY(20deg) translateZ(310px) scale(0.5);
}
100%{
transform: perspective(1300px) rotateY(20deg) translateZ(215px) scale(0.5);
}
}
.container.active .shadow.two {
animation: shadow-two 0.6s ease-out;
transform: perspective(1300px) rotateY(20deg) translateZ(120px) scale(0.5);
}
#keyframes shadow-two {
0%{
transform: translate(0);
}
5%{
transform: perspective(1300px) rotateY(20deg) translateZ(310px) scale(0.5);
}
100%{
transform: perspective(1300px) rotateY(20deg) translateZ(120px) scale(0.5);
}
}
.container.active .main:hover + .shadow.one {
transform: perspective(1300px) rotateY(20deg) translateZ(230px) scale(0.5);
}
.container.active .main:hover {
transform: perspective(1300px) rotateY(20deg) translateZ(340px) scale(0.5);
}
#services,
#portfolio,
#about,
#contact {
display: none;
}
<div class="container">
<div class="navbar">
<div class="menu">
<div class="hamburger-menu">
<div class="bar">
</div>
</div>
</div>
</div>
<div class="main-container">
<div class="main" id="home">
<header>
<div class="overlay">
<div class="inner">
<h2 class="title">home</h2>
</div>
</div>
</header>
</div>
<div class="main" id="services">
<header>
<div class="overlay">
<div class="inner">
<h2 class="title">services</h2>
</div>
</div>
</header>
</div>
<div class="main" id="portfolio">
<header>
<div class="overlay">
<div class="inner">
<h2 class="title">portfolio</h2>
</div>
</div>
</header>
</div>
<div class="main" id="about">
<header>
<div class="overlay">
<div class="inner">
<h2 class="title">about</h2>
</div>
</div>
</header>
</div>
<div class="main" id="contact">
<header>
<div class="overlay">
<div class="inner">
<h2 class="title">contact</h2>
</div>
</div>
</header>
</div>
<div class="shadow one">
</div>
<div class="shadow two">
</div>
</div>
<div class="links">
<ul>
<li>
Home
</li>
<li>
Services
</li>
<li>
Portfolio
</li>
<li>
About
</li>
<li>
Contact
</li>
</ul>
</div>
</div>

CSS and JS issue

Hello I have problem with that code, I want to make sidebar when she going in everything is ok but when I press burger button again
the block does not animate.
Code here:
https://pastebin.pl/view/74464f3c

You left out your animation keyframes in css, and also a few things in your .hide class, take a look ;) :
const burger = document.querySelector(".burger");
let a = document.querySelector(".nav");
let b = 0;
burger.addEventListener("click", function() {
burger.classList.toggle("active");
if (burger.classList.contains("active") == true) {
document.querySelector(".nav").classList.add("show");
document.querySelector(".nav").classList.remove("hide");
b++;
} else if (b == 1) {
document.querySelector(".nav").classList.toggle("show");
document.querySelector(".nav").classList.add("hide");
b--;
}
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Roboto Condensed', sans-serif;
}
body {
display: flex;
flex-direction: row;
}
.burger {
position: fixed;
top: 30px;
right: 30px;
width: 60px;
height: 45px;
transition: .2s;
cursor: pointer;
}
.burger.active {
transform: rotate(-90deg);
}
.burger span {
position: absolute;
width: 100%;
height: 10px;
background-color: black;
left: 0;
transition: top .2s .2s, bottom .2s .2s, opacity .2s .2s, transform .2s .4s;
}
.burger span:nth-child(1) {
top: 0
}
.burger.active span:nth-child(1) {
top: calc(50% - 5px);
transform: rotate(45deg);
}
.burger span:nth-child(2) {
top: calc(50% - 5px);
}
.burger.active span:nth-child(2) {
opacity: 0;
}
.burger span:nth-child(3) {
bottom: 0;
}
.burger.active span:nth-child(3) {
bottom: calc(50% - 5px);
transform: rotate(-45deg);
}
.nav {
display: none;
height: 100vh;
width: 15vw;
background-color: #3652f5;
text-align: center;
font-size: 100%;
}
ul,
ul li {
display: block;
list-style: none;
margin: 0;
padding: 0;
}
ul li {
font-size: 2em;
margin-bottom: 30px;
}
i {
margin-bottom: 30px;
color: white;
}
.icon-home {
margin-top: 30px;
}
.nav.show {
display: block;
animation: fadeInLeft .5s linear;
width: 15vw;
}
.nav.hide {
display: block;
opacity: 0;
animation: fadeOutLeft .5s linear;
width: 15vw;
}
#keyframes fadeOutLeft {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(-15vw);
}
}
#keyframes fadeInLeft {
0% {
opacity: 0;
transform: translateX(-20px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
<div class="burger">
<span></span>
<span></span>
<span></span>
</div>
<nav class="nav">
<ul>
<li><i class='icon-home'></i></li>
<li><i class='icon-user'></i></li>
<li><i class='icon-facebook'></i></li>
<li><i class='icon-twitter'></i></li>
<li><i class='icon-linkedin'></i></li>
</ul>
</nav>

Responsive menu does not show

I have created a responsive menu but it doesn't show. I would like to use a hamburger menu button. When it is active (button transform+transition, the hamburger menu icon -> the close icon), the ul will slide out from the right ( background -> opacity.5).
I am not sure which part is erroneous. Do you have any suggestions?
$(document).ready(function() {
$('#toggle').on("click", function() {
$("#overlay").toggleClass('active');
$('#overlay').toggleClass('open');
});
});
.button-container {
position: fixed;
top: 5%;
right: 2%;
height: 27px;
width: 35px;
cursor: pointer;
z-index: 100;
transition: opacity .25s ease;
opacity: 1;
content: "";
}
.button-container:hover {
opacity: .7;
}
.top:active {
transform: translate(11px) translateX(0) rotate(45deg);
}
.middle:active {
opacity: 0;
}
.bottom:active {
transform: translateY(-11px) translateX(0) rotate(-45deg);
}
span {
background: rgba(0, 0, 0, 0.6);
border: none;
height: 5px;
width: 5%;
position: absolute;
top: 0;
left: 0;
transition: all .35s ease;
cursor: pointer;
}
.overlay {
position: fixed;
background: rgba(0, 0, 0, 0.6);
top: 0;
left: 0;
width: 5%;
height: 0%;
opacity: .6;
visibility: hidden;
transition: opacity .35s, visibility .35s, height .35s;
}
li {
animation: fadeInRight .5s ease forwards;
animation-delay: .35s;
}
li:nth-of-type(2) {
animation-delay: .4s;
}
li:nth-of-type(3) {
animation-delay: .45s;
}
li:nth-of-type(4) {
animation-delay: .50s;
}
nav {
position: relative;
height: 70%;
top: 20%;
transform: translateY(-50%);
font-size: 0.8em;
}
ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
position: relative;
height: 100%;
}
li {
display: block;
height: 25%;
min-height: 50px;
position: relative;
opacity: 0;
}
a {
display: block;
position: relative;
text-decoration: none;
overflow: hidden;
}
a:hover {
transform: scale(1);
}
a:hover:after,
a:focus:after,
a:active:after {
width: 30%;
}
a:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0%;
transform: translateX(-50%);
height: 3px;
background: rgba(0, 0, 0, 0.6);
transition: .35s;
}
#keyframes fadeInRight {
0% {
opacity: 0;
left: 20%;
}
100% {
opacity: 1;
left: 0;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="button-container" id="toggle">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
<div class="overlay" id="overlay">
<nav class="overlay-menu">
<ul>
<li>Home</li>
<li>About</li>
<li>12 Constellations</li>
<li>Stargazing</li>
</ul>
</nav>
</div>

You need to add visibility:visible to .active class. and also some css modification to show menu bars.
.active {
visibility: visible;
}
$(document).ready(function() {
$('#toggle').on("click", function() {
$("#overlay").toggleClass('active');
$('#overlay').toggleClass('open');
});
});
.button-container {
position: fixed;
top: 5%;
right: 2%;
height: 27px;
width: 35px;
cursor: pointer;
z-index: 100;
transition: opacity .25s ease;
opacity: 1;
}
.button-container:hover {
opacity: .7;
}
.top:active {
transform: translate(11px) translateX(0) rotate(45deg);
}
.middle:active {
opacity: 0;
}
.bottom:active {
transform: translateY(-11px) translateX(0) rotate(-45deg);
}
span {
background: rgba(0, 0, 0, 0.6);
border: none;
height: 5px;
width: 30px;
position: absolute;
top: 0;
left: 0;
transition: all .35s ease;
cursor: pointer;
}
.middle{
top:10px;
}
.bottom{
top:20px;
}
.overlay {
position: fixed;
background: rgba(0, 0, 0, 0.6);
top: 0;
left: 0;
width: 5%;
height: 0%;
opacity: .6;
visibility: hidden;
transition: opacity .35s, visibility .35s, height .35s;
}
li {
animation: fadeInRight .5s ease forwards;
animation-delay: .35s;
}
li:nth-of-type(2) {
animation-delay: .4s;
}
li:nth-of-type(3) {
animation-delay: .45s;
}
li:nth-of-type(4) {
animation-delay: .50s;
}
nav {
position: relative;
height: 70%;
top: 20%;
transform: translateY(-50%);
font-size: 0.8em;
}
ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
position: relative;
height: 100%;
}
li {
display: block;
height: 25%;
min-height: 50px;
position: relative;
opacity: 0;
}
a {
display: block;
position: relative;
text-decoration: none;
overflow: hidden;
}
a:hover {
transform: scale(1);
}
a:hover:after,
a:focus:after,
a:active:after {
width: 30%;
}
a:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0%;
transform: translateX(-50%);
height: 3px;
background: rgba(0, 0, 0, 0.6);
transition: .35s;
}
#keyframes fadeInRight {
0% {
opacity: 0;
left: 20%;
}
100% {
opacity: 1;
left: 0;
}
}
.active {
visibility: visible;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="button-container" id="toggle">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
<div class="overlay" id="overlay">
<nav class="overlay-menu">
<ul>
<li>Home</li>
<li>About</li>
<li>12 Constellations</li>
<li>Stargazing</li>
</ul>
</nav>
</div>

I would make a second class for the mobile devices.
<div class="overlay" id="overlay"> // copy //Change Class
<nav class="overlay-menu"> //copy //Change Class
<ul>
<li>Home</li>
<li>About</li>
<li>12 Constellations</li>
<li>Stargazing</li>
</ul>
</nav>
</div>

CSS Background-image not displaying on squarepace website

so my background image won't display properly on my Squarespace website mydietgoal(dot)com/legalities
It only holds the black background color I set but nothing more. The code i've tested, when plugged into codepen works perfectly but not when i plug it into my site.
The javascript works perfectly fine on both. But in the CSS area where i plug my image links, they don't appear.
(The rest of the code is repeated for the next 2 div containers, if it could be solved with just the first that'd be great)
Thank you so much,
Chris
Codepen: i.imgur.com/M8Jwoy6.png?1
My site: mydietgoal(dot)com/legalities
<style>
*,
*:before,
*:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: #1f1f1f;
font-family: 'Open Sans', Helvetica, Arial, sans-serif;
}
.cont {
position: relative;
overflow: hidden;
height: 100vh;
padding: 80px 70px;
}
.cont__inner {
position: relative;
height: 100%;
}
.cont__inner:hover .el__bg:after {
opacity: 1;
}
.el {
position: absolute;
left: 0;
top: 0;
width: 19.2%;
height: 100%;
background: #252525;
transition: transform 0.6s 0.7s, width 0.7s, opacity 0.6s 0.7s, z-index 0s 1.3s;
will-change: transform, width, opacity;
}
.el:not(.s--active) {
cursor: pointer;
}
.el__overflow {
overflow: hidden;
position: relative;
height: 100%;
}
.el__inner {
overflow: hidden;
position: relative;
height: 100%;
transition: transform 1s;
}
.cont.s--inactive .el__inner {
transform: translate3d(0, 100%, 0);
}
.el__bg {
position: relative;
width: calc(100vw - 140px);
height: 100%;
transition: transform 0.6s 0.7s;
will-change: transform;
}
.el__bg:before {
content: "";
position: absolute;
left: 0;
top: -5%;
width: 100%;
height: 110%;
background-size: cover;
background-position: center center;
transition: transform 1s;
transform: translate3d(0, 0, 0) scale(1);
}
.cont.s--inactive .el__bg:before {
transform: translate3d(0, -100%, 0) scale(1.2);
}
.el.s--active .el__bg:before {
transition: transform 0.8s;
}
.el__bg:after {
content: "";
z-index: 1;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
opacity: 0;
transition: opacity 0.5s;
}
.cont.s--el-active .el__bg:after {
transition: opacity 0.5s 1.4s;
opacity: 1 !important;
}
.el__preview-cont {
z-index: 2;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
transition: ease-in-out 0.3s;
}
.cont.s--inactive .el__preview-cont {
opacity: 0;
transform: translateY(10px);
}
.cont.s--el-active .el__preview-cont {
opacity: 0;
transform: translateY(30px);
transition: all 0.5s;
}
.el__heading {
color: #ffffff;
text-transform: uppercase;
font-size: 18px;
}
.el__preview-cont:hover {
opacity: 0;
}
.el__content {
z-index: -1;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
padding: 30px;
opacity: 0;
pointer-events: none;
transition: all 0.1s;
}
.el.s--active .el__content {
z-index: 2;
opacity: 1;
pointer-events: auto;
transition: all 0.5s 1.4s;
}
.el__text {
text-transform: uppercase;
font-size: 40px;
color: #fff;
}
.el__close-btn {
z-index: -1;
position: absolute;
right: 10px;
top: 10px;
width: 60px;
height: 60px;
opacity: 0;
pointer-events: none;
transition: all 0s 0.45s;
cursor: pointer;
}
.el.s--active .el__close-btn {
z-index: 5;
opacity: 1;
pointer-events: auto;
transition: all 0s 1.4s;
}
.el__close-btn:before,
.el__close-btn:after {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 100%;
height: 8px;
margin-top: -4px;
background: #fff;
opacity: 0;
transition: opacity 0s;
}
.el.s--active .el__close-btn:before,
.el.s--active .el__close-btn:after {
opacity: 1;
}
.el__close-btn:before {
transform: rotate(45deg) translateX(100%);
}
.el.s--active .el__close-btn:before {
transition: all 0.3s 1.4s cubic-bezier(0.72, 0.09, 0.32, 1.57);
transform: rotate(45deg) translateX(0);
}
.el__close-btn:after {
transform: rotate(-45deg) translateX(100%);
}
.el.s--active .el__close-btn:after {
transition: all 0.3s 1.55s cubic-bezier(0.72, 0.09, 0.32, 1.57);
transform: rotate(-45deg) translateX(0);
}
.el__index {
overflow: hidden;
position: absolute;
left: 0;
bottom: -80px;
width: 100%;
height: 100%;
min-height: 250px;
text-align: center;
font-size: 4vw;
text-color: #f57200;
line-height: 0.85;
font-weight: bold;
transition: transform 0.5s, opacity 0.3s 1.4s;
transform: translate3d(0, 1vw, 0);
}
.el:hover .el__index {
transform: translate3d(0, 0, 0);
}
.cont.s--el-active .el__index {
transition: transform 0.5s, opacity 0.3s;
opacity: 0;
}
.el__index-front {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
}
.el__index-back,
.el__index-front {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
}
.el__index-back {
color: #2f3840;
opacity: 0;
transition: opacity 0.25s 0.25s;
}
.el:hover .el__index-back {
transition: opacity 0.25s;
opacity: 0;
}
.el__index-overlay {
overflow: hidden;
position: relative;
transform: translate3d(0, 100%, 0);
transition: transform 0.3s 0.1s;
color: transparent;
}
.el__index-overlay:before {
content: attr(data-index);
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
color: #f57200;
transform: translate3d(0, -100%, 0);
transition: transform 0.3s 0.1s;
}
.el:hover .el__index-overlay {
transform: translate3d(0, 0, 0);
}
.el:hover .el__index-overlay:before {
transform: translate3d(0, 0, 0);
}
.el:nth-child(1) {
transform: translate3d(0%, 0, 0);
transform-origin: 50% 50%;
}
.cont.s--el-active .el:nth-child(1):not(.s--active) {
transform: scale(0.5) translate3d(0%, 0, 0);
transition: transform 0.95s, opacity 0.95s;
}
.el:nth-child(1) .el__inner {
transition-delay: 0s;
}
.el:nth-child(1) .el__bg {
transform: translate3d(0%, 0, 0);
}
.el:nth-child(1) .el__bg:before {
transition-delay: 0s;
background-image: url("https://static1.squarespace.com/static/59a7820e2994ca11766093d3/t/59d53a662278e77f4c59a518/1507146344134/background-security-my-diet-goal-privacy-policy-hd.jpg");
}
</style>

Overlay nav doesn't cover all elements on the page

I'm having a bit of trouble getting the overlay nav to cover all the elements within the page. When I create a container or row for an individual section within the page the overlay seems to not overlay.
Here's the code and a link to codepen http://codepen.io/anon/pen/aOGYdy
HTML
<div class="button_container" id="toggle">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
<div class="overlay" id="overlay">
<nav id="topNav" class="overlay-menu">
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>Work</li>
<li>Contact</li>
</ul>
</nav>
</div>
<section id="home">
<div class="container content-section">
<div class="col-md-12 intro-text no-padding">
<div class="col-md-5 intro-heading">Hello, I'm <div class="intro-heading blue">Tom<font color="#333">.</font>
</div>
<div ng-app="typeApp">
<section ng-controller="typeController" class="content">
<h2 ng-class="{typing: isTyping}">I'm {{ something }}<span class="cursor"> </span></h2>
</section>
</div>
</div>
<div class="col-md-7">
<img src="http://i.imgur.com/GRLosqO.png" class="img-responsive align="right" " alt="">
</div>
</div>
</div>
</section>
</section>
<section id="about">
<h1>About</h1>
</section>
<section id="contact">
<p>Contact</p>
</section>
CSS
html, body {
height: 100%;
margin: 0;
font-size: 21px;
}
/* TYPE */
h1 {
font-size: 2.7em;
font-weight: 900;
text-transform: uppercase;
letter-spacing: -2px;
color: #222;
margin-bottom: .3em;
}
h2 {
font-weight: 200;
-webkit-text-stroke: 1px rgba(0,0,0,0.1);
}
h2 span.cursor {
display: inline-block;
background: #333;
margin-left: 1px;
width: .05em;
animation: blink 2s linear 0s infinite;
}
h2.typing span.cursor {
animation: none;
}
#keyframes blink {
0% { background: #FFF }
47% { background: #FFF }
50% { background: #333 }
97% { background: #333 }
100% { background: #FFF }
}
/* SECTIONS */
html, body {
height: 100%;
margin: 0;
padding: 0;
margin:0;
}
section {
height: 100%;
width: 100%;
display: table;
}
#home {
background-color: #ffffff;
}
#portfolio {
background-color: #1abc9c;
}
#about {
background-color: #e67e22;
}
#contact {
background-color: #22a7f0;
}
p {
display: table-cell;
text-align: center;
vertical-align: middle;
font: 700 3em/1 'Open Sans', sans-serif;
text-shadow: 0.1em 0.1em rgba(0, 0, 0, 0.2);
color: #fff;
}
.container {
position: absolute;
width: 100%;
height: 100%;
text-align: center;
top: 40%;
left: 0;
margin: 0 auto;
font-family: 'Roboto', sans-serif;
}
.container p {
font-size: 20px;
}
.container a {
display: inline-block;
position: relative;
text-align: center;
color: #35B0FC;
text-decoration: none;
font-size: 20px;
overflow: hidden;
top: 5px;
}
.container a:after {
content: '';
position: absolute;
background: #FF5252;
height: 2px;
width: 0%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
left: 50%;
bottom: 0;
-webkit-transition: .35s ease;
transition: .35s ease;
}
.container a:hover:after, .container a:focus:after, .container a:active:after {
width: 100%;
}
.button_container {
position: fixed;
top: 3%;
right: 3%;
height: 25px;
width: 35px;
cursor: pointer;
z-index: 100;
-webkit-transition: opacity .25s ease;
transition: opacity .25s ease;
}
.button_container:hover {
opacity: .7;
}
.button_container.active .top {
-webkit-transform: translateY(11px) translateX(0) rotate(45deg);
-ms-transform: translateY(11px) translateX(0) rotate(45deg);
transform: translateY(11px) translateX(0) rotate(45deg);
background: #FFF;
}
.button_container.active .middle {
opacity: 0;
background: #FFF;
}
.button_container.active .bottom {
-webkit-transform: translateY(-11px) translateX(0) rotate(-45deg);
-ms-transform: translateY(-11px) translateX(0) rotate(-45deg);
transform: translateY(-11px) translateX(0) rotate(-45deg);
background: #FFF;
}
.button_container span {
background: black;
border: none;
height: 5px;
width: 100%;
position: absolute;
top: 0;
left: 0;
-webkit-transition: all .35s ease;
transition: all .35s ease;
cursor: pointer;
}
.button_container span:nth-of-type(2) {
top: 11px;
}
.button_container span:nth-of-type(3) {
top: 22px;
}
.overlay {
position: fixed !important;
background: #22a7f0;
top: 0;
left: 0;
width: 100%;
height: 0%;
opacity: 0;
visibility: hidden;
-webkit-transition: opacity .35s, visibility .35s, height .35s;
transition: opacity .35s, visibility .35s, height .35s;
overflow: hidden;
}
.overlay.open {
opacity: .9;
visibility: visible;
height: 100%;
}
.overlay.open li {
-webkit-animation: fadeInRight .5s ease forwards;
animation: fadeInRight .5s ease forwards;
-webkit-animation-delay: .35s;
animation-delay: .35s;
}
.overlay.open li:nth-of-type(2) {
-webkit-animation-delay: .4s;
animation-delay: .4s;
}
.overlay.open li:nth-of-type(3) {
-webkit-animation-delay: .45s;
animation-delay: .45s;
}
.overlay.open li:nth-of-type(4) {
-webkit-animation-delay: .50s;
animation-delay: .50s;
}
.overlay nav {
position: relative;
height: 70%;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
font-size: 50px;
font-family: 'Vollkorn', serif;
font-weight: 400;
text-align: center;
}
.overlay ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
position: relative;
height: 100%;
}
.overlay ul li {
display: block;
height: 25%;
height: calc(100% / 4);
min-height: 50px;
position: relative;
opacity: 0;
}
.overlay ul li a {
display: block;
position: relative;
color: #FFF;
text-decoration: none;
overflow: hidden;
}
/*
.overlay ul li a:hover:after, .overlay ul li a:focus:after, .overlay ul li a:active:after {
width: relative;
}
*/
.overlay ul li a:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
height: 3px;
background: #FFF;
-webkit-transition: .35s;
transition: .35s;
}
#-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;
}
}
JavaScript
//nav toggle
$('#toggle').click(function() {
$(this).toggleClass('active');
$('#overlay').toggleClass('open');
});
$("nav li").click(function() {
$('#overlay').toggleClass('open');
$('#toggle').toggleClass('active');
});
//pages size
(function () {
var px, sections, speed, wait;
sections = document.getElementsByTagName('section');
px = 100;
speed = 0.5;
wait = 2000;
$(window).on('scroll', function () {
clearTimeout($.data(this, 'timer'));
return $.data(this, 'timer', setTimeout(function () {
var i, results, sectionY, time, windowY;
windowY = $(window).scrollTop();
i = sections.length - 1;
results = [];
while (i >= 0) {
if (sectionY - px < windowY && windowY < sectionY + px) {
time = Math.abs(windowY - sectionY) / speed;
$(document.body).animate({ scrollTop: sectionY }, time, 'swing');
}
results.push(i--);
}
}, wait));
});
}.call(this));
//slide
// Cache selectors
var lastId,
topMenu = $("#topNav"),
topMenuHeight = topMenu.outerHeight(),
// All list items
menuItems = topMenu.find("a"),
// Anchors corresponding to menu items
scrollItems = menuItems.map(function(){
var item = $($(this).attr("href"));
if (item.length) { return item; }
});
// Bind click handler to menu items
// so we can get a fancy scroll animation
menuItems.click(function(e){
var href = $(this).attr("href"),
o = href === "#" ? 0 : $(href).offset().top-topMenuHeight+15;
$('html, body').stop().animate({
scrollTop: o
}, 800);
e.preventDefault();
});
// Bind to scroll
$(window).scroll(function(){
// Get container scroll position
var fromTop = $(this).scrollTop()+topMenuHeight;
// Get id of current scroll item
var cur = scrollItems.map(function(){
if ($(this).offset().top < fromTop)
return this;
});
// Get the id of the current element
cur = cur[cur.length-1];
var id = cur && cur.length ? cur[0].id : "";
if (lastId !== id) {
lastId = id;
// Set/remove active class
menuItems
.parent().removeClass("active")
.end().filter("[href=#"+id+"]").parent().addClass("active");
}
});

Just add a z-index to .overlay
http://codepen.io/anon/pen/oXdqYy
.overlay {
position: fixed !important;
background: #22a7f0;
top: 0;
left: 0;
width: 100%;
height: 0%;
opacity: 0;
visibility: hidden;
-webkit-transition: opacity .35s, visibility .35s, height .35s;
transition: opacity .35s, visibility .35s, height .35s;
overflow: hidden;
z-index: 99;
}

We Keep Coding

JavaScript is the programming language of the Web.

Adapting image gallery code snippet to Django project - javascript

Related

Show / Hide entire HTML pages clicking on menu links - pure JS

CSS and JS issue

Responsive menu does not show

CSS Background-image not displaying on squarepace website

Overlay nav doesn't cover all elements on the page

Categories

Resources