So i have this animation where there is this a h1 and when i scroll down the image zoom out and the h1 follow the image animation, my problem is that when im on mobile or i resize the screen to tablet or mobile i want the animation on scroll to not activate.
i already tried to use the resize function or if screen is > than but it doesn't work i'm using scrollMagic cdn.
animation
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./Css/style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js" integrity="sha512-8E3KZoPoZCD+1dgfqhPbejQBnQfBXe8FuwL4z/c8sTrgeDMFEnoyTlH3obB4/fV+6Sg0a0XF+L/6xS4Xx1fUEg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/debug.addIndicators.min.js" integrity="sha512-RvUydNGlqYJapy0t4AH8hDv/It+zKsv4wOQGb+iOnEfa6NnF2fzjXgRy+FDjSpMfC3sjokNUzsfYZaZ8QAwIxg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/animation.gsap.js" integrity="sha512-judXDFLnOTJsUwd55lhbrX3uSoSQSOZR6vNrsll+4ViUFv+XOIr/xaIK96soMj6s5jVszd7I97a0H+WhgFwTEg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body class="contenet">
<div class="overflow-wrap">
<header id="header">
<img src="./Asset/Img/1.png" loading="lazy" alt="" id="hero-ui">
<div class="container container--hero">
<div class="hero__header">
<h1 class="hero-heading">The Webflow Expert.</h1>
</div>
</div>
</header>
</div>
<section class="section section--manifest">
<div class="section-header section-header--intro">
<h2 class="fluid-gradient-heading fluid-gradient-heading--hero cc-en">World-class Webflow<br>sites for ambitious<br>companies.</h2>
</div>
</section>
<script src="./JS/app.js"></script>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
scroll-behavior: smooth;
}
*::-webkit-scrollbar {
display: none;
}
body {
background-color: #1d1d1f;
color: white;
font-family: Inter, sans-serif;
-ms-overflow-style: none;
/* IE and Edge */
scrollbar-width: none;
/* Firefox */
}
#header {
display: flex;
height: 100vh;
align-items: center;
position: sticky;
backface-visibility: hidden;
transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
transform-style: preserve-3d;
}
.overflow-wrap {
overflow: hidden;
height: 100%;
}
#hero-ui {
position: relative;
left: 50%;
z-index: 1;
width: 16.9em;
max-width: none;
margin-top: 3.2em;
margin-left: -8.45em;
font-size: 10vw;
opacity: 0;
}
.hero-heading {
will-change: transform, opacity;
animation: fadeIn 0.8s ease;
animation-iteration-count: 1;
animation-fill-mode: backwards;
animation-delay: 0.5s;
font-size: 92px;
}
.container.container--hero {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: auto;
display: flex;
height: 100vh;
max-width: none;
padding-top: 100px;
padding-bottom: 100px;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
z-index: 2;
}
.section.section--manifest {
padding-top: 100px;
padding-bottom: 160px;
}
.section-header.section-header--intro {
position: relative;
max-width: 1050px;
margin-bottom: 0;
}
.section-header {
width: 90%;
max-width: 980px;
margin-right: auto;
margin-bottom: 142px;
margin-left: auto;
text-align: left;
}
.fluid-gradient-heading.fluid-gradient-heading--hero.cc-en {
font-size: 103px;
}
.fluid-gradient-heading.fluid-gradient-heading--hero {
margin-right: auto;
margin-left: auto;
line-height: 1.05;
text-align: center;
}
.fluid-gradient-heading {
background: linear-gradient(91.36deg, #ECA658 0%, #F391A6 13.02%, #E188C3 25.52%, #A58DE3 37.5%, #56ABEC 49.48%, #737EB7 63.02%, #C8638C 72.92%, #DD5D57 84.38%, #DF6C51 97.92%);
background-size: 200% 200%;
-webkit-background-clip: text;
background-clip: text;
-moz-background-clip: text;
-webkit-animation: intro-gradient 10s infinite ease both;
-moz-animation: intro-gradient 10s infinite ease both;
animation: intro-gradient 10s infinite ease both;
}
.fluid-gradient-heading {
margin-top: 0;
padding-top: 8px;
padding-bottom: 8px;
font-size: 92px;
line-height: 1.1;
letter-spacing: -.045em;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
h2 {
margin-top: 20px;
margin-bottom: 10px;
font-size: 32px;
line-height: 36px;
font-weight: 600;
}
JAVASCRIPT
/*==================== zoom out image ====================*/
let controller = new ScrollMagic.Controller();
let zoomHeader = TweenMax.to("#header", 0.9, { opacity: 1, scale: 0.35, ease: Circ.EaseIn });
let headerZoom = new ScrollMagic.Scene({
triggerElement: "#header",
triggerHook: 0,
duration: "3000ms"
})
.setPin('#header')
.setClassToggle('#header')
.setTween(zoomHeader)
.addTo(controller);
/*==================== smooth link scrooling====================*/
let $root = $('html, body');
$('a[href^="#"]').click(function() {
$root.animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 500);
return false;
});
/*==================== Change opacity image ====================*/
$(window).scroll(function() {
let scrollTop = $(this).scrollTop();
$('#hero-ui').css({
opacity: function() {
let elementHeight = $(this).height();
return 1 - (elementHeight - scrollTop) / elementHeight;
}
});
});
In your scroll event listener you may check actual device width.
Then you can disable animation when it is mobile.
Smth like
$(window).scroll(function() {
if($(window).width() < 500) return
.....
}
You can apply the same check for click event.
Also it will be good if you handle resize/load events as well.
I am a beginner in web design and development and I am trying to make the navigation bar be more responsive when it is viewed on phones and tablets but for some reason it appears really buggy on the phone, I have used a meta tag so that the browser renders it correctly but it doesn't, it comes out all buggy like the picture below:
Click on the link to see picture -> As you can see it's coming out half and half
I have enabled overflow-x:hidden but some how am still able to browse towards the right and see the nav bar which isn't meant to be visible unless clicked, I don't understand why that's happening.
Click on the link to see picture -> This is how it is when you load it.
I have also tried to put the screen resolution as follows:
`#media screen and (max-width:1024px){
.nav-links
{
width:48%;
}
}
#media screen and (max-width:768px)`
This is also running on my firebase server and is available to view through this link:https://test-response-5f60c.web.app/PAGES/quotes.html
I am sorry for any code inconsistencies and mistakes, please help me out, I don't understand what I am doing wrong in the CSS. This is the tutorial I followed: Click on the link -> Tutorial
Following is my code:
function navSlide() {
const burger = document.querySelector(".burger");
const nav = document.querySelector(".nav-links");
const navLinks = document.querySelectorAll(".nav-links li");
burger.addEventListener("click", () => {
//Toggle Nav
nav.classList.toggle("nav-active");
//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();
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
margin: 0;
}
nav{
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: #000000;
color: #f9f9f9;
font-family: 'Open Sans', sans-serif;
font-size: large;
}
.logo{
text-transform: uppercase;
letter-spacing: 3px;
font-size: 20px;
}
.nav-links {
list-style-type: none;
padding: 1.2%;
margin:0;
overflow: hidden;
background-color: #000000;
display: flex;
align-items: center;
justify-content: center;
}
.nav-links li a {
font-size: 18px;
font-weight: bold;
display: inline-block;
color: white;
text-align: center;
padding: 26px 26px;
text-decoration: none;
transition: 0.3s;
}
li a:hover {
background-color: #3498DB ;
}
.burger{
display: none;
cursor: pointer;
}
.burger div{
width: 25px;
height: 4px;
background-color: #f9f9f9;
margin: 5px;
}
.head {
font-family: sans-serif;
font-weight: bold;
margin: auto;
width: 60%;
border: 3px solid #3498DB ;
padding: 40px;
text-align: center;
opacity: 5.9;
animation-duration: 3s;
animation-name: fadein;
}
#media screen and (max-width:1024px){
.nav-links{
width:48%;
}
}
#media screen and (max-width:768px){
body {
overflow-x: hidden !important;
}
.nav-links{
position: absolute;
right: 0;
height: 92vh;
top: 8vh;
background-color: #000000;
display: flex;
flex-direction: column;
align-items:center;
width: 50%;
transform: translate(100%);
transition: transform 0.5s ease-in;
}
.nav-links li{
opacity: 0;
}
.burger{
display: block;
}
.nav-active {
transform: translate(0%);
}
}
#keyframes navLinkFade {
from{
opacity: 0;
transform: translateX(50px);
}
to{
opacity: 1;
transform: translateX(0px);
}
}
.toggle .line1 {
transform: rotate(-45deg) translate(-5px, 6px);
}
.toggle .line2 {
opacity: 0;
}
.toggle .line3 {
transform: rotate(45deg) translate(-5px, -6px);
}
#googleForm {
margin-left: 20px;
text-align: center;
margin-top: 20px;
}
<!doctype html>
<html>
<head>
<style>
body {
background-image: url('../IMG/land2.jpg');
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: auto ;
}
</style>
<title> Quotes </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="../CSS/style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
</head>
<body>
<nav>
<div class="logo">
<h4> Edge Concreting and Landscaping </h4>
</div>
<ul class="nav-links">
<li>Home</li>
<li>Quotes</li>
<li>Contact</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<div id="googleForm">
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSd5uy_5vc6ozsY1kcGRliC8hYH9w_WqEU1acN0tJQ6rrqEJmg/viewform?embedded=true" width="640" height="1427" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>
</div>
<script src="../JS/app.js"></script>
</body>
</html>
Set your media queries to a lower max width and position absolute.
For example.
#media (max-width: 768px){.logo h4 {position: absolute;
right: 50px;}}
That should enable you to select your logo and adjust it for mobile device.
#media (max-width: 768px){.nav-links{position: absolute;
right: 50px;}}
Should enable you to select and adjust your dropdown. You can change or substitute rightor left or top or bottom or width within the same media query.
Try reducing the width of nav-links.
This worked for me:
html, body {
overflow-x: hidden;
}
body {
position: relative;
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I have a dropdown menu which is almost complete with just 2 bugs/issues that I can't figure out. My nav links to different areas on the home page. So on the home page the user can click a nav link which would instantly take them down to the desired location on the page.
My issue comes as the user clicks on the nav link they are brought to the location but the dropdown menu will not close.
Next to this I also want to animate my menu from top to bottom, so it looks more elegant. I tried lots of things but I can't seem to make it work.. Hopefully you can help me out!
I uploaded this question already this morning but noticed that the great answers that were given to me did not work with the rest of my code. I thus decided to re-upload my question but this time adding my full html/css and js code.
link to my GitHub page: https://kabk.github.io/go-theses-21-sacha-van-alfen/LandingPage.html
html:
<!DOCTYPE html>
<html>
<head>
<!-- head section -->
<meta charset="utf-8">
<title>Rosy Retrospect</title>
<meta name="viewport" content="width=device-width" />
<link href="index.css" rel="stylesheet" />
</head>
<body>
<label for="drop" class="toggle">☰</label>
<label for="drop2" class="toggle2"><img src="images/rose.png"></label>
<!-- ☰ -->
<div class="bg-left"></div>
<section class="bg-container">
<div class="bg-left"></div>
</section>
<div class="page-header">
<nav>
<label for="drop2" class="toggle2"><img src="images/rose.png"></label>
<input type="checkbox" id="drop2" />
<ul class="menu2">
</ul>
</nav>
<nav>
<label for="drop" class="toggle">☰</label>
<input type="checkbox" id="drop" />
<ul class="menu">
<li>
<li>ABSTRACT</li>
<li>INTRODUCTION</li>
<li>I. <br>THE MEANING OF NOSTALGIA IN CULTURAL HISTORY</li>
<li>II. <br>CONTEMPORARY NOSTALGIA</li>
<li>III. <br>THE TWO FACES OF NOSTALGIA</li>
<li>CONCLUSION</li>
<li>BIBLIOGRAPHY</li>
</ul>
</nav>
<div id="title-bar-grey">ROSY RETROSPECT</div>
</div>
<div class="video-container">
<video class="animation" playsinline autoplay muted preload loop><source src="images/opener.mp4"/></video>
</div>
<div class="flex-container">
<!-- THESIS -->
<div class="abstract">
<a id="abstract" class="subheaders"><h1>ABSTRACT</h1></a>
</div>
<div class="intermezzo's">
<a id="intermezzo's" class="subheaders"><h1>INTERMEZZO'S</h1></a>
</div>
<div class="introduction">
<a id="introduction" class="chapter-title"><h1>INTRODUCTION</h1></a>
<br />
<p>
<br>
<br><br>
<div class="indent">How did nostalgia’s meaning develop from the coined moment of the terminology, and how has this concept been experienced in Europe since the 2000’s (with special focus on the period from 2010-2020) in comparison to the 17th century?</div>
<br>
<p>In order to answer this question, I have divided my thesis into chapters. The <span class="text-shadow underline">first chapter</span> is an introduction to the history of nostalgia. From the 17th century, when nostalgia was seen as a curable disease, to the mid-nineteenth century, when nostalgia became institutionalized in national and provincial museums, historical centres, heritage foundations, and memorials. The past was until that moment no longer unknown or unknowable. The past became “heritage”. Further I will also shine a light on the start of Romanticism and how nostalgia emerged during that time. In the <span class="text-shadow underline">second chapter</span> I will dive more into the technology that once promised to bridge modern displacement and distance and provide a miracle cure for nostalgic soreness. On the contrary, technology became much faster than nostalgic longing. If we claim that progress did not cure nostalgia; did it increase it instead? In the
<span class="text-shadow underline">final chapter</span> I will look at nostalgia as seen from two different points of view: the positive view on nostalgia; how it directly stimulates creativity. And a more negative view on nostalgia: how it represents a personal insufficiency and an unaffordable luxury as such.
</p>
<br>
<br>
</div>
<div class="chapterI">
<a id="chapterI" class="chapter-title"><h1>I.<br>THE MEANING OF NOSTALGIA IN CULTURAL HISTORY</h1></a>
<br>
<span>
<p id="chapterI.I" class="subheaders">I.I THE ACTUAL AND THE IMAGINARY</p>
</span>
<br>
<p>Nostalgia originates from the Greek <i>nostos</i> <span class="basker"><a>(νόστος)</a></span> and <i>algia</i> <span class="basker"><a>(ἄλγος)</a></span>. <i>Nostos</i> means to return home and <i>algia</i> means pain and longing. Almost everyone has experienced nostalgic feelings, though it can be hard to define. One of the difficulties in giving nostalgia a good definition is that the word has changed its meaning throughout history (Salmose, 2012). I will explain more about this <span class="text-shadow underline">later on in this chapter</span>. In Boym’s essay, she defined nostalgia as follows: “Longing for a home that no longer exists or has never existed. Nostalgia is a sentiment of loss and displacement, but it is also a romance with one’s own fantasy. The danger of nostalgia is that it tends to confuse the actual home and the imaginary one,” (Boym, 2001, P. XIII). A return home can sometimes turn out as a disappointment. In our head we tend to idealize our past, forgetting about all the negative parts. Even if everything still looks the same, the time is different. This can also be called <i>rosy retrospection</i>, which means remembering the past more positively than it actually was ("Rosy Retrospection", 2020).
<p><br>
<a href="intermezzo1.html"><div class="intermezzo1"><img src="images/roseblack.png">
</div></a><br><br><br>
<span>
<p id="chapterI.II" class="subheaders">I.II FROM CURABLE DISEASE TO INCURABLE LONGING</p>
</span>
<br>
<div class="images2"><img src="images/Hofer.png">
<div class="image-footnotes"> Image 1: The original title page to Hofer’s medical dissertation
</div>
</div>
<br>
<br>
<br>
<br>
<div class="images2"><img src="images/Painting.jpg">
<div class="image-footnotes">Image 2: <i>Evening Landscape with an Aqueduct</i> by Théodore Gericault
</div>
</div>
<br>
<p>
Back then, during the time of romanticism, nostalgia emerged from strong national feelings. Today nostalgia is still used in politics. Tradition is sometimes used an as excuse to approve or to sustain something. As an example, we can look at the <i>Zwarte Pieten</i><sup class="footnote-ref" id="fnref:3"><a rel="footnote" href="#fn:3">3</a></sup> discussion. Every year around November/December it is be brought back up again. Proponents of <i>Zwarte Piet</i> argue that it is a tradition and you can’t take that away from them, as if that legitimizes everything. As Boym would say in a very accurate way: “The mix of nostalgia and politics can be explosive,” (Boym, 2007, P.10). In <span class="text-shadow underline">the next chapter</span> I will focus more on this time period.
</p>
<br>
<div class="images2"><img src="images/Kodak.jpg">
<div class="image-footnotes">Image 3: Kodak advertisement from 1903
</div>
</div>
<br>
<br><br>
</div>
<div class="chapterII">
<a id="chapterII" class="chapter-title"><h1>II.<br>CONTEMPORARY NOSTALGIA</h1></a>
<br>
<p> An example of someone who is dealing with restorative nostalgia is earlier mentioned J. Slagboom: he desires to re-construct or relive the ‘rituals of homeland’ in the present. But how does this longing start and what influences it? Like explained in the <span class="text-shadow underline">first chapter</span>, nostalgia was defined for the first time to describe the mental symptoms of Swiss soldiers after hearing certain sounds. Still today sound can raise nostalgic feelings, but in the 21st century there are many big nostalgia influencers that were not around in the 17th century. For example, the camera, the internet and many other technical inventions. Technology is also understood to be the driving force of globalization that began in the 18th century and has continued ever since (Shangquan, 2000, P.3). Both improved technology and globalization have had a big influence on how and how much people feel nostalgic.
</p>
<br>
<a href="intermezzo2.html"><div class="intermezzo2"><img src="images/roseblack.png">
</div></a><br><br><br>
<span>
<p id="chapterII.I" class="subheaders">II.I INTENSE INTERCONNECTEDNESS</p>
</span>
<br>
<br>
<a href="intermezzo3.html"><div class="intermezzo3"><img src="images/roseblack.png">
</div></a><br><br><br>
<span>
<p id="chapterII.II" class="subheaders">II.II HYBRID MEMORY: THE INFLUENCE OF TECHNOLOGY ON THE MIND</p>
</span>
<br>
<p>Like mentioned in <span class="text-shadow underline">the beginning of this chapter</span>, globalisation and improved technology go hand in hand. Technology was once seen as something to bridge modern displacement and distance and provide a miracle cure for nostalgic sadness. On the contrary, technology and nostalgia have become co-dependent. If progress did not cure nostalgia; did it increase it?
</p>
<br>
</div>
<div class="chapterIII">
<a id="chapterIII" class="chapter-title"><h1>III.<br>THE TWO FACES OF NOSTALGIA</h1></a>
<br>
<a href="intermezzo4.html"><div class="intermezzo4"><img src="images/roseblack.png">
</div></a><br><br><br>
<span>
<p id="chapterIII.I" class="subheaders">III.I VIRTUAL REALITY OF CONSCIOUSNESS</p>
</span><br>
<br>
<a href="intermezzo5.html"><div class="intermezzo5"><img src="images/roseblack.png">
</div></a><br><br><br>
<span>
<p id="chapterIII.II" class="subheaders">III.II HISTORY WITHOUT GUILT</p>
</span>
<br>
</div>
<br><br>
<div class="conclusion">
<a id="conclusion" class="chapter-title"><h1>CONCLUSION</h1></a>
<br>
</div>
<br><br>
<div class="bibliography">
<a id="bibliography" class="chapter-title"><h1>BIBLIOGRAPHY</h1></a><br>
<div class="image-footnotes">
<br><br>Tuminas, D. (2019). <i>New exhibition ‘Joint Memory: Photographic Fragments’.</i> Fotodok.org. Retrieved 20 October 2020, from https://www.fotodok.org/en/joint-memory/
</div>
</div>
</div>
<div class="bottom-panel" id="bottom-panel">
<div class="popup-wrapper" id="popup-wrapper"></div>
</div>
<ol>
<li id="fn:1"><p><i>Simon de Wit</i> was a supermarket chain in the Netherlands from 1951 till 1972, when it became part of another Dutch supermarket chain called <i>Albert Heijn</i>. Both <i>Albert Heijn</i> and <i>Simon de Wit</i> originally come from Zaanstad ("Geschiedenis in detail | Albert Heijn", 2020).</p>
</li>
<li id="fn:2"><p>Romanticism is the name of a 19th-century vision of life that is expressed in literature, music and the visual arts ("Romanticism", 2020).</p>
</li>
<li id="fn:3"><p>To celebrate the 5th of December, which is the Dutch St. Nicholas holiday, Dutch people gather for parades in which the saint called<i>Sinterklaas</i> arrives in town to hand out candy and gifts. But these parades have taken on an increasingly political tone because of <i>Sinterklaas</i> his traditional <i>blackface</i> sidekick. In Dutch tradition, <i>Sinterklaas</i> has a “helper” named <i>Zwarte Piet</i>, or <i>Black Pete</i>, who appears as a blackface character with large gold earrings and exaggerated big red lips. The number of Dutch people who are protesting the tradition of <i>Sinterklaas</i> his “helper” is growing (Little, 2020).</p>
</li>
</ol>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="index.js"></script>
<script src="footnotes.js"></script>
<script src="navHandler.js"></script>
</body>
</html>
js:
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
// Select all links with hashes
$('a[href*="#"]')
// Remove links that don't actually link to anything
.not('[href="#"]')
.not('[href="#0"]')
.click(function(event) {
// On-page links
if (
location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
&&
location.hostname == this.hostname
) {
// Figure out element to scroll to
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
// Does a scroll target exist?
if (target.length) {
// Only prevent default if animation is actually gonna happen
event.preventDefault();
$('html, body').animate({
scrollTop: target.offset().top
}, 1000, function() {
// Callback after animation
// Must change focus!
var $target = $(target);
$target.focus();
if ($target.is(":focus")) { // Checking if the target was focused
return false;
} else {
$target.attr('tabindex','-1'); // Adding tabindex for elements not focusable
$target.focus(); // Set focus again
};
});
}
}
});
css:
/*
html, body {
overflow-y: scroll;
height:100%;
} */
html, body {
background-color: rgb(233, 233, 233);
overflow-x: hidden;
}
* {
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
text-rendering: geometricPrecision;
-webkit-font-smoothing: antialiased !important;
outline: none;
}
::-webkit-scrollbar {
display: none;
}
/* LANDINPAGE */
.container {
width: 100vw;
height: 54vh;
overflow: hidden;
background: rgb(233, 233, 233);
position: fixed;
top: 8px;
left: 0px;
}
.slider {
top: 100em;
position: relative;
box-sizing: border-box;
animation: slider 70s linear infinite;
list-style-type: none;
text-align: center;
}
#keyframes slider {
0% { top: -150em }
100% { top: 0em }
}
.slider {
margin: 0;
padding: 0 1em;
line-height: 6.5em;
}
.slider p {
font-family:'OggR';
font-size: 130px;
color: rgb(183, 118, 218);
}
.container2 {
width: 100vw;
height: 48vh;
overflow: hidden;
background: rgb(233, 233, 233);
/* background: radial-gradient(#e66465, #9198e5); */
position: fixed;
bottom: -8px;
left: 0px;
}
.slider2 {
top: 10em;
bottom:-10em;
position: relative;
box-sizing: border-box;
animation: slider 70s linear infinite;
list-style-type: none;
text-align: center;
animation-direction: reverse;
}
.slider2 {
margin: 0;
padding: 0 1em;
line-height: 5em;
}
.slider2 p {
font-family:'OggR';
font-size: 100px;
color: rgb(251, 155, 114);
}
/* TOC */
.toc{
/* height: 100vh; */
text-align: center;
position:relative;
max-height: 100vh;
}
.toc a{
font-family:'OggR';
/* line-height: 10px; */
font-size:14px;
color: black;
position:relative;
text-align: center;
text-decoration:none;
width: 100vw;
height: 100vh;
max-height: 100vh;
}
/* TEXT */
#font-face {
font-family: 'OggI';
src: url('fonts/Ogg-Italic.otf') format('opentype');
}
#font-face {
font-family: 'OggR';
src: url('fonts/Ogg-Roman.otf') format('opentype');
}
#font-face {
font-family: 'SuisseR';
src: url('fonts/SuisseWorks-Regular.otf') format('opentype');
}
#font-face {
font-family: 'SuisseI';
src: url('fonts/SuisseWorks-RegularItalic.otf') format('opentype');
}
#font-face {
font-family: 'BaskerR';
src: url('fonts/BaskervilleMTStd-Regular.otf') format('opentype');
}
p {
font-family: 'SuisseR';
font-size: 16px;
overflow-wrap: break-word;
word-wrap: break-word;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
hyphenate-limit-chars: 9 3 3;
}
i{
line-height: 5px;
text-decoration: none;
font-family: 'OggI';
}
.basker a{
font-family: serif;
}
.rose img{
position: absolute;
height: 20px;
width: 20px;
}
/* UNDERLINE LINKS */
.text-shadow {
text-shadow:
-1.5px -1.5px rgb(233, 233, 233),
-1.5px 1.5px rgb(233, 233, 233),
1.5px -1.5px rgb(233, 233, 233),
1.5px 1.5px rgb(233, 233, 233);
}
.underline a {
font-size: 16px;
font-family: 'SuisseR';
color: black;
background-size: 1px 1em;
box-shadow:
inset 0 -0.180em rgb(233, 233, 233),
inset 0 -0.23em rgb(254, 69, 213);
display: inline;
}
/* .chapter-title h1 {
text-decoration: none;
font-family: 'OggR';
font-weight: 400;
font-size: 23px;
padding-left: 18px;
} */
.chapter-title h1 {
text-decoration: none;
font-family: 'OggR';
font-weight: 400;
font-size: 23px;
padding-left: 18px;
padding-right: 18px;
text-align: center;
/* height: 100vh;
top:50vh; */
}
sup {
font-family: 'OggR', sans-serif;
font-weight: 400;
font-size: 11px;
vertical-align: baseline;
position: relative;
top: -0.4em;
}
/* .chapter-title{
height: 100vh;
} */
.subheaders {
font-family: 'OggR', serif;
font-size: 17px;
padding-left: 18px;
}
.image-footnotes {
font-family: 'SuisseR', serif;
font-size: 15px;
padding-top: 6px;
padding-left: 18px;
padding-right: 18px;
overflow-wrap: break-word;
word-wrap: break-word;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
hyphenate-limit-chars: 9 3 3;
}
/* INDENT */
.indent {
font-family: 'OggI';
font-size: 16px;
padding-top: 0px;
padding-left: 18px;
padding-right: 0px;
overflow-wrap: break-word;
word-wrap: break-word;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
hyphenate-limit-chars: 9 3 3;
}
/* PAGE HEADER*/
.page-header {
position: fixed;
z-index: 9999;
width: 100%;
height: 40px;
}
.page-middle {
position: fixed;
bottom: 47.5%;
z-index: 9999;
width: 100%;
height: 40px;
}
.page-footer {
position: fixed;
bottom: 0px;
z-index: 9999;
width: 100%;
height: 40px;
}
/* THESIS */
.video-container {
position: relative;
width: 50%;
height: 60px;
/* margin-left: 25%;
margin-right: 25%; */
padding-top: 20px;
overflow: scroll;
z-index: 1;
}
.flex-container {
position: relative;
width: 50%;
margin-left: 25%;
margin-right: 25%;
padding: 20px;
overflow: scroll;
}
.flex-container2 {
position: relative;
width: 50%;
height:100vh;
margin-left: 25%;
margin-right: 25%;
padding: 20px;
}
.abstract {
padding-top: 60px;
}
/* IMAGES */
.images {
padding-top: 25px;
padding-bottom: 25px;
z-index: 1;
}
.images img{
width: 100%;
display: block;
padding-bottom: 10px;
}
.images2 img{
width: 80%;
position: relative;
margin-left: 10%;
margin-right: 10%;
display: block;
padding-bottom: 10px;
}
/* TITLE HEADER */
#title-bar {
font-size: 18px;
position: fixed;
font-family: 'OggR';
color: rgb(147, 37, 207);
text-align: center;
padding-bottom: 1vh;
padding-top: 1vh;
float: right;
width: 100%;
height: 10%;
z-index: 200;
}
#title-bar-grey {
font-size: 18px;
position: fixed;
font-family: 'OggR';
color: rgb(233, 233, 233);
text-align: center;
padding-bottom: 1vh;
padding-top: 1vh;
float: right;
width: 100%;
height: 10%;
z-index: 200;
}
.toggle,
[id^="drop"] {
display: none;
}
nav {
margin: 0;
padding: 0;
float: center;
position: absolute;
z-index: 400;
border: solid 0px;
}
nav ul {
float: center;
position: relative;
width: 100vw;
}
.menu {
background: rgb(233, 233, 233);
background: linear-gradient(
90deg,
rgba(233, 233, 233, 0.9) 40%,
rgb(255, 101, 207) 99%
);
background: -webkit-linear-gradient(
90deg,
rgba(233, 233, 233, 0.9) 40%,
rgb(255, 101, 207) 99%
);
}
nav ul li {
text-align: center;
position: relative;
margin: 0px;
display: left;
}
nav a {
font-family: "OggR";
color: black;
font-size: 14px;
text-decoration: none;
position: relative;
text-align: center;
transition: 0.3s;
}
.toggle + a,
.menu {
display: none;
}
.toggle {
position: fixed;
display: block;
padding: 4px 20px;
color: rgb(233, 233, 233);
font-size: 20px;
text-decoration: none;
width: 20px;
height: 30px;
z-index: 9999999999999999999;
}
/* #drop:checked + .menu {
display: block;
} */
.toggle2 img{
width: 20px;
height: 20px;
position: fixed;
display: block;
top: 10px;
}
[id^=drop]:checked + ul {
display: grid;
height: 100vh;
transform: translateY(0);
}
.toggle2,
[id^=drop2] {
display: none;
}
.menu2{
background: rgb(255, 101, 207);
filter: opacity(40%);
/* filter: blur(50px); */
/* background: linear-gradient(90deg, rgba(233, 233, 233,0.9) 40%, rgb(255, 101, 207) 99%);
background: -webkit-linear-gradient(90deg, rgba(233, 233, 233,0.9) 40%, rgb(255, 101, 207) 99%); */
}
/* Hide the navigation menu by default */
/* Also hide the */
.toggle2 + a,
.menu2 {
display: none;
}
/* Stylinf the toggle lable */
.toggle2 {
position: fixed;
right: -33px;
display: block;
padding:4px 20px;
color: rgb(233, 233, 233);
font-size:20px;
text-decoration:none;
width: 50px;
height: 30px;
z-index: 9999999999999999999;
}
/* Display Dropdown when clicked on Parent Lable */
[id^=drop2]:checked + ul {
display: grid;
}
/* INTERMEZZO'S */
.intermezzo1 img{
position: absolute;
width: 30px;
height: auto;
left: 46%;
right: 50%;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}
.intermezzo2 img{
position: absolute;
width: 30px;
height: auto;
left: 46%;
right: 50%;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}
.intermezzo3 img{
position: absolute;
width: 30px;
height: auto;
left: 46%;
right: 50%;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}
.intermezzo4 img{
position: absolute;
width: 30px;
height: auto;
left: 46%;
right: 50%;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}
.intermezzo5 img{
position: absolute;
width: 30px;
height: auto;
left: 46%;
right: 50%;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}
#-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
#-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
#keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
/* footnote popup */
.footnote-ref a{
color: rgb(254, 69, 213);
}
.bottom-panel {
position: fixed;
font-size: 0.9rem;
bottom: 0;
left: 0;
right: 0;
z-index: 5;
}
.popup-wrapper {
display: none;
max-width: 100%;
margin: 0 auto;
color: black;
background-color: white;
border-top: 1px solid black;
/* background: linear-gradient(90deg, rgb(254, 69, 213) 5%, white 70%);
background: -webkit-linear-gradient(90deg, rgb(254, 69, 213) 5%, white 70%); */
z-index: 5;
}
#popup-index {
padding: 1.25rem 0 0 1.25rem;
z-index: 5;
}
#popup-close {
padding: 1.25rem;
margin-left: auto;
cursor: pointer;
z-index: 5;
}
#popup-content {
min-width: 50%;
text-align: left;
padding: 1.25rem 0 1.25rem 0.9rem;
}
ol{
display: none;
}
.bg-container {
position: fixed;
height: 100%;
width: 100%;
pointer-events: none;
overflow: hidden;
top: 0px;
z-index: 99;
}
.bg-container-bottom {
position: fixed;
height: 100%;
width: 100%;
pointer-events: none;
overflow: hidden;
bottom: 0px;
z-index: 99;
}
.bg-middle-top {
position: fixed;
height: 100%;
width: 100%;
pointer-events: none;
overflow: hidden;
top: 49.5%;
z-index: 99;
}
.bg-middle-bottom {
position: fixed;
height: 100%;
width: 100%;
pointer-events: none;
overflow: hidden;
bottom: 49.5%;
z-index: 99;
}
.bg-left {
height: 100%;
width: 100%;
background: linear-gradient(90deg, rgba(233, 233, 233, 0) 70%, rgb(255, 101, 207) 95%);
background: -webkit-linear-gradient(90deg, rgba(233, 233, 233, 0) 70%, rgb(255, 101, 207) 95%);
float: left;
}
.bg-right {
height: 100%;
width: 100%;
background: linear-gradient(90deg, rgb(255, 101, 207) 5%, rgba(233, 233, 233, 0) 30%);
background: -webkit-linear-gradient(90deg, rgb(255, 101, 207) 5%, rgba(233, 233, 233, 0) 30%);
float: left;
}
.bg-middle-top {
height: 100%;
width: 100%;
background: linear-gradient(90deg, rgba(233, 233, 233, 0) 85%, rgb(255, 101, 207) 99%);
background: -webkit-linear-gradient(90deg, rgba(233, 233, 233, 0) 85%, rgb(255, 101, 207) 99%);
float: left;
}
.bg-middle-bottom {
height: 100%;
width: 100%;
background: linear-gradient(90deg, rgb(255, 101, 207) 1%, rgba(233, 233, 233, 0) 15%);
background: -webkit-linear-gradient(90deg, rgb(255, 101, 207) 1%, rgba(233, 233, 233, 0) 15%);
float: left;
}
/* //////////////////MOBILE VERSION 800 px////////////////// */
#media screen and (max-width: 800px) {
html, body { overflow-x: hidden }
.video-container{
position:relative;
box-sizing: border-box;
width: 100%;
margin-left: 0%;
margin-right: 0%;
padding: 0px;
/* margin-top: 8%; */
}
.flex-container{
position:relative;
box-sizing: border-box;
width: 99%;
margin-left: 0.5%;
margin-right: 0.5%;
/* margin-top: 8%; */
}
.abstract {
padding-top: 3px;
}
p {
font-size: 15px;
}
h1 {
font-size: 20px;
/* text-indent: 13px; */
padding-left: 13px;
line-height: 24px;
}
.chapter-title h1 {
padding-left: 13px;
}
.subheaders {
padding-left: 13px;
line-height: 20px;
}
#title-bar > h1 {
font-size: 14px;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-indent: 0px;
}
.image-footnotes {
font-size: 12px;
padding-top: 8px;
padding-left: 16px;
padding-right: 16px;
}
.image-footnotes-italic {
font-size: 12px;
}
}
#media screen and (max-width: 380px) {
html, body { overflow-x: hidden }
#keyframes slider {
0% { top: -140em }
100% { top: 0em }
}
.slider {
line-height: 5.8em;
}
.slider p {
font-size: 115px;
}
.slider2 {
line-height: 4.5em;
}
.slider2 p {
font-size: 85px;
}
}
Try this:
const toggleBtn = document.getElementById("toggle");
const navMenu = document.getElementById("navMenu");
const links = document.getElementsByClassName("navLink");
let navBarOpen = false;
toggleBtn.addEventListener("click", function () {
if (!navBarOpen) {
navMenu.classList.remove("close");
navMenu.classList.add("open");
toggleBtn.classList.remove("close");
toggleBtn.classList.add("open");
navBarOpen = true;
} else if (navBarOpen) {
navMenu.classList.remove("open");
navMenu.classList.add("close");
toggleBtn.classList.remove("open");
toggleBtn.classList.add("close");
navBarOpen = false;
}
});
/* Credit to: Elnatan vazana: https://stackoverflow.com/users/12740967/elnatan-vazana */
for (let i = 0; i < links.length; i++) {
links[i].addEventListener("click", () => {
navMenu.classList.remove("open");
navMenu.classList.add("close");
toggleBtn.classList.remove("open");
toggleBtn.classList.add("close");
navBarOpen = false;
});
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav {
display: block;
transform: translateY(-100%);
transition-duration: 0s;
}
nav.close {
transition-duration: 0.5s;
transform: translateY(-100%);
}
nav.open {
transition-duration: 0.5s;
transform: translateY(0%);
}
.menu {
list-style: none;
background-color: #f8f9fa;
padding: 30px;
}
.menu li {
list-style: none;
padding: 15px 15px;
font-size: 14px;
}
.menu li a {
text-decoration: none;
color: #111111;
transition: opacity 0.3s;
}
.menu li a:hover {
opacity: 0.7;
}
#toggle {
position: absolute;
z-index: 999;
top: 20px;
right: 25px;
background-color: #212529;
border-radius: 50%;
width: 70px;
height: 70px;
color: #f8f9fa;
cursor: pointer;
}
#toggle .icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#toggle span {
background-color: #f8f9fa;
width: 30px;
height: 2px;
display: block;
margin: 8px 0px;
}
#toggle.open span {
margin: 0px;
transition-duration: 0.2s;
}
#toggle.open span:nth-child(1) {
transform: rotate(45deg);
}
#toggle.open span:nth-child(2) {
display: none;
}
#toggle.open span:nth-child(3) {
transform: rotate(-45deg);
}
#toggle.close span {
display: block;
margin: 8px 0px;
transition-duration: 0.2s;
transform: rotate(0deg);
}
<div id="toggle">
<div class="icon">
<span></span>
<span></span>
<span></span>
</div>
</div>
<nav id="navMenu">
<ul class="menu" id="menu">
<li><a class="navLink" href="#abstract">ABSTRACT</a></li>
<li><a class="navLink" href="#introduction">INTRODUCTION</a></li>
<li>
<a class="navLink" href="#chapterI"
>I. <br />THE MEANING OF NOSTALGIA IN CULTURAL HISTORY</a
>
</li>
<li>
<a class="navLink" href="#chapterII"
>II. <br />CONTEMPORARY NOSTALGIA</a
>
</li>
<li>
<a class="navLink" href="#chapterIII"
>III. <br />THE TWO FACES OF NOSTALGIA</a
>
</li>
<li><a class="navLink" href="#conclusion">CONCLUSION</a></li>
<li><a class="navLink" href="#bibliography">BIBLIOGRAPHY</a></li>
</ul>
</nav>
If you do not understand any part of the code then feel free to ask me.
Codepen: https://codepen.io/manaskhandelwal1/pen/BaLqbPP
Live Link: https://stackoverflow-sachava.netlify.app/
I was trying to create an animated hamburger nav menu. The functionality is simple. It will be in a fixed position & incorporate in a circle. When I click that circle the background will overlap the entire screen & nav links will be visible. I have used pseudo-class to create functionality. it works well, but a little mistake appeared. When I clicked the nav links the background should scale to 0. But it is nowhere can be done using CSS. So I used JS click event for it. It worked for the first try after that the menu keep scaled to 0 unit. I need to fix it so that the js click event functionality reset itself on every try. The link is given below.
codepen here
Code-
const navElement = document.querySelector('.navigation__nav');
const navBackground = document.querySelector('.navigation__background');
const navgationList = document.querySelectorAll('.navigation__item');
navgationList.forEach(function(items) {
let x = items;
items.addEventListener('click', closeNav);
function closeNav() {
navElement.style.transform = 'scale(0)';
navBackground.style.transform = 'scale(0)';
}
});
body {
background-color: cyan;
}
.navigation__checkbox {
display: none;
}
.navigation__button {
background-color: #fff;
height: 7rem;
width: 7rem;
position: fixed;
top: 6rem;
right: 6rem;
border-radius: 50%;
z-index: 2000;
box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.1);
text-align: center;
cursor: pointer;
}
#media only screen and (max-width: 56.25em) {
.navigation__button {
top: 4rem;
right: 4rem;
}
}
#media only screen and (max-width: 37.5em) {
.navigation__button {
top: 3rem;
right: 3rem;
}
}
.navigation__background {
height: 6rem;
width: 6rem;
border-radius: 50%;
position: fixed;
top: 6.5rem;
right: 6.5rem;
background-image: radial-gradient(#4ea5f7, #0400ff);
z-index: 1000;
transition: transform 0.8s cubic-bezier(0.86, 0, 0.07, 1);
}
#media only screen and (max-width: 56.25em) {
.navigation__background {
top: 4.5rem;
right: 4.5rem;
}
}
#media only screen and (max-width: 37.5em) {
.navigation__background {
top: 3.5rem;
right: 3.5rem;
}
}
.navigation__nav {
height: 100vh;
position: fixed;
top: 0;
left: 0;
z-index: 1500;
opacity: 0;
width: 0;
transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.navigation__list {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
list-style: none;
text-align: center;
width: 100%;
}
.navigation__item {
margin: 1rem;
}
.navigation__link:link,
.navigation__link:visited {
display: inline-block;
font-size: 3rem;
font-weight: 300;
padding: 1rem 2rem;
color: #fff;
text-decoration: none;
text-transform: uppercase;
background-image: linear-gradient(120deg, transparent 0%, transparent 50%, #fff 50%);
background-size: 220%;
transition: all .4s;
}
.navigation__link:link span,
.navigation__link:visited span {
margin-right: 1.5rem;
display: inline-block;
}
.navigation__link:hover,
.navigation__link:active {
background-position: 100%;
color: #0400ff;
transform: translateX(1rem);
}
.navigation__checkbox:checked~.navigation__background {
transform: scale(80);
}
.navigation__checkbox:checked~.navigation__nav {
opacity: 1;
width: 100%;
}
.navigation__icon {
position: relative;
margin-top: 3.5rem;
}
.navigation__icon,
.navigation__icon::before,
.navigation__icon::after {
width: 3rem;
height: 2px;
background-color: #333;
display: inline-block;
}
.navigation__icon::before,
.navigation__icon::after {
content: "";
position: absolute;
left: 0;
transition: all .2s;
}
.navigation__icon::before {
top: -.8rem;
}
.navigation__icon::after {
top: .8rem;
}
.navigation__button:hover .navigation__icon::before {
top: -1rem;
}
.navigation__button:hover .navigation__icon::after {
top: 1rem;
}
.navigation__checkbox:checked+.navigation__button .navigation__icon {
background-color: transparent;
}
.navigation__checkbox:checked+.navigation__button .navigation__icon::before {
top: 0;
transform: rotate(135deg);
}
.navigation__checkbox:checked+.navigation__button .navigation__icon::after {
top: 0;
transform: rotate(-135deg);
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Menu</title>
</head>
<body>
<div class="navigation">
<input type="checkbox" class="navigation__checkbox" id="navi-toggle">
<label for="navi-toggle" class="navigation__button">
<span class="navigation__icon"> </span>
</label>
<div class="navigation__background"> </div>
<nav class="navigation__nav">
<ul class="navigation__list">
<li class="navigation__item"><span>01</span> Our Works</li>
<li class="navigation__item"><span>02</span> Features</li>
<li class="navigation__item"><span>03</span> Our Services</li>
<li class="navigation__item"><span>04</span> Blogs</li>
<li class="navigation__item"><span>05</span> Contact Us</li>
<li class="navigation__item"><span>06</span> Know About Author</li>
</ul>
</nav>
</div>
</body>
</html>
[p.s.- comment out the js code first to see the working CSS.]
Although this is for practices hence any help will be a big help for me to understand js and dom.
I reworked a bit your closeNav function in order to get what you want working.
function closeNav(){
navElement.style.transform = 'scale(0)';
navBackground.style.transform = 'scale(0)';
// setTimeout will be useful for resetting our elements once they
// reached scale(0)
setTimeout(() => {
// You can check or uncheck a checkbox in javascript using .checked,
// here in order to set the styles back to normal.
document.querySelector('.navigation__checkbox').checked = false;
// Wait a bit more that the elements have been reset to remove the
// styles given in JS above.
setTimeout(() => {
navElement.style = '';
navBackground.style = '';
}, 500);
}, 1000);
}
You'll need to rework the timeouts so that they exactly meet your transition duration !
The CSS already handles what happens when the checkbox isn't checked. This works fine for me.
function closeNav(){
document.querySelector('.navigation__checkbox').checked = false;
}
As you can see I have positioned my divs properly position: relative; for slideshow and position: absolute; for containers
I have looked at similar questions that others posted and tried to fix the issue. It is still not working. Everything else works except slideshows. Slideshow shows only the last image. Does not change. My side panels work perfectly.
previously I had not added $(document).ready(function ()... In hopes of fixing issue I tried it but something else seems to be the problem. Any help would be appreciated, Thank you!
here are my files
//jshint esversion:6
$(document).ready(function (){
$("#slideshow > div:gt(0)").hide();
setInterval(function(){
$('#slideshow > div:first').fadeOut(1000).next().fadeIn(1000).end().appendTo('#slideshow');
}, 3000);
});
/* Set the width of the sidebar to 250px (show it) */
function openNav() {
document.getElementById("mySidepanel").style.width = "250px";
}
/* Set the width of the sidebar to 0 (hide it) */
function closeNav() {
document.getElementById("mySidepanel").style.width = "0";
}
img{
background-size: cover;
position: absolute;
background: rgba(0, 0, 0, 0.5);
}
.container {
width: 100%;
}
.container img {
height: 100%;
width: 100%;
border-radius: 20px 20px;
}
.QuoteBox{
bottom: 0;
left: 50px;
position: absolute;
height: auto;
width: auto;
text-align:center;
}
.authorName{
color: #e79cc2;
font-family:'Cinzel', serif;
}
p{
color: #a6dcef;
font-family: "Courier New", Courier, monospace;
font-size: 15px;
align-items: center;
}
.slide{
background-image: url('https://paintingvalley.com/images/dark-abstract-painting-11.jpg');
background-size: cover;
background-position: right;
background-repeat: no-repeat;
background-color: #ff4301;
background-blend-mode: multiply;
}
.backmost{
/* background-color: #1f4068; */
height: 100vh;
width: 100vw;
position: absolute;
top: 0;
left: 0;
}
.slide{
/* background-color: #e1ffc2; */
top: 0;
left: 0;
height: 100vh;
width: 100vw;
position: relative;
box-shadow: 25px 25px 50px 0 #111d5e inset, -25px -25px 50px 0 #111d5e inset;
}
#slideshow{
/* background-color: #ffa931; */
top: 0;
left: 37px;
height: 91.75%;
width: 94.75%;
position: relative;
}
#slideshow > div > img{
position: absolute;
}
/* The sidepanel menu */
.sidepanel {
height: 250px; /* Specify a height */
width: 0; /* 0 width - change this with JavaScript */
position: fixed; /* Stay in place */
z-index: 1; /* Stay on top */
top: 0;
left: 0;
background-color: #192965; /* Black*/
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 60px; /* Place content 60px from the top */
transition: 0.5s; /* 0.5 second transition effect to slide in the sidepanel */
}
/* The sidepanel links */
.sidepanel a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
/* When you mouse over the navigation links, change their color */
.sidepanel a:hover {
color: #f1f1f1;
}
/* Position and style the close button (top right corner) */
.sidepanel .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
/* Style the button that is used to open the sidepanel */
.openbtn {
font-size: 15px;
cursor: pointer;
background-color: #192965;
color: white;
padding: 5px 10px;
border: none;
}
.openbtn:hover {
background-color: #192965;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Name</title>
<link href="/css/homestyles.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cinzel&family=El+Messiri&display=swap" rel="stylesheet">
</head>
<body>
<div class="backmost">
<div class="slide">
<div class="QuoteBox">
<p>“Vision is the art of seeing things invisible.” <span class="authorName"> ― Jonathan Swift</span></p>
</div>
<div id="mySidepanel" class="sidepanel">
×
About
Work Experience
Art
Football
</div>
<button class="openbtn" onclick="openNav()">☰ Pawan Panta</button>
<div id="slideshow">
<div class="container">
<img src="/images/IMG_E2670.JPG">
</div>
<div class ="container">
<img src="/images/IMG_E2668.JPG">
</div>
<div class="container">
<img src="/images/IMG_E2665.JPG">
</div>
</div>
</div>
</div>
<script src="myWebJs.js" charset="utf-8"></script>
<script src="JsFiles/homepageJS.js" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</body>
</html>
I made some modifications in $(document).ready() and replaced the images with inline data to visualize the fade in / fade out and the images get replaced now.
Looks like the fadeOut function returns immediately and not after the fading is finished. I created a callback function which gets called once fadeOut, see https://api.jquery.com/fadeOut/ which seems to do the trick.
//jshint esversion:6
$(document).ready(function (){
//$("#slideshow > div:gt(0)").hide();
setInterval(function(){
$('#slideshow > div:first').fadeOut(1000, "linear", function() { $('#slideshow > div:first').appendTo('#slideshow'); });
$('#slideshow > div:first').next().fadeIn(1000);
}, 3000);
});
/* Set the width of the sidebar to 250px (show it) */
function openNav() {
document.getElementById("mySidepanel").style.width = "250px";
}
/* Set the width of the sidebar to 0 (hide it) */
function closeNav() {
document.getElementById("mySidepanel").style.width = "0";
}
img{
background-size: cover;
position: absolute;
background: rgba(0, 0, 0, 0.5);
}
.container {
width: 100%;
}
.container img {
height: 100%;
width: 100%;
border-radius: 20px 20px;
}
.QuoteBox{
bottom: 0;
left: 50px;
position: absolute;
height: auto;
width: auto;
text-align:center;
}
.authorName{
color: #e79cc2;
font-family:'Cinzel', serif;
}
p{
color: #a6dcef;
font-family: "Courier New", Courier, monospace;
font-size: 15px;
align-items: center;
}
.slide{
background-image: url('https://paintingvalley.com/images/dark-abstract-painting-11.jpg');
background-size: cover;
background-position: right;
background-repeat: no-repeat;
background-color: #ff4301;
background-blend-mode: multiply;
}
.backmost{
/* background-color: #1f4068; */
height: 100vh;
width: 100vw;
position: absolute;
top: 0;
left: 0;
}
.slide{
/* background-color: #e1ffc2; */
top: 0;
left: 0;
height: 100vh;
width: 100vw;
position: relative;
box-shadow: 25px 25px 50px 0 #111d5e inset, -25px -25px 50px 0 #111d5e inset;
}
#slideshow{
/* background-color: #ffa931; */
top: 0;
left: 37px;
height: 91.75%;
width: 94.75%;
position: relative;
}
#slideshow > div > img{
position: absolute;
}
/* The sidepanel menu */
.sidepanel {
height: 250px; /* Specify a height */
width: 0; /* 0 width - change this with JavaScript */
position: fixed; /* Stay in place */
z-index: 1; /* Stay on top */
top: 0;
left: 0;
background-color: #192965; /* Black*/
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 60px; /* Place content 60px from the top */
transition: 0.5s; /* 0.5 second transition effect to slide in the sidepanel */
}
/* The sidepanel links */
.sidepanel a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
/* When you mouse over the navigation links, change their color */
.sidepanel a:hover {
color: #f1f1f1;
}
/* Position and style the close button (top right corner) */
.sidepanel .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
/* Style the button that is used to open the sidepanel */
.openbtn {
font-size: 15px;
cursor: pointer;
background-color: #192965;
color: white;
padding: 5px 10px;
border: none;
}
.openbtn:hover {
background-color: #192965;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Name</title>
<link href="/css/homestyles.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cinzel&family=El+Messiri&display=swap" rel="stylesheet">
</head>
<body>
<div class="backmost">
<div class="slide">
<div class="QuoteBox">
<p>“Vision is the art of seeing things invisible.” <span class="authorName"> ― Jonathan Swift</span></p>
</div>
<div id="mySidepanel" class="sidepanel">
×
About
Work Experience
Art
Football
</div>
<button class="openbtn" onclick="openNav()">☰ Pawan Panta</button>
<div id="slideshow">
<div class="container">
<img src="data:image/png;base64,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">
</div>
<div class ="container">
<img src="data:image/png;base64,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">
</div>
<div class="container">
<img src="data:image/png;base64,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">
</div>
</div>
</div>
</div>
<script src="myWebJs.js" charset="utf-8"></script>
<script src="JsFiles/homepageJS.js" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</body>
</html>