Develop Reference

Needing Help Tweaking The Ability to Customize Message Body

I've been sitting on this for two weeks and feel really stumped. I'm pretty much an extreme noob who is teaching myself coding so I can create an interactive game with Twine (Sugarcube). Everything in this code is perfect and I've customized it since to my liking BUT I have one glaring issue. Whenever you click on an email, it expands to the same one message body. It doesn't change, no matter which message preview you click.
My request is for anyone that can help me or point me in the direction on how to tweak the "EmailFull" div class (if that's what needs to be tweaked) so that it changes every time you click a different message. I will be forever grateful because I feel like no matter if I create a new div class, rearrange the order, or create a new JS function, it doesn't pan out right.
Here's the full code on CodePen: https://codepen.io/Lance-Jernigan/pen/yJbXOK
HTML:
<div class="EmailsWrapper">
<div class="EmailFull">
<p>My name is Mark Cohan, and I'm the founder and CEO of Appalo. Appalo is one of the best mobile developer companies in Singapore.</p>
<p>We have an app out right now. You can check it out in the appstore. However, I'm looking to take this app to the next level.</p>
<p>I really would be excited to work together. Please do let me know</p>
</div>
<div class="EmailTitle">
<p class="EmailTime">11:12 AM</p>
<h1>Sergey Zolkin</h1>
<h2>New Project Inquiry</h2>
<p class="EmailPreview">Hi Matt! Are you available for...</p>
</div>
</div>
<div class="Email">
<div class="EmailTitle">
<p class="EmailTime">8:13 AM</p>
<h1>Slack</h1>
<h2>Notiications from the team..</h2>
<p class="EmailPreview">Hi Matt, You have a new message...</p>
</div>
</div>
<div class="EmailTitle">
<p class="EmailTime">7:24 AM</p>
<h1>Clark from Invision</h1>
<h2>Weekly digest: How to design...</h2>
<p class="EmailPreview">Plus why product thinking is the...</p>
</div>
CSS:
.EmailsWrapper {
height: 100%;
margin: auto;
position: relative;
background: linear-gradient(to bottom, #313a5a 0%,#424a6b 100%);
}
.EmailFull {
position: absolute;
top: 115px;
background: #f2f2f2;
height: 100%;
padding: 0px 25px;
color: rgba(0, 0, 0, .6);
max-height: 0px;
overflow: hidden;
transition: all .3s;
}
.EmailFull.active {
max-height: 453px;
overflow: scroll;
}
.EmailFull p {
line-height: 1.6em;
}
.Email {
box-sizing: border-box;
border-radius: 3px;
background: rgba(255, 255, 255, .1);
padding: 5px;
width: 100%;
max-width: 90%;
max-height: 100px;
overflow: hidden;
margin: 3px auto;
transition: all .3s;
display: flex;
flex-wrap: wrap;
cursor: pointer;
position: relative;
opacity: 1;
}
.Email.active {
margin-top: -76px;
padding: 10px 0px;
background: #21294a;
color: #fff;
z-index: 15;
max-width: 100%;
cursor: initial;
border-radius: 0px;
}
.Email.deactive {
max-height: 0px;
padding: 0px;
margin: 0px auto;
opacity: 0;
}
JS:
$(function() {
$(".Email").on("click", function() {
$(this).addClass("active")
$(".Email").not(".active").addClass("deactive")
$(".hamburger").addClass("active");
$(".EmailFull").addClass("active");
$(".headerLabel h1").text("MESSAGE");
})
$(".hamburgerWrapper").on("click", function() {
$(".Email.active").removeClass("active")
$(".Email.deactive").removeClass("deactive")
$(".hamburger").removeClass("active");
$(".EmailFull").removeClass("active");
$(".headerLabel h1").text("INBOX");
})
})

You are not setting the content of .EmailFull properly. I slightly modified your javascript code to include this
$(".EmailFull").html($('<div />').html($(".EmailPreview", this).text()));
// Inspired by https://dribbble.com/shots/2810563-Messages-UI-UX-Animation
$(function() {
$(".Email").on("click", function() {
$(this).addClass("active")
$(".Email").not(".active").addClass("deactive")
$(".hamburger").addClass("active");
$(".EmailFull").addClass("active");
$(".EmailFull").html($('<div />').html($(".EmailPreview", this).text()));
$(".headerLabel h1").text("MESSAGE");
})
$(".hamburgerWrapper").on("click", function() {
$(".Email.active").removeClass("active")
$(".Email.deactive").removeClass("deactive")
$(".hamburger").removeClass("active");
$(".EmailFull").removeClass("active");
$(".headerLabel h1").text("INBOX");
})
})
body {
background: #732bde;
padding-top: 50px;
font-family: Helvetica;
}
body * {
box-sizing: border-box;
}
.wrapper {
width: 320px;
height: 568px;
background: #fff;
margin: auto;
position: relative;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 8);
}
.statusBar {
height: 20px;
width: 100%;
background: #21294a;
position: absolute;
top: 0px;
display: flex;
justify-content: space-between;
z-index: 10;
}
.signal {
margin: 5px 5px;
padding: 0px;
display: flex;
width: 50px;
}
.signal > span {
display: inline-block;
border-radius: 5px;
width: 5px;
height: 5px;
border: solid 1px #fff;
margin: 0px 1px;
}
.signal > span.active {
background: #fff;
z-index: 3;
}
.clock p {
color: #fff;
font-weight: 100;
font-size: 10px;
padding: 0px;
margin: 0px;
}
.battery {
margin: 3px 5px;
width: 50px;
}
.battery span {
display: block;
height: 7px;
width: 17px;
border-radius: 1px;
background: #fff;
position: relative;
float: right;
}
.battery span:after {
content: " ";
display: inline-block;
width: 3px;
height: 4px;
background: #fff;
border-radius: 4px;
position: absolute;
right: -2px;
top: 1px;
}
.header {
padding: 5px 15px 15px 15px;
width: 100%;
background: #21294a;
position: absolute;
top: 20px;
display: flex;
justify-content: space-between;
align-items: flex-end;
z-index: 10;
border-bottom: solid 1px #424a63;
}
.header:after {
content: " ";
display: block;
height: 4px;
width: 85%;
background: linear-gradient(to right, #5a6ab8 0%,#4bafcd 100%);
position: absolute;
bottom: -4px;
left: 0px;
right: 0px;
box-shadow: 0px 3px 5px rgba(0, 0, 0, .2);
}
.hamburgerWrapper {
margin: 0px;
padding: 0px;
width: 50px;
}
.hamburger {
width: 13px;
}
.hamburger.active {
cursor: pointer;
}
.hamburger span {
display: block;
margin: 2px auto;
height: 2px;
width: 100%;
background: #467797;
border-radius: 9px;
opacity: 1;
transform: rotate(0deg);
transition: .25s ease-in-out;
}
.hamburger.active span:nth-child(1) {
transform: rotate(-45deg) translate(-4px, -2px);
width: 75%;
}
.hamburger.active span:nth-child(3) {
transform: rotate(45deg) translate(-3px, 2px);
width: 75%;
}
.headerLabel h1 {
color: #fff;
font-size: 15px;
font-weight: 100;
line-height: 1em;
padding: 0px;
margin: 0px;
}
.headerMenu {
width: 50px;
text-align: right;
}
.headerMenu h2 {
color: #467797;
font-size: 12px;
font-weight: 600;
line-height: 1em;
padding: 0px;
margin: 0px;
}
.EmailsWrapper {
height: 100%;
margin: auto;
position: relative;
background: linear-gradient(to bottom, #313a5a 0%,#424a6b 100%);
}
.EmailFull {
position: absolute;
top: 115px;
background: #f2f2f2;
height: 100%;
padding: 0px 25px;
color: rgba(0, 0, 0, .6);
max-height: 0px;
overflow: hidden;
transition: all .3s;
}
.EmailFull.active {
max-height: 453px;
overflow: scroll;
}
.EmailFull p {
line-height: 1.6em;
}
.EmailSearch {
width: 90%;
margin: auto;
padding: 65px 0px 20px 0px;
}
.EmailSearch input {
width: 100%;
font-size: 12px;
font-weight: 100;
color: rgba(255, 255, 255, .5);
outline: none;
background: transparent;
border: none;
padding: 15px 0px;
border-bottom: solid 1px rgba(255, 255, 255, .1);
}
.EmailSearch input::-webkit-input-placeholder {
color: rgba(255, 255, 255, .5);
font-weight: 100;
}
.Email {
box-sizing: border-box;
border-radius: 3px;
background: rgba(255, 255, 255, .1);
padding: 5px;
width: 100%;
max-width: 90%;
max-height: 100px;
overflow: hidden;
margin: 3px auto;
transition: all .3s;
display: flex;
flex-wrap: wrap;
cursor: pointer;
position: relative;
opacity: 1;
}
.Email.light {
background: rgba(255, 255, 255, .4);
}
.Email.active {
margin-top: -76px;
padding: 10px 0px;
background: #21294a;
color: #fff;
z-index: 15;
max-width: 100%;
cursor: initial;
border-radius: 0px;
}
.Email.deactive {
max-height: 0px;
padding: 0px;
margin: 0px auto;
opacity: 0;
}
.Email .ImgWrapper {
width: 20%;
display: flex;
justify-content: center;
align-items: center;
}
.Email .img {
width: 40px;
height: 40px;
background: #fff;
border-radius: 100%;
position: relative;
}
.Email .img.notif:before {
content: " ";
display: block;
width: 12px;
height: 12px;
background: #5bc3e4;
border-radius: 100%;
border: 2px solid #868b9d;
position: absolute;
top: -2px;
left: -2px;
opacity: 1;
transition: all .3s;
}
.Email.active .img.notif:before {
opacity: 0;
}
.EmailTitle {
width: 80%;
position: relative;
color: #fff;
display: flex;
flex-wrap: wrap;
align-items: center;
}
.EmailTitle .EmailTime {
position: absolute;
top: 0px;
right: 0px;
font-size: 12px;
font-weight: 100;
margin: 0px;
padding: 5px;
}
.EmailTitle h1 {
margin: 0px;
padding: 0px;
font-size: 15px;
line-height: 1em;
font-weight: 500;
width: 100%;
}
.EmailTitle h2 {
margin: 0px;
padding: 3px 0px;
font-size: 12px;
line-height: 1em;
font-weight: 300;
}
.EmailTitle p.EmailPreview {
margin: 5px 0px;
max-height: 25px;
padding: 0px;
font-size: 12px;
font-weight: 100;
opacity: .8;
overflow: hidden;
transition: all .3s;
}
.Email.active .EmailTitle p.EmailPreview {
max-height: 0px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="statusBar">
<div class="signal">
<span class="active"></span>
<span class="active"></span>
<span class="active"></span>
<span></span>
<span></span>
</div>
<div class="clock">
<p>10:15 AM</p>
</div>
<div class="battery">
<span></span>
</div>
</div>
<div class="header">
<div class="hamburgerWrapper">
<div class="hamburger">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="headerLabel">
<h1>INBOX</h1>
</div>
<div class="headerMenu">
<h2>EDIT</h2>
</div>
</div>
<div class="EmailsWrapper">
<div class="EmailFull">
<p>My name is Mark Cohan, and I'm the founder and CEO of Appalo. Appalo is one of the best mobile developer companies in Singapore.</p>
<p>We have an app out right now. You can check it out in the appstore. However, I'm looking to take this app to the next level.</p>
<p>I really would be excited to work together. Please do let me know</p>
</div>
<div class="EmailSearch">
<input type="text" placeholder="Search Messages" />
</div>
<div class="Email light">
<div class="ImgWrapper">
<div class="img notif">
</div>
</div>
<div class="EmailTitle">
<p class="EmailTime">11:12 AM</p>
<h1>Sergey Zolkin</h1>
<h2>New Project Inquiry</h2>
<p class="EmailPreview">Hi Matt! Are you available for...</p>
</div>
</div>
<div class="Email">
<div class="ImgWrapper">
<div class="img">
</div>
</div>
<div class="EmailTitle">
<p class="EmailTime">8:13 AM</p>
<h1>Slack</h1>
<h2>Notiications from the team..</h2>
<p class="EmailPreview">Hi Matt, You have a new message...</p>
</div>
</div>
<div class="Email light">
<div class="ImgWrapper">
<div class="img notif">
</div>
</div>
<div class="EmailTitle">
<p class="EmailTime">7:24 AM</p>
<h1>Clark from Invision</h1>
<h2>Weekly digest: How to design...</h2>
<p class="EmailPreview">Plus why product thinking is the...</p>
</div>
</div>
</div>
</div>

Since we do not know, where your content data (email body text) is comming from and in which element(s) it will be stored, you can basically change the html of your EmailFull class every time an email is clicked.
$(".EmailFull").html('<p>Some other mail text here.<p>');

How to delay something thats just a possibility

So i'm making a website, and i have a sort of a slider menu from top, and when i hover over a button everything appears, but when i hover out it doesn't disappear. In my js code i had to delay the disappearance with setTimeout() because there's a small gap between the button and the menu. So if someone would know how to make it disappear while keeping the timer thing so it doesn't disappear when going from button to the menu i'd be insanely grateful. Thanks in advance. Here's the code:
var timeout;
function mouseOver(){
document.getElementById('menu-roll').style.display = 'block';
timeout = setTimeout(function(){document.getElementById('menu-roll').style.display = 'none';}, 3000);
}
function mouseOut(){
clearTimeout(timeout);
}
:root{
--backg-primary: #ffeaa7;
--backg-islands: #2d3436;
--nav-wrapper: #4d0404;
--nav-wrapper-hover: #F79F1F;
--menu-roll: rgba(247, 159, 31, 0.95);
}
*{
margin: 0;
padding: 0;
}
body{
font-family: Verdana, Geneva, Tahoma;
scroll-behavior: smooth;
}
#video-wrapper{
height: 100vh;
width: 100%;
}
#navbar{
background-color: var(--nav-wrapper);
position: fixed;
width: 100%;
transition: top 0.3s;
top: 0;
overflow: visible;
z-index: 7;
}
#navbar a{
float: left;
display: block;
color: white;
text-align: center;
padding: 15px;
text-decoration: none;
letter-spacing: 1.5px;
}
#navbar a:hover{
transition: background-color .25s ease, color .25s ease;
background-color: var(--nav-wrapper-hover);
color: var(--nav-wrapper);
}
#logo-wrapper{
background: white;
margin: 0 auto;
border: 3.85px solid var(--nav-wrapper);
box-shadow: 0 0 10px #333;
position: relative;
animation: slideup 3s;
width: 200px;
height: 200px;
border-radius: 45%;
}
#keyframes slideup{
0%{
top: 150px;
}
100%{
top: 0;
}
}
#menu-wrapper{
width: 700px;
height: 103px;
background: var(--nav-wrapper);
margin: 0 auto;
border-radius: 50px;
position: relative;
z-index: 8;
}
#logo-wrapper img{
border-radius: 45%;
width: 190px;
height: 190px;
margin: 0 auto;
padding-left: 4px;
}
#video{
position: fixed;
min-width: 100%;
min-height: auto;
}
#menu-roll{
position: absolute;
z-index: 4;
background: var(--nav-wrapper-hover);
width: 150px;
top: 60px;
padding: 15px;
left: 2%;
display: none;
}
#menu-roll #design-line-menu-roll{
height: 4px;
width: 90%;
margin: 0 auto;
background: var(--nav-wrapper);
margin-bottom: 10px;
}
#menu-roll a{
text-decoration: none;
font-size: 1.35em;
text-align: left;
color: var(--nav-wrapper);
font-family: 'Poppins', sans-serif;
}
#menu-roll a:hover{
text-decoration: underline;
}
ul{
list-style-type: none;
}
#h1-menu-tandoor{
color: white;
left: -100%;
top: 12%;
font-size: 1.5em;
z-index: 1;
position: absolute;
opacity: 1.0;
animation: textopacity 3.2s;
}
#keyframes textopacity{
0%, 90%{
opacity: 0.0;
}
100%{
opacity: 1.0;
}
}
#h1-menu-restaurace{
color: white;
left: 110%;
top: 14.5%;
font-size: 1.4em;
z-index: 1;
position: absolute;
opacity: 1.0;
animation: textopacitytwo 3.2s;
}
#keyframes textopacitytwo{
0%, 90%{
opacity: 0.0;
}
100%{
opacity: 1.0;
}
}
#information-section{
background: var(--backg-primary);
z-index: 5;
position: relative;
}
#introduction{
padding-top: 50px;
z-index: 5;
position: relative;
text-align: left;
overflow: hidden;
width: 45%;
padding: 50px;
background: #444;
margin: 10px;
box-shadow: 0 0 10px #333;
}
#introduction h1{
font-size: 3em;
padding-bottom: 10px;
color: #edf3f8;
}
#introduction h3{
font-size: 1.75em;
border-bottom: 2px solid var(--nav-wrapper);
padding-bottom: 15px;
color: var(--blend-in-text);
}
#introduction p{
color: #edf3f8;
font-size: 1.25em;
padding: 15px 0;
letter-spacing: 1px;
}
#divider{
width: 100%;
height: 40px;
background: var(--nav-wrapper);
position: relative;
z-index: 6;
}
#intro-photos{
position: relative;
z-index: 6;
height: 10px;
}
.first-photo{
width: 36.5%;
height: auto;
left: 62%;
position: relative;
top: -400px;
z-index: 4;
box-shadow: 0 0 10px #333;
border-radius: 50%;
align-items: center;
border: 1px solid rgb(255, 218, 104);
background: rgb(255, 218, 104);
}
#services-info{
height: 407px;
}
#services-photo{
top: 50px;
}
#media screen and (max-width: 700px){
.first-photo{
left: 12%;
margin: 0 auto;
top: 40px;
width: 76.5%;
padding-top: 15px;
border-radius: 0;
}
#introduction{
width: 60%;
margin: 0 auto;
}
#divider{
margin-bottom: 10px;
}
#services-info{
height: 800px;
}
#services-photo{
top: 470px;
position: relative;
}
}
<section id="video-wrapper">
<ul id="navbar">
<li id="menu-hover-roll" onmouseover="mouseOver()" onmouseout="mouseOut()">
Menu
<ul id="menu-roll">
<div id="design-line-menu-roll"></div>
<li>Polední menu</li>
<li>Jídelní lístek</li>
<li>Nápoje</li>
</ul>
</li>
</ul>
<video id="video" autoplay muted loop>
<source src="styles/720p.mp4" type="video/mp4">
</video>
<div id="menu-wrapper">
<div id="logo-wrapper">
<div id="h1-menu-tandoor">
<h1>Tandoor</h1>
</div>
<div id="h1-menu-restaurace">
<h1>Restaurace</h1>
</div>
<img src="styles/tndrlogo.jpg">
</div>
</div>
<div id="menu-roll">
<div id="design-line-menu-roll"></div>
<ul>
<li>
Polední menu
</li>
<li>
Menu
</li>
<li>
Nápojový lístek
</li>
</ul>
</div>
</section>

I'm not sure that I understand everything but take a look at this code.
var timeout;
function mouseOver() {
document.getElementById('menu-roll').style.display = 'block';
clearTimeout(timeout);
}
function mouseOut() {
timeout = setTimeout(function() {
document.getElementById('menu-roll').style.display = 'none';
}, 1000);
}
:root {
--backg-primary: #ffeaa7;
--backg-islands: #2d3436;
--nav-wrapper: #4d0404;
--nav-wrapper-hover: #F79F1F;
--menu-roll: rgba(247, 159, 31, 0.95);
}
* {
margin: 0;
padding: 0;
}
body {
font-family: Verdana, Geneva, Tahoma;
scroll-behavior: smooth;
}
#video-wrapper {
height: 100vh;
width: 100%;
}
#navbar {
background-color: var(--nav-wrapper);
position: fixed;
width: 100%;
transition: top 0.3s;
top: 0;
overflow: visible;
z-index: 7;
}
#navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 15px;
text-decoration: none;
letter-spacing: 1.5px;
}
#navbar a:hover {
transition: background-color .25s ease, color .25s ease;
background-color: var(--nav-wrapper-hover);
color: var(--nav-wrapper);
}
#logo-wrapper {
background: white;
margin: 0 auto;
border: 3.85px solid var(--nav-wrapper);
box-shadow: 0 0 10px #333;
position: relative;
animation: slideup 3s;
width: 200px;
height: 200px;
border-radius: 45%;
}
#keyframes slideup {
0% {
top: 150px;
}
100% {
top: 0;
}
}
#menu-wrapper {
width: 700px;
height: 103px;
background: var(--nav-wrapper);
margin: 0 auto;
border-radius: 50px;
position: relative;
z-index: 8;
}
#logo-wrapper img {
border-radius: 45%;
width: 190px;
height: 190px;
margin: 0 auto;
padding-left: 4px;
}
#video {
position: fixed;
min-width: 100%;
min-height: auto;
}
#menu-roll {
position: absolute;
z-index: 4;
background: var(--nav-wrapper-hover);
width: 150px;
top: 60px;
padding: 15px;
left: 2%;
display: none;
}
#menu-roll #design-line-menu-roll {
height: 4px;
width: 90%;
margin: 0 auto;
background: var(--nav-wrapper);
margin-bottom: 10px;
}
#menu-roll a {
text-decoration: none;
font-size: 1.35em;
text-align: left;
color: var(--nav-wrapper);
font-family: 'Poppins', sans-serif;
}
#menu-roll a:hover {
text-decoration: underline;
}
ul {
list-style-type: none;
}
#h1-menu-tandoor {
color: white;
left: -100%;
top: 12%;
font-size: 1.5em;
z-index: 1;
position: absolute;
opacity: 1.0;
animation: textopacity 3.2s;
}
#keyframes textopacity {
0%,
90% {
opacity: 0.0;
}
100% {
opacity: 1.0;
}
}
#h1-menu-restaurace {
color: white;
left: 110%;
top: 14.5%;
font-size: 1.4em;
z-index: 1;
position: absolute;
opacity: 1.0;
animation: textopacitytwo 3.2s;
}
#keyframes textopacitytwo {
0%,
90% {
opacity: 0.0;
}
100% {
opacity: 1.0;
}
}
#information-section {
background: var(--backg-primary);
z-index: 5;
position: relative;
}
#introduction {
padding-top: 50px;
z-index: 5;
position: relative;
text-align: left;
overflow: hidden;
width: 45%;
padding: 50px;
background: #444;
margin: 10px;
box-shadow: 0 0 10px #333;
}
#introduction h1 {
font-size: 3em;
padding-bottom: 10px;
color: #edf3f8;
}
#introduction h3 {
font-size: 1.75em;
border-bottom: 2px solid var(--nav-wrapper);
padding-bottom: 15px;
color: var(--blend-in-text);
}
#introduction p {
color: #edf3f8;
font-size: 1.25em;
padding: 15px 0;
letter-spacing: 1px;
}
#divider {
width: 100%;
height: 40px;
background: var(--nav-wrapper);
position: relative;
z-index: 6;
}
#intro-photos {
position: relative;
z-index: 6;
height: 10px;
}
.first-photo {
width: 36.5%;
height: auto;
left: 62%;
position: relative;
top: -400px;
z-index: 4;
box-shadow: 0 0 10px #333;
border-radius: 50%;
align-items: center;
border: 1px solid rgb(255, 218, 104);
background: rgb(255, 218, 104);
}
#services-info {
height: 407px;
}
#services-photo {
top: 50px;
}
#media screen and (max-width: 700px) {
.first-photo {
left: 12%;
margin: 0 auto;
top: 40px;
width: 76.5%;
padding-top: 15px;
border-radius: 0;
}
#introduction {
width: 60%;
margin: 0 auto;
}
#divider {
margin-bottom: 10px;
}
#services-info {
height: 800px;
}
#services-photo {
top: 470px;
position: relative;
}
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles/index.css">
<link rel="shortcut icon" href="styles/favicon.ico.png" />
<title>Tandoor</title>
</head>
<body>
<section id="video-wrapper">
<ul id="navbar">
<li id="menu-hover-roll" onmouseover="mouseOver()" onmouseout="mouseOut()">
Menu
<ul id="menu-roll">
<div id="design-line-menu-roll"></div>
<li>Polední menu</li>
<li>Jídelní lístek</li>
<li>Nápoje</li>
</ul>
</li>
</ul>
<video id="video" autoplay muted loop>
<source src="styles/720p.mp4" type="video/mp4">
</video>
<div id="menu-wrapper">
<div id="logo-wrapper">
<div id="h1-menu-tandoor">
<h1>Tandoor</h1>
</div>
<div id="h1-menu-restaurace">
<h1>Restaurace</h1>
</div>
<img src="styles/tndrlogo.jpg">
</div>
</div>
<div id="menu-roll">
<div id="design-line-menu-roll"></div>
<ul>
<li>
Polední menu
</li>
<li>
Menu
</li>
<li>
Nápojový lístek
</li>
</ul>
</div>
</section>
</body>
</html>

RangeSlider using combination of HTML, CSS and JS not working in Squarespace

I have a code for a dynamic range slider which works on other sites but not on Squarespace. I am using the theme, Merida and the page can be found here. The code is meant to show the values in a teardrop shaped bubble which moves with the slider.
the full code is below, just incase i am wrong and it isn't the javascript that is faulty. Any help will be greatly appreciated. Thanks!
#import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
html,body{
display: grid;
height: 100%;
text-align: center;
place-items: center;
background: #664AFF;
}
.range{
height: 80px;
width: 380px;
background: #fff;
border-radius: 10px;
padding: 0 65px 0 45px;
box-shadow: 2px 4px 8px rgba(0,0,0,0.1);
}
.sliderValue{
position: relative;
width: 100%;
}
.sliderValue span{
position: absolute;
height: 45px;
width: 45px;
transform: translateX(-70%) scale(0);
font-weight: 500;
top: -40px;
line-height: 55px;
z-index: 2;
color: #fff;
transform-origin: bottom;
transition: transform 0.3s ease-in-out;
}
.sliderValue span.show{
transform: translateX(-70%) scale(1);
}
.sliderValue span:after{
position: absolute;
content: '';
height: 100%;
width: 100%;
background: #664AFF;
border: 3px solid #fff;
z-index: -1;
left: 50%;
transform: translateX(-50%) rotate(45deg);
border-bottom-left-radius: 50%;
box-shadow: 0px 0px 8px rgba(0,0,0,0.1);
border-top-left-radius: 50%;
border-top-right-radius: 50%;
}
.field{
display: flex;
align-items: center;
justify-content: center;
height: 100%;
position: relative;
}
.field .value{
position: absolute;
font-size: 18px;
color: #664AFF;
font-weight: 600;
}
.field .value.left{
left: -22px;
}
.field .value.right{
right: -43px;
}
.range input{
-webkit-appearance: none;
width: 100%;
height: 3px;
background: #ddd;
border-radius: 5px;
outline: none;
border: none;
z-index: 2222;
}
.range input::-webkit-slider-thumb{
-webkit-appearance: none;
width: 20px;
height: 20px;
background: red;
border-radius: 50%;
background: #664AFF;
border: 1px solid #664AFF;
cursor: pointer;
}
.range input::-moz-range-thumb{
-webkit-appearance: none;
width: 20px;
height: 20px;
background: red;
border-radius: 50%;
background: #664AFF;
border: 1px solid #664AFF;
cursor: pointer;
}
.range input::-moz-range-progress{
background: #664AFF;
}
<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="range">
<div class="sliderValue">
<span>100</span>
</div>
<div class="field">
<div class="value left">
0</div>
<input type="range" min="10" max="200" value="100" steps="1">
<div class="value right">
200</div>
</div>
</div>
<script>
const slideValue = document.querySelector("span");
const inputSlider = document.querySelector("input");
inputSlider.oninput = (()=>{
let value = inputSlider.value;
slideValue.textContent = value;
slideValue.style.left = (value/2) + "%";
slideValue.classList.add("show");
});
inputSlider.onblur = (()=>{
slideValue.classList.remove("show");
});
</script>
</body>
</html>

How to create an iOS style dragging using HammerJS and CSS?

I'm trying to create an iOS 'style' modal sheet that that will popup and then the users can drag it down and the modal sheet will follow the users touch gesture and then it will disappear OFF the screen using HammerJS.
I've managed to create the modal sheet and I have also implemented the HammerJS to a certain extend.
When the user 'swipes' down the modal sheet, it will disappear but it doesn't follow the swipe/touch gesture before it hides. it just disappears which makes it a bit clunky.
$(document).on('click', '.button', function() {
$('.addreFinder').css('bottom', '0');
$('.sheet-backdrop').addClass('backdrop-in');
});
///custom modal sheet///
$('.c-modal').each(function() {
var mc = new Hammer(this);
mc.get('swipe').set({
direction: Hammer.DIRECTION_ALL
});
mc.on("swipedown", function(ev) {
console.log('dragged');
$('.modal-in').css('bottom', '-1850px');
$('.sheet-backdrop').removeClass('backdrop-in');
});
});
.sheet-modal.modal-in {
position: absolute;
bottom: -1850px;
left: 0;
width: 100%;
padding: 20px;
transition: bottom 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
display: block;
transform: translate3d(0, 0, 0);
z-index: 13200;
}
.sheet-modal.modal-in,
.sheet-modal.modal-out {
transition-duration: .3s;
}
.demo-sheet-swipe-to-close,
.demo-sheet-swipe-to-step {
--f7-sheet-bg-color: #fff;
--f7-sheet-border-color: transparent;
border-radius: 15px 15px 0 0;
overflow: hidden;
}
.sheet-modal {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 60%;
display: none;
box-sizing: border-box;
transition-property: transform;
transform: translate3d(0, 100%, 0);
background: var(--f7-sheet-bg-color);
z-index: 12500;
will-change: transform;
}
.swipe-handler {
height: 16px;
position: absolute;
left: 0;
width: 100%;
top: 0;
background: #fff;
cursor: pointer;
z-index: 10;
}
.page-content {
will-change: scroll-position;
overflow: auto;
-webkit-overflow-scrolling: touch;
box-sizing: border-box;
height: 100%;
position: relative;
z-index: 1;
padding-top: calc(var(--f7-page-navbar-offset, 0px) + var(--f7-page-toolbar-top-offset, 0px) + var(--f7-page-subnavbar-offset, 0px) + var(--f7-page-searchbar-offset, 0px) + var(--f7-page-content-extra-padding-top, 0px));
padding-bottom: calc(var(--f7-page-toolbar-bottom-offset, 0px) + var(--f7-safe-area-bottom) + var(--f7-page-content-extra-padding-bottom, 0px));
}
.swipe-handler:after {
content: '';
width: 36px;
height: 6px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -18px;
margin-top: -3px;
border-radius: 3px;
background: #666;
}
.block-title-large {
font-size: 20px;
color: #000;
line-height: 40px;
padding: 10px;
margin-top: 20px;
}
.block {
box-sizing: border-box;
position: relative;
z-index: 1;
color: #000;
padding: 10px;
}
.sheet-backdrop.backdrop-in {
visibility: visible;
opacity: 1;
}
.sheet-backdrop {
z-index: 11000;
}
.actions-backdrop,
.custom-modal-backdrop,
.dialog-backdrop,
.popover-backdrop,
.popup-backdrop,
.preloader-backdrop,
.sheet-backdrop {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .4);
z-index: 13000;
visibility: hidden;
opacity: 0;
transition-duration: .4s;
}
.bbody {
width: 100%;
box-sizing: border-box;
margin-top: 50px;
}
.wrapper {
text-align: center;
position: relative;
height: 80px;
font-size: 0;
top: 50%;
transform: translateY(-50%);
}
.search {
padding: 0 30px;
font-size: 18px;
width: 80%;
max-width: 400px;
height: 80px;
border: 1px solid #b3b3b3;
border-radius: 20px 0 0 20px;
box-sizing: border-box;
font-size: 13px;
vertical-align: top;
display: inline-block;
}
.submit {
cursor: pointer;
border: none;
background: url('data:image/png;base64,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') no-repeat center center, #1e1e20;
background-size: 35px 35px;
border-radius: 0 20px 20px 0;
padding: 15px 25px;
display: inline-block;
width: 20%;
height: 80px;
box-sizing: border-box;
font-size: 13px;
vertical-align: top;
}
.pac-container {
width: 100%;
}
.pac-item {
cursor: pointer;
padding: 0 4px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
line-height: 30px;
vertical-align: middle;
text-align: left;
border-top: 1px solid #e6e6e6;
color: #999;
width: 100%;
}
.pac-icon {
width: 15px;
height: 20px;
margin-right: 7px;
margin-top: 6px;
display: inline-block;
vertical-align: top;
background-image: url(https://maps.gstatic.com/mapfiles/api-3/images/autocomplete-icons.png);
background-size: 34px;
}
.pac-icon-marker {
background-position: -1px -161px;
}
.addressFinderTexts>* {
margin-top: 10px;
}
.addressFinderTexts p {
font-size: 12px;
}
.useMyCureentLOcationBtn {
width: 80%;
height: 25px;
line-height: 25px;
display: inline-block;
background: #ffaf06;
color: #fff;
font-size: 12px;
margin-top: 15px;
overflow: hidden;
}
.addressFinderTexts {
width: 100%;
margin-top: 20px;
min-height: 380px;
height: auto;
text-align: center;
padding: 10px;
box-sizing: border-box;
color: #ccc;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.js"></script>
<div class="sheet-backdrop"></div>
<div class="c-modal sheet-modal demo-sheet-swipe-to-close modal-in addreFinder" id="addressFinder">
<div class="sheet-modal-inner">
<div class="swipe-handler"></div>
<div class="page-content">
<div class="block">
<div class="bbody">
Drag me down to hide me
</div>
</div>
</div>
</div>
</div>
<button class="button">Click Here To show modal</button>
I hope I have explained the situation properly for someone to be able to help me.

Text editor error

For some strange reason I my text editor (Microsoft Visual Code) wont review this file. So you please try copy paste this in to your editor and tell me what went wrong?
Sorry for the length of the code and thank you in advance.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Space Trip - Adventure of a Lifetime</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div class="content">
<div class="welcomeText">
<div class="welcome">
<h1 class="greet">Space Trip - Adventure of a Lifetime</h1>
</div>
<div class="subText">
<div class="subTexts">
<p class="subscribe">Subscribe to our newsletter</p>
<p class="soon">We are launching soon</p>
</div>
</div>
</div>
<div class="form">
<form action="" class="sub">
<input class='email' type="email">
<button class="button" value="Send">Get Started</button>
</form>
</div>
<div class="social">
<div class="follow">
<p class="followUs">Or follow us</p>
</div>
<div class="socialIcons">
<div class="socialIcon facebook brandico-facebook-rect"></div>
<div class="socialIcon twitter brandico-twitter-bird"></div>
<div class="socialIcon github brandico-github"></div>
</div>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
#import url(http://weloveiconfonts.com/api/?family=brandico);
#import url(https://fonts.googleapis.com/css?family=Junge);
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
body {
background: url('https://static.pexels.com/photos/26206/pexels-photo.jpg') no-repeat;
background-size: cover;
font-family: Junge, georgia;
text-align: center;
}
/* brandico */
[class*="brandico-"]:before {
font-family: 'brandico', sans-serif;
}
.content {
max-width: 40%;
max-height: 50%;
margin: 100px auto;
}
.welcomeText,
.form,
.social {
width: 100%;
}
/*welcome text*/
.welcome {
height: 100px;
position: relative;
border-bottom: 1px solid;
overflow: hidden;
}
.greet {
width: 100%;
height: 100%;
position: absolute;
top: 100%;
font-size: 50px;
text-align: center;
line-height: 100px;
transition: all .5s;
}
/*taglines*/
.subText {
width: 100%;
height: 100px;
position: relative;
font-size: 30px;
overflow: hidden;
}
.subText p {
height: 100%;
line-height: 100px;
text-align: center;
}
.subTexts {
width: 100%;
position: absolute;
bottom: 100%;
text-align: center;
overflow: hidden;
transition: all .5s;
}
/*FORM*/
.form {
width: 100%;
height: 100px;
position: relative;
}
.sub {
width: 90%;
height: 50px;
margin: auto;
opacity: 0;
border: none;
border-radius: 50px;
background: rgba(0, 0, 0, .05);
box-shadow: inset 0 0 5px rgba(0, 0, 0, .4), 0 0 0px 5px rgba(0, 0, 0, .1);
transition: all .5s;
}
.email {
width: 70%;
height: 70%;
margin: 1% 0;
padding-left: 10px;
background: none;
border: none;
font-size: 20px;
}
input:focus {
outline: none;
}
.button {
width: 20%;
height: 100%;
float: right;
border: none;
border-radius: 0 50px 50px 0;
font-size: 16px;
background: red;
background-color: #49afcd;
background-image: linear-gradient(top, #5bc0de, #2f96b4);
cursor: pointer;
transition: all .5s;
}
.button:hover {
background: #2f96b4;
box-shadow: inset 0 1px 5px rgba(0, 0, 0, .3);
}
/*footer-follow us*/
.follow {
width: 100%;
height: 100px;
position: relative;
overflow: hidden;
}
.followUs {
width: 100%;
height: 100%;
position: absolute;
bottom: 100%;
line-height: 100px;
text-align: center;
font-size: 40px;
transition: all .5s;
}
.socialIcons {
width: 100%;
height: 100px;
position: relative;
overflow: hidden;
}
.socialIcon {
width: 33.33%;
height: 100px;
float: left;
margin-top: 100px;
font-size: 50px;
line-height: 100px;
transition: margin-top .5s, color .5s;
cursor: pointer;
}
.socialIcon:hover {
color: #49afcd;
text-shadow: 0 0 20px white;
}
.twitter {
transition-delay: .5s, 0;
}
.github {
transition-delay: 1s, 0;
}
#media screen and (max-width:930px) {
.subTexts p {
font-size: 20px
}
.button {
font-size: 12px
}
}
#media screen and (max-width:600px) {
.welcome,
.subText,
.sub {
background: rgba(255, 255, 255, .3);
}
.welcome {
border-radius: 20px 20px 0 0;
}
.subText {
border-radius: 0 0 20px 20px;
}
.sub {
border: 1px solid;
}
.greet {
font-size: 30px
}
.subTexts p {
font-size: 16px;
}
.button {
font-size: 8px;
margin-right: -3%
}
}
window.addEventListener('load', function() {
var welcome = document.querySelector('.greet'),
subtext = document.querySelector('.subTexts'),
form = document.querySelector('.sub'),
follow = document.querySelector('.followUs'),
social = document.querySelectorAll('.socialIcon'),
delay = 1000;
setTimeout(function() { welcome.style.top = '0'; }, delay);
setTimeout(function() { subtext.style.bottom = '0%'; }, delay * 2);
setTimeout(function() { subtext.style.bottom = '-100%'; }, delay * 4);
setTimeout(function() { form.style.opacity = '1'; }, delay * 5);
setTimeout(function() { follow.style.bottom = '0%'; }, delay * 6);
setTimeout(
function() {
social[0].style.marginTop = '0px';
social[1].style.marginTop = '0px';
social[2].style.marginTop = '0px';
}, delay * 7
);
});

<!DOCTYPE html>
<html lang="en">
<head>
<title>Space Trip - Adventure of a Lifetime</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/style.css" rel="stylesheet">
<style>
#import url(http://weloveiconfonts.com/api/?family=brandico);
#import url(https://fonts.googleapis.com/css?family=Junge);
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
body {
background: url('https://static.pexels.com/photos/26206/pexels-photo.jpg') no-repeat;
background-size: cover;
font-family: Junge, georgia;
text-align: center;
}
/* brandico */
[class*="brandico-"]:before {
font-family: 'brandico', sans-serif;
}
.content {
max-width: 40%;
max-height: 50%;
margin: 100px auto;
}
.welcomeText,
.form,
.social {
width: 100%;
}
/*welcome text*/
.welcome {
height: 100px;
position: relative;
border-bottom: 1px solid;
overflow: hidden;
}
.greet {
width: 100%;
height: 100%;
position: absolute;
top: 100%;
font-size: 50px;
text-align: center;
line-height: 100px;
transition: all .5s;
}
/*taglines*/
.subText {
width: 100%;
height: 100px;
position: relative;
font-size: 30px;
overflow: hidden;
}
.subText p {
height: 100%;
line-height: 100px;
text-align: center;
}
.subTexts {
width: 100%;
position: absolute;
bottom: 100%;
text-align: center;
overflow: hidden;
transition: all .5s;
}
/*FORM*/
.form {
width: 100%;
height: 100px;
position: relative;
}
.sub {
width: 90%;
height: 50px;
margin: auto;
opacity: 0;
border: none;
border-radius: 50px;
background: rgba(0, 0, 0, .05);
box-shadow: inset 0 0 5px rgba(0, 0, 0, .4), 0 0 0px 5px rgba(0, 0, 0, .1);
transition: all .5s;
}
.email {
width: 70%;
height: 70%;
margin: 1% 0;
padding-left: 10px;
background: none;
border: none;
font-size: 20px;
}
input:focus {
outline: none;
}
.button {
width: 20%;
height: 100%;
float: right;
border: none;
border-radius: 0 50px 50px 0;
font-size: 16px;
background: red;
background-color: #49afcd;
background-image: linear-gradient(top, #5bc0de, #2f96b4);
cursor: pointer;
transition: all .5s;
}
.button:hover {
background: #2f96b4;
box-shadow: inset 0 1px 5px rgba(0, 0, 0, .3);
}
/*footer-follow us*/
.follow {
width: 100%;
height: 100px;
position: relative;
overflow: hidden;
}
.followUs {
width: 100%;
height: 100%;
position: absolute;
bottom: 100%;
line-height: 100px;
text-align: center;
font-size: 40px;
transition: all .5s;
}
.socialIcons {
width: 100%;
height: 100px;
position: relative;
overflow: hidden;
}
.socialIcon {
width: 33.33%;
height: 100px;
float: left;
margin-top: 100px;
font-size: 50px;
line-height: 100px;
transition: margin-top .5s, color .5s;
cursor: pointer;
}
.socialIcon:hover {
color: #49afcd;
text-shadow: 0 0 20px white;
}
.twitter {
transition-delay: .5s, 0;
}
.github {
transition-delay: 1s, 0;
}
#media screen and (max-width:930px) {
.subTexts p {
font-size: 20px
}
.button {
font-size: 12px
}
}
#media screen and (max-width:600px) {
.welcome,
.subText,
.sub {
background: rgba(255, 255, 255, .3);
}
.welcome {
border-radius: 20px 20px 0 0;
}
.subText {
border-radius: 0 0 20px 20px;
}
.sub {
border: 1px solid;
}
.greet {
font-size: 30px
}
.subTexts p {
font-size: 16px;
}
.button {
font-size: 8px;
margin-right: -3%
}
}
</style>
<script>
window.addEventListener('load', function() {
var welcome = document.querySelector('.greet'),
subtext = document.querySelector('.subTexts'),
form = document.querySelector('.sub'),
follow = document.querySelector('.followUs'),
social = document.querySelectorAll('.socialIcon'),
delay = 1000;
setTimeout(function() { welcome.style.top = '0'; }, delay);
setTimeout(function() { subtext.style.bottom = '0%'; }, delay * 2);
setTimeout(function() { subtext.style.bottom = '-100%'; }, delay * 4);
setTimeout(function() { form.style.opacity = '1'; }, delay * 5);
setTimeout(function() { follow.style.bottom = '0%'; }, delay * 6);
setTimeout(
function() {
social[0].style.marginTop = '0px';
social[1].style.marginTop = '0px';
social[2].style.marginTop = '0px';
}, delay * 7
);
});
</script>
</head>
<body>
<div class="content">
<div class="welcomeText">
<div class="welcome">
<h1 class="greet">Space Trip - Adventure of a Lifetime</h1>
</div>
<div class="subText">
<div class="subTexts">
<p class="subscribe">Subscribe to our newsletter</p>
<p class="soon">We are launching soon</p>
</div>
</div>
</div>
<div class="form">
<form action="" class="sub">
<input class='email' type="email">
<button class="button" value="Send">Get Started</button>
</form>
</div>
<div class="social">
<div class="follow">
<p class="followUs">Or follow us</p>
</div>
<div class="socialIcons">
<div class="socialIcon facebook brandico-facebook-rect"></div>
<div class="socialIcon twitter brandico-twitter-bird"></div>
<div class="socialIcon github brandico-github"></div>
</div>
</div>
</div>
<script src="index.js"></script>
</body>
</html>