Do CSS keyframe animations require JS to run more than once?

Do CSS keyframe animations require JS to run more than once? - javascript

I have a simple accordion and I'd like it to have a smooth scroll and fade in the text when expanding.
I'm almost there with this (see Codepen), however the keyframe animation only runs on first click. Could someone explain to me why this is? Do I need to use JS to check for the click to re-run the animation?
Is there a simpler way to do the text fade in with just CSS?
Thanks in advance for your time.
#keyframes fadeIn1 {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
details {
padding: 10px;
border-bottom: 1px solid;
}
details summary {
cursor: pointer;
transition: margin 150ms ease-out;
}
details div {
opacity: 0;
}
details[open] summary {
margin-bottom: 10px;
}
details[open] div {
animation-duration: 1s;
animation-name: fadeIn1;
animation-timing-function: ease-in;
opacity: 1;
}
<details>
<summary>Question</summary>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia amet magnam fugit nihil delectus, id ratione deleniti minima, ipsum accusantium exercitationem est ipsa, possimus harum distinctio consequatur qui recusandae et. Alias quas temporibus aliquam modi nulla omnis unde atque magni tempora, corporis ducimus voluptas, recusandae, repellendus officiis molestias cumque quam.</div>
</details>
<details>
<summary>Question</summary>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia amet magnam fugit nihil delectus, id ratione deleniti minima, ipsum accusantium exercitationem est ipsa, possimus harum distinctio consequatur qui recusandae et. Alias quas temporibus aliquam modi nulla omnis unde atque magni tempora, corporis ducimus voluptas, recusandae, repellendus officiis molestias cumque quam.</div>
</details>
<details>
<summary>Question</summary>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia amet magnam fugit nihil delectus, id ratione deleniti minima, ipsum accusantium exercitationem est ipsa, possimus harum distinctio consequatur qui recusandae et. Alias quas temporibus aliquam modi nulla omnis unde atque magni tempora, corporis ducimus voluptas, recusandae, repellendus officiis molestias cumque quam.</div>
</details>
<details>
<summary>Question</summary>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia amet magnam fugit nihil delectus, id ratione deleniti minima, ipsum accusantium exercitationem est ipsa, possimus harum distinctio consequatur qui recusandae et. Alias quas temporibus aliquam modi nulla omnis unde atque magni tempora, corporis ducimus voluptas, recusandae, repellendus officiis molestias cumque quam.</div>
</details>

Related

How to get true content height of DOM element that is being cropped by overflow: hidden (for smooth css transition to height: auto)?

Solution:
Thanks to #Kalimah, this works in composition api & script setup:
<script setup>
const state = reactive({
meetCardHeight: 100
})
const element = ref(null)
const changeElementHeight = () => {
if (state.meetCardHeight !== element.value.scrollHeight) {
state.meetCardHeight = element.value.scrollHeight
} else {
state.meetCardHeight = 100
}
}
</script>
<template>
<div ref="element" class="w-6/12 p-4 mx-auto rounded border border-slate-400 bg-slate-50 shadow cursor-pointer hover:border-slate-600 hover:shadow-md transition mb-4 overflow-hidden transition-all duration-500" :style="{ height: state.meetCardHeight + 'px'}" #click="changeElementHeight">
<h1>Hello World</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci architecto at atque beatae commodi cumque delectus dolor doloremque enim est et eum ex facere id illum incidunt, ipsum iusto labore laboriosam libero magnam minima molestias nobis nulla officia perspiciatis placeat porro possimus quo sequi tempore tenetur velit voluptatibus? Adipisci amet asperiores, autem explicabo fuga fugiat, id illum nobis obcaecati quam quasi, quibusdam tempora voluptatem? Adipisci aliquam at dignissimos dolore doloribus eaque itaque minus nam possimus quae quia temporibus vel, vero!</p>
</div>
</template>
It will expand the div to its height-auto size with a smooth transition.
Original Question:
I'm trying to compute the true height of all text in this component, despite part of it being hidden by overflow: hidden (tailwind):
<script setup>
const state = reactive({
meetCardHeight: 100
})
</script>
<template>
<div ref="element" class="w-6/12 p-4 mx-auto rounded border border-slate-400 bg-slate-50 shadow cursor-pointer hover:border-slate-600 hover:shadow-md transition mb-4 overflow-hidden transition-all duration-500" :style="{ height: state.meetCardHeight + 'px'}">
<h1>Hello World</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci architecto at atque beatae commodi cumque delectus dolor doloremque enim est et eum ex facere id illum incidunt, ipsum iusto labore laboriosam libero magnam minima molestias nobis nulla officia perspiciatis placeat porro possimus quo sequi tempore tenetur velit voluptatibus? Adipisci amet asperiores, autem explicabo fuga fugiat, id illum nobis obcaecati quam quasi, quibusdam tempora voluptatem? Adipisci aliquam at dignissimos dolore doloribus eaque itaque minus nam possimus quae quia temporibus vel, vero!</p>
</div>
</template>
The current component height is set to 100px for the overflow property to take effect. Is there a way to determine the height that h1 and p tags would result in, if overflow would not be present?

You can find the height with scrollHieght property. It is a native JS property and is independet of vue or any other libraries.
Example:
console.log("Full Height", document.querySelector(".container").scrollHeight + "px");
.container{
height: 100px;
overflow: hidden;
}
<div class="container">
<h1>Hello World</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci architecto at atque beatae commodi cumque delectus dolor doloremque enim est et eum ex facere id illum incidunt, ipsum iusto labore laboriosam libero magnam minima molestias nobis nulla officia perspiciatis placeat porro possimus quo sequi tempore tenetur velit voluptatibus? Adipisci amet asperiores, autem explicabo fuga fugiat, id illum nobis obcaecati quam quasi, quibusdam tempora voluptatem? Adipisci aliquam at dignissimos dolore doloribus eaque itaque minus nam possimus quae quia temporibus vel, vero!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci architecto at atque beatae commodi cumque delectus dolor doloremque enim est et eum ex facere id illum incidunt, ipsum iusto labore laboriosam libero magnam minima molestias nobis nulla officia perspiciatis placeat porro possimus quo sequi tempore tenetur velit voluptatibus? Adipisci amet asperiores, autem explicabo fuga fugiat, id illum nobis obcaecati quam quasi, quibusdam tempora voluptatem? Adipisci aliquam at dignissimos dolore doloribus eaque itaque minus nam possimus quae quia temporibus vel, vero!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci architecto at atque beatae commodi cumque delectus dolor doloremque enim est et eum ex facere id illum incidunt, ipsum iusto labore laboriosam libero magnam minima molestias nobis nulla officia perspiciatis placeat porro possimus quo sequi tempore tenetur velit voluptatibus? Adipisci amet asperiores, autem explicabo fuga fugiat, id illum nobis obcaecati quam quasi, quibusdam tempora voluptatem? Adipisci aliquam at dignissimos dolore doloribus eaque itaque minus nam possimus quae quia temporibus vel, vero!</p>
</div>

Image animation resets page scroll on mobile devices

EDIT 2: I just figured it out. The overflow css property applied on the body is not being inherited by the slideshow div. Adding "overflow: hidden" to the slideshow div fixed it.
ORIGINAL POST
I have a webpage with an image slideshow. The slideshow is set to run every 5 seconds using setInterval and calling the below function:
function startSlideShow() {
console.log('starting slideshow');
const img = slideImages.shift();
img.style.zIndex = 0
slideImages.push(img);
slideImages[0].style.zIndex = 10;
slideImages[0].style.display = "block";
removePreviousImage(img);
}
The animation keyframe:
#keyframes slide {
from {
transform: translateX(100%);
}
to {
transform: translateX(0);
}
}
The structure of the page is:
Header
Slideshow
Other Content
The header "position: sticky", so it should always be visible.
The Problem: On mobile or responsive mode on browser dev tool, when I scroll down while the animation is running, the header is not visible, i.e it is ignoring the "position: sticky" css rule. Once the animation completes, the page resets the scroll position back to the top.
It works as expected on desktop, i.e the header is always visible at the top of the screen and the scroll position does not get reset.
I am still learning and I don't understand what is causing the issue and why only on mobile? Tried google but no luck, mostly because I am not sure what to search for.
EDIT:
Recreated the problem as per the code below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Slideshow</title>
<style>
body {
min-height: 100%;
font-family: Helvetica,
Arial,
sans-serif;
overflow-x: hidden;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.preload * {
animation: none !important;
}
img {
max-width: 100%;
height: auto;
}
.main__overlay {
z-index: 200;
}
.image-slider__overlay {
z-index: 1000;
}
.header {
z-index: 2000;
}
.header {
text-transform: uppercase;
padding: var(--size1) var(--size0);
opacity: 0.9;
position: sticky;
top: 0;
left: 0;
width: 100%;
background-color: #fff;
}
.image-slider {
position: relative;
}
.image-slider__img {
position: absolute;
top: 0;
left: 0;
animation-name: slide;
animation-duration: 3s;
}
.no-slide {
aspect-ratio: attr(width) / attr(height);
}
#keyframes slide {
from {
transform: translateX(100%);
}
to {
transform: translateX(0);
}
}
</style>
</head>
<body>
<body class="preload">
<header class="header">
<h1 class="header__logo">Earthen Karkhana</h1>
</header>
<div class="image-slider">
<div class="no-slide">
This div will be an image is the actual code. Image 1
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi odit, dolore omnis voluptates, accusantium
architecto eos nulla totam facere eum numquam temporibus error. Saepe aliquid asperiores veritatis sit
inventore repudiandae.
Quam ut praesentium reprehenderit necessitatibus ab voluptatibus esse laborum enim, veniam exercitationem quia
autem cum nihil et officiis itaque vero quasi distinctio. Quidem, ad a ipsum nihil incidunt ipsa libero!
</p>
</div>
<div class="image-slider__img">
This div will be an image is the actual code. Image 2
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi odit, dolore omnis voluptates, accusantium
architecto eos nulla totam facere eum numquam temporibus error. Saepe aliquid asperiores veritatis sit
inventore repudiandae.
Quam ut praesentium reprehenderit necessitatibus ab voluptatibus esse laborum enim, veniam exercitationem quia
autem cum nihil et officiis itaque vero quasi distinctio. Quidem, ad a ipsum nihil incidunt ipsa libero!
</p>
</div>
<div class="image-slider__img">
This div will be an image is the actual code. Image 3
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi odit, dolore omnis voluptates, accusantium
architecto eos nulla totam facere eum numquam temporibus error. Saepe aliquid asperiores veritatis sit
inventore repudiandae.
Quam ut praesentium reprehenderit necessitatibus ab voluptatibus esse laborum enim, veniam exercitationem quia
autem cum nihil et officiis itaque vero quasi distinctio. Quidem, ad a ipsum nihil incidunt ipsa libero!
</p>
</div>
<div class="image-slider__img">
This div will be an image is the actual code. Image 4
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi odit, dolore omnis voluptates, accusantium
architecto eos nulla totam facere eum numquam temporibus error. Saepe aliquid asperiores veritatis sit
inventore repudiandae.
Quam ut praesentium reprehenderit necessitatibus ab voluptatibus esse laborum enim, veniam exercitationem quia
autem cum nihil et officiis itaque vero quasi distinctio. Quidem, ad a ipsum nihil incidunt ipsa libero!
</p>
</div>
</div>
<section class="projects__main">
<h2 class="projects-link--heading body_text">
Projects
</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi odit, dolore omnis voluptates, accusantium
architecto eos nulla totam facere eum numquam temporibus error. Saepe aliquid asperiores veritatis sit inventore
repudiandae.
Quam ut praesentium reprehenderit necessitatibus ab voluptatibus esse laborum enim, veniam exercitationem quia
autem cum nihil et officiis itaque vero quasi distinctio. Quidem, ad a ipsum nihil incidunt ipsa libero!
Autem reiciendis fugit quis, perspiciatis nihil sit aliquam impedit dicta placeat veritatis culpa voluptate nisi
aut consectetur unde, alias et fugiat quisquam dolor distinctio eos dolore non error! Id, optio.
Omnis excepturi delectus inventore ullam harum accusamus sed consequatur autem quo obcaecati mollitia corrupti
amet, eaque veritatis, sit dolorum voluptates id atque rem, ipsam officia? Architecto magni dignissimos sint
dolorem!
Doloremque enim nobis eum esse nihil. Fugiat nesciunt obcaecati omnis. Doloribus harum deserunt sapiente omnis
quasi aut voluptatum consequatur perferendis, tempora nulla blanditiis labore vitae provident repellendus,
eveniet sit quas.
Nemo, quos perspiciatis modi repudiandae delectus doloremque. Vero dolores blanditiis itaque consequatur minus
distinctio, sapiente corporis, suscipit ratione tenetur animi sit eius quod dolorem nobis sed pariatur tempora
natus ea.
Quam sequi distinctio adipisci dolor? Asperiores exercitationem eveniet eum architecto voluptates, tempore saepe
sint eius quisquam odit veritatis debitis eligendi ab impedit, officia nam! Libero tenetur ad consequuntur eos
natus.
Corporis pariatur eius velit ad sequi facere impedit quia laboriosam quos? Eum, labore minima temporibus placeat
sunt totam neque, quod harum facilis reiciendis doloribus aliquid dolor saepe distinctio expedita sint.
Repellat, ipsam! Omnis nihil maiores amet excepturi velit, deleniti minus voluptatibus quasi vel, magni aperiam
veritatis non asperiores, nisi dolorum hic eligendi ipsa? Omnis id esse hic non sed est!
Qui accusantium dignissimos natus corporis asperiores, perferendis eveniet ab et, consequuntur vitae officiis
nulla consequatur obcaecati magni corrupti nihil neque nam iste quidem! Libero eos est, beatae error praesentium
eligendi!
</p>
</section>
<script>
"use strict";
const slideImages = Array.from(document.querySelectorAll(".image-slider__img"));
// Wait for page to load before starting slideshow
window.addEventListener('load', (e) => {
document.querySelector("body").classList.remove("preload");
// slideshow should only run on index page
if (document.querySelectorAll(".image-slider__img").length == 0) return;
// Static image not required to be visible once slide images are loaded in
setTimeout(() => document.querySelector(".no-slide").style.opacity = 0, 8000);
slideShow();
});
function slideShow() {
slideImages.forEach((img, index) => {
img.style.display = "none";
});
console.log(slideImages);
let animationInterval = setInterval(startSlideShow, 5000);
}
function startSlideShow() {
console.log('starting slideshow');
const img = slideImages.shift();
img.style.zIndex = 0
slideImages.push(img);
slideImages[0].style.zIndex = 10;
slideImages[0].style.display = "block";
removePreviousImage(img);
}
function removePreviousImage(img) {
setTimeout(function () { img.style.display = "none" }, 3000);
}
</script>
</body>
</html>
If viewed in responsive mode in dev tools the page layout changes when the animation is running, but that does not happen on desktop mode.
In desktop mode, resizing the browser to match width of a mobile device does not trigger the problem.

I guess your browser doesnt support position : sticky; try to use another browsers like chrome .
‌‌‌‌‌‌
and I highly recommend You better to use "browser-prefixes" .
You can read about "browser-prefixes" in :
https://www.thoughtco.com/css-vendor-prefixes-3466867

Make element fixed when past scrolled

how can I give an element with class .navbar fixed position and make it stay on top of the viewport as long as the user scrolls past it using JQuery. Is it possible to do?

Are you looking to pin the navbar when you reach the top of the element while scrolling?
CSS
#navbar.sticky {
position: fixed;
top: 0;
}
JS
var navbar = document.getElementById('navbar'),
navbarOffset = navbar.getBoundingClientRect();
window.addEventListener('scroll', function(e){
var offsetTop = navbarOffset.top;
if(window.pageYOffset > offsetTop){
navbar.classList.add('sticky');
}else{
navbar.classList.remove('sticky');
}
});
DEMO

If you don't need to support IE, you can achieve this by using CSS selector position: sticky on the navigation bar.
body {
height: 2000px;
}
.header {
height: 60px;
background: #0099ff;
position: sticky;
top: 15px;
}
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur corrupti harum adipisci inventore quisquam? Impedit fugit ratione numquam debitis, sed molestiae nostrum dolor hic a cumque perspiciatis nesciunt dolorum similique corrupti explicabo harum accusamus eaque magni quibusdam ad autem illum eligendi. Minus amet a labore libero beatae, molestias. Id veritatis dolorum commodi quis porro libero rem magnam cum itaque blanditiis illum maxime non voluptas esse, saepe qui quia sapiente nostrum fugiat inventore eius natus quisquam quod dolore. Animi, in cumque earum, at ullam ratione repellat inventore asperiores ab et consequatur optio distinctio, ipsa beatae autem repudiandae consequuntur nesciunt voluptatem cum.<p>
<header class="header"></header>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur corrupti harum adipisci inventore quisquam? Impedit fugit ratione numquam debitis, sed molestiae nostrum dolor hic a cumque perspiciatis nesciunt dolorum similique corrupti explicabo harum accusamus eaque magni quibusdam ad autem illum eligendi. Minus amet a labore libero beatae, molestias. Id veritatis dolorum commodi quis porro libero rem magnam cum itaque blanditiis illum maxime non voluptas esse, saepe qui quia sapiente nostrum fugiat inventore eius natus quisquam quod dolore. Animi, in cumque earum, at ullam ratione repellat inventore asperiores ab et consequatur optio distinctio, ipsa beatae autem repudiandae consequuntur nesciunt voluptatem cum.<p>

Editing List elements in side menu

i have created a side menu bar with some bit of css and java script but when i tried to edit my list elements to fit the width of the side bar they just start far from the margin. where did i go wrong or what have i missed?
// JavaScript Document//
$('.nav-side .nav-toggle').on('click', function(e){
e.preventDefault();
$(this).parent().toggleClass('nav-open');
});
#charset "utf-8";
body
{
font: 16px "Helvetica",sans-serif;
line-height: 1.4;
font-weight: 200;
background-color: #563838;
}
.wrapper
{
margin: 0 auto;
width: 1160px;
text-align: center;
position: relative;
top: 230px;
}
.nav-side
{
position: fixed;
left: 0;
top: 0;
height: 100%;
width: 100%;
max-width: 250px;
background-color: rgba(8, 120, 164, 0.9);
box-sizing: border-box;
color: brown;
margin-left: -250px;
transition: margin 600ms ease-in-out;
}
.nav-side.nav-open
{
margin-left: 0;
box-shadow: 1px 1px 3px rgba(0,0,0,.1);
}
.nav-side ul
{
list-style: none
}
.nav-side ul li
{
height: 70px;
background-color: antiquewhite;
left: 0;
}
.nav-toggle
{
position: absolute;
right: -70px;
top: 10px;
width: 70px;
height: 70px;
background-color: rgba(30, 207, 214, 0.1);
line-height: 70px;
text-decoration: none;
text-align: center;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
box-shadow: 1px 0 3px rgba(0,0,0, .1);
}
.nav-toggle:hover
{
background-color: #1ecfd6;
cursor: pointer;
}
.nav-toggle:before
{
content: "🙇";
font-weight:900;
color: white;
font-size: 32px;
padding-left: 5px;
}
.nav-side.nav-open .nav-toggle:before
{
content: "🙆";
right: 0;
}
.logo
{
width: 100%;
height: 225px;
text-align: center;
position: fixed;
background-color: #272424;
top: 0;
left: 0;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Flavour Dome</title>
<link type="text/css" rel="stylesheet" href="css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="wrapper">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa iure, voluptatum sequi dolorem numquam ullam! Tempore error quos, nobis sapiente porro nihil ia ut optio! Animi modi, totam magnam adipisci minus, nesciunt quam cum repudiandae aspernatur. Quod, dolor veritatis perferendis repellat pariatur quae! Molestiae repudiandae maxime impedit ad, eum est!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit aliquam id fugiat, velit veritatis esse! Ipsa tempore quasi fugit, incidunt, dignissimos rerum deserunt possimus aspernatur corporis iusto eligendi numquam aliquam repellat alias magni ullam, nobis, placeat a. Similique odio, nesciunt est officiis ratione voluptatem tempora dicta quod vero. Amet sequi quas repellat aliquam illo totam dolorum, dolore eaque porro commodi odio vitae ex! Odit debitis excepturi necessitatibus esse, velit rerum? Molestiae, earum illum rem quas maiores provident adipisci perspiciatis porro? Consequuntur ratione, velit doloribus unde, necessitatibus corrupti sunt iusto numquam, architecto ex provident hic rem. Aspernatur a amet expedita, ad repellat voluptatem laboriosam, blanditiis deserunt quis molestiae quae, hic perferendis in totam optio vero. Accusamus aut beatae id sed, omnis dicta rerum repudiandae nostrum minus, illum nemo non accusantium perferendis ratione enim ea quas veritatis vero odit distinctio facilis assumenda harum. Atque at ex ut ipsum fugit deserunt inventore, excepturi. Consequuntur, iure tempore nisi, similique, harum dignissimos, vitae temporibus blanditiis veritatis saepe rerum repellat. Incidunt sequi, voluptate asperiores quaerat dolores numquam esse obcaecati saepe unde aliquid beatae odio mollitia vero. Numquam voluptate provident molestiae error labore, fugit consequatur incidunt saepe maxime quis, molestias perspiciatis libero eaque ipsum impedit! Asperiores, doloremque!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis minus itaque odit atque, accusamus amet, nulla magnam beatae quidem quasi, earum. Praesentium facilis enim maxime aspernatur cumque repellendus dolore alias facere magni, unde incidunt explicabo minima culpa, modi voluptate ad.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa iure, voluptatum sequi dolorem numquam ullam! Tempore error quos, nobis sapiente porro nihil mollitia ut optio! Animi modi, totam magnam adipisci minus, nesciunt quam cum repudiandae aspernatur. Quod, dolor veritatis perferendis repellat pariatur quae! Molestiae repudiandae maxime impedit ad, eum est!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit aliquam id fugiat, velit veritatis esse! Ipsa tempore quasi fugit, incidunt, dignissimos rerum deserunt possimus aspernatur corporis iusto eligendi numquam aliquam repellat alias magni ullam, nobis, placeat a. Similique odio, nesciunt est officiis ratione voluptatem tempora dicta quod vero. Amet sequi quas repellat aliquam illo totam dolorum, dolore eaque porro commodi odio vitae ex! Odit debitis excepturi necessitatibus esse, velit rerum? Molestiae, earum illum rem quas maiores provident adipisci perspiciatis porro? Consequuntur ratione, velit doloribus unde, necessitatibus corrupti sunt iusto numquam, architecto ex provident hic rem. Aspernatur a amet expedita, ad repellat voluptatem laboriosam, blanditiis deserunt quis molestiae quae, hic perferendis in totam optio vero. Accusamus aut beatae id sed, omnis dicta rerum repudiandae nostrum minus, illum nemo non accusantium perferendis ratione enim ea quas veritatis vero odit distinctio facilis assumenda harum. Atque at ex ut ipsum fugit deserunt inventore, excepturi. Consequuntur, iure tempore nisi, similique, harum dignissimos, vitae temporibus blanditiis veritatis saepe rerum repellat. Incidunt sequi, voluptate asperiores quaerat dolores numquam esse obcaecati saepe unde aliquid beatae odio mollitia vero. Numquam voluptate provident molestiae error labore, fugit consequatur incidunt saepe maxime quis, molestias perspiciatis libero eaque ipsum impedit! Asperiores, doloremque!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis minus itaque odit atque, accusamus amet, nulla magnam beatae quidem quasi, earum. Praesentium facilis enim maxime aspernatur cumque repellendus dolore alias facere magni, unde incidunt explicabo minima culpa, modi voluptate ad.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa iure, voluptatum sequi dolorem numquam ullam! Tempore error quos, nobis sapiente porro nihil mollitia ut optio! Animi modi, totam magnam adipisci minus, nesciunt quam cum repudiandae aspernatur. Quod, dolor veritatis perferendis repellat pariatur quae! Molestiae repudiandae maxime impedit ad, eum est!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit aliquam id fugiat, velit veritatis esse! Ipsa tempore quasi fugit, incidunt, dignissimos rerum deserunt possimus aspernatur corporis iusto eligendi numquam aliquam repellat alias magni ullam, nobis, placeat a. Similique odio, nesciunt est officiis ratione voluptatem tempora dicta quod vero. Amet sequi quas repellat aliquam illo totam dolorum, dolore eaque porro commodi odio vitae ex! Odit debitis excepturi necessitatibus esse, velit rerum? Molestiae, earum illum rem quas maiores provident adipisci perspiciatis porro? Consequuntur ratione, velit doloribus unde, necessitatibus corrupti sunt iusto numquam, architecto ex provident hic rem. Aspernatur a amet expedita, ad repellat voluptatem laboriosam, blanditiis deserunt quis molestiae quae, hic perferendis in totam optio vero. Accusamus aut beatae id sed, omnis dicta rerum repudiandae nostrum minus, illum nemo non accusantium perferendis ratione enim ea quas veritatis vero odit distinctio facilis assumenda harum. Atque at ex ut ipsum fugit deserunt inventore, excepturi. Consequuntur, iure tempore nisi, similique, harum dignissimos, vitae temporibus blanditiis veritatis saepe rerum repellat. Incidunt sequi, voluptate asperiores quaerat dolores numquam esse obcaecati saepe unde aliquid beatae odio mollitia vero. Numquam voluptate provident molestiae error labore, fugit consequatur incidunt saepe maxime quis, molestias perspiciatis libero eaque ipsum impedit! Asperiores, doloremque!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis minus itaque odit atque, accusamus amet, nulla magnam beatae quidem quasi, earum. Praesentium facilis enim maxime aspernatur cumque repellendus dolore alias facere magni, unde incidunt explicabo minima culpa, modi voluptate ad.</p>
</div>
<div class="logo"><img src="../../Pictures/fd logo.png" alt="Flavour Dome"/></div>
<nav class="nav-side" nav-open>
<ul>
<li>
Home
</li>
<li>
Menu
</li>
<li>
Store
</li>
<li>
Account
</li>
<li>
Shopping Cart
</li>
</ul>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
How can i get my list elements fitting the width of my side menu instead of them starting far from the left margin?

Remove default padding and margin from ul tag, most of tags consist of default styling same here ul tag has default styling for both margin and padding and that's why your menu has that spacing.
Default ul styling,
ul{
display: block;
list-style-type: disc;
margin-top: 1em;
margin-bottom: 1 em;
margin-left: 0;
margin-right: 0;
padding-left: 40px;
}
Make this changes in your code.
.nav-side ul {
list-style: none;
padding:0; /* Add this */
margin:0;
}

You need work on little bit on CSS styling, modify the following selector as suggested.
.nav-side ul
{
list-style: none;
padding:10px;
margin: 0;
background-color: antiquewhite;
}

give alert after load lazy

I'm using lazySizes jquery plugin and I want to have alert when my lazy loaded how can I do for my all loaded content ? I want to do this for my ajax content if I have alert I guess I can handle what I want to do
body {
padding: 30px;
width: 80%;
margin: 0 auto;
}
.teaser.lazyload {
opacity: 0;
transform: scale(0.8);
}
.teaser.lazyloaded {
opacity: 1;
transform: scale(1);
transition: all 700ms;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="teaser lazyload" data-expand="-120">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum eum velit cumque, sint perspiciatis, ea nam illo repellat labore voluptates, vero inventore dolor fuga ipsum vel quas? Debitis, laborum eveniet?</p>
<h1>Teaser Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel excepturi saepe obcaecati repellat natus at enim fugit sapiente qui et corporis laudantium totam adipisci nihil, cumque rem reprehenderit aspernatur nostrum sunt voluptates tempora pariatur
ea! Commodi quo minima similique quaerat velit vitae esse beatae quos illo dolores? Saepe quam, sed praesentium ut, vel quaerat, cupiditate laudantium expedita quisquam aperiam voluptatem quae illo cumque odit molestiae iure beatae odio? Omnis velit
minima aspernatur qui voluptatum sapiente laudantium explicabo reiciendis architecto quaerat adipisci aliquam magni, reprehenderit iure fugit ex voluptas provident accusamus optio nostrum nemo sed soluta. Numquam quia, veniam molestias? Accusantium.</p>
</div>
<div class="teaser lazyload" data-expand="-120">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum eum velit cumque, sint perspiciatis, ea nam illo repellat labore voluptates, vero inventore dolor fuga ipsum vel quas? Debitis, laborum eveniet?</p>
<h1>Teaser Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel excepturi saepe obcaecati repellat natus at enim fugit sapiente qui et corporis laudantium totam adipisci nihil, cumque rem reprehenderit aspernatur nostrum sunt voluptates tempora pariatur
ea! Commodi quo minima similique quaerat velit vitae esse beatae quos illo dolores? Saepe quam, sed praesentium ut, vel quaerat, cupiditate laudantium expedita quisquam aperiam voluptatem quae illo cumque odit molestiae iure beatae odio? Omnis velit
minima aspernatur qui voluptatum sapiente laudantium explicabo reiciendis architecto quaerat adipisci aliquam magni, reprehenderit iure fugit ex voluptas provident accusamus optio nostrum nemo sed soluta. Numquam quia, veniam molestias? Accusantium.</p>
</div>
<div class="teaser lazyload" data-expand="-120">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum eum velit cumque, sint perspiciatis, ea nam illo repellat labore voluptates, vero inventore dolor fuga ipsum vel quas? Debitis, laborum eveniet?</p>
<h1>Teaser Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel excepturi saepe obcaecati repellat natus at enim fugit sapiente qui et corporis laudantium totam adipisci nihil, cumque rem reprehenderit aspernatur nostrum sunt voluptates tempora pariatur
ea! Commodi quo minima similique quaerat velit vitae esse beatae quos illo dolores? Saepe quam, sed praesentium ut, vel quaerat, cupiditate laudantium expedita quisquam aperiam voluptatem quae illo cumque odit molestiae iure beatae odio? Omnis velit
minima aspernatur qui voluptatum sapiente laudantium explicabo reiciendis architecto quaerat adipisci aliquam magni, reprehenderit iure fugit ex voluptas provident accusamus optio nostrum nemo sed soluta. Numquam quia, veniam molestias? Accusantium.</p>
</div>
<div class="teaser lazyload" data-expand="-220">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum eum velit cumque, sint perspiciatis, ea nam illo repellat labore voluptates, vero inventore dolor fuga ipsum vel quas? Debitis, laborum eveniet?</p>
<h1>Teaser Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel excepturi saepe obcaecati repellat natus at enim fugit sapiente qui et corporis laudantium totam adipisci nihil, cumque rem reprehenderit aspernatur nostrum sunt voluptates tempora pariatur
ea! Commodi quo minima similique quaerat velit vitae esse beatae quos illo dolores? Saepe quam, sed praesentium ut, vel quaerat, cupiditate laudantium expedita quisquam aperiam voluptatem quae illo cumque odit molestiae iure beatae odio? Omnis velit
minima aspernatur qui voluptatum sapiente laudantium explicabo reiciendis architecto quaerat adipisci aliquam magni, reprehenderit iure fugit ex voluptas provident accusamus optio nostrum nemo sed soluta. Numquam quia, veniam molestias? Accusantium.</p>
</div>
<div class="teaser lazyload" data-expand="-220">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum eum velit cumque, sint perspiciatis, ea nam illo repellat labore voluptates, vero inventore dolor fuga ipsum vel quas? Debitis, laborum eveniet?</p>
<h1>Teaser Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel excepturi saepe obcaecati repellat natus at enim fugit sapiente qui et corporis laudantium totam adipisci nihil, cumque rem reprehenderit aspernatur nostrum sunt voluptates tempora pariatur
ea! Commodi quo minima similique quaerat velit vitae esse beatae quos illo dolores? Saepe quam, sed praesentium ut, vel quaerat, cupiditate laudantium expedita quisquam aperiam voluptatem quae illo cumque odit molestiae iure beatae odio? Omnis velit
minima aspernatur qui voluptatum sapiente laudantium explicabo reiciendis architecto quaerat adipisci aliquam magni, reprehenderit iure fugit ex voluptas provident accusamus optio nostrum nemo sed soluta. Numquam quia, veniam molestias? Accusantium.</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/2.0.7/lazysizes.min.js"></script>
click to see codepen

The plugin does not document this very well, but there are several events being fired by it, namely lazybeforeunveil, lazybeforesizes and lazyunveilread. I'm not sure about their exact order, but you can bind to lazyunveilread in order to achieve what you want:
$('.teaser.lazyload').on('lazyunveilread', function(ev) {
alert("foo!");
console.log(ev.target); // <-- that's how you can get the element that has been loaded
});
#import "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css";
body{
padding:30px;
width:80%;
margin:0 auto;
}
.teaser.lazyload {
opacity: 0;
transform: scale(0.8);
}
.teaser.lazyloaded {
opacity: 1;
transform: scale(1);
transition: all 700ms;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/2.0.7/lazysizes.min.js"></script>
<div class="teaser lazyload" data-expand="-120">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum eum velit cumque, sint perspiciatis, ea nam illo repellat labore voluptates, vero inventore dolor fuga ipsum vel quas? Debitis, laborum eveniet?</p>
<h1>Teaser Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel excepturi saepe obcaecati repellat natus at enim fugit sapiente qui et corporis laudantium totam adipisci nihil, cumque rem reprehenderit aspernatur nostrum sunt voluptates tempora pariatur ea! Commodi quo minima similique quaerat velit vitae esse beatae quos illo dolores? Saepe quam, sed praesentium ut, vel quaerat, cupiditate laudantium expedita quisquam aperiam voluptatem quae illo cumque odit molestiae iure beatae odio? Omnis velit minima aspernatur qui voluptatum sapiente laudantium explicabo reiciendis architecto quaerat adipisci aliquam magni, reprehenderit iure fugit ex voluptas provident accusamus optio nostrum nemo sed soluta. Numquam quia, veniam molestias? Accusantium.</p>
</div>
<div class="teaser lazyload" data-expand="-120">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum eum velit cumque, sint perspiciatis, ea nam illo repellat labore voluptates, vero inventore dolor fuga ipsum vel quas? Debitis, laborum eveniet?</p>
<h1>Teaser Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel excepturi saepe obcaecati repellat natus at enim fugit sapiente qui et corporis laudantium totam adipisci nihil, cumque rem reprehenderit aspernatur nostrum sunt voluptates tempora pariatur ea! Commodi quo minima similique quaerat velit vitae esse beatae quos illo dolores? Saepe quam, sed praesentium ut, vel quaerat, cupiditate laudantium expedita quisquam aperiam voluptatem quae illo cumque odit molestiae iure beatae odio? Omnis velit minima aspernatur qui voluptatum sapiente laudantium explicabo reiciendis architecto quaerat adipisci aliquam magni, reprehenderit iure fugit ex voluptas provident accusamus optio nostrum nemo sed soluta. Numquam quia, veniam molestias? Accusantium.</p>
</div>
<div class="teaser lazyload" data-expand="-120">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum eum velit cumque, sint perspiciatis, ea nam illo repellat labore voluptates, vero inventore dolor fuga ipsum vel quas? Debitis, laborum eveniet?</p>
<h1>Teaser Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel excepturi saepe obcaecati repellat natus at enim fugit sapiente qui et corporis laudantium totam adipisci nihil, cumque rem reprehenderit aspernatur nostrum sunt voluptates tempora pariatur ea! Commodi quo minima similique quaerat velit vitae esse beatae quos illo dolores? Saepe quam, sed praesentium ut, vel quaerat, cupiditate laudantium expedita quisquam aperiam voluptatem quae illo cumque odit molestiae iure beatae odio? Omnis velit minima aspernatur qui voluptatum sapiente laudantium explicabo reiciendis architecto quaerat adipisci aliquam magni, reprehenderit iure fugit ex voluptas provident accusamus optio nostrum nemo sed soluta. Numquam quia, veniam molestias? Accusantium.</p>
</div>
<div class="teaser lazyload" data-expand="-220">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum eum velit cumque, sint perspiciatis, ea nam illo repellat labore voluptates, vero inventore dolor fuga ipsum vel quas? Debitis, laborum eveniet?</p>
<h1>Teaser Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel excepturi saepe obcaecati repellat natus at enim fugit sapiente qui et corporis laudantium totam adipisci nihil, cumque rem reprehenderit aspernatur nostrum sunt voluptates tempora pariatur ea! Commodi quo minima similique quaerat velit vitae esse beatae quos illo dolores? Saepe quam, sed praesentium ut, vel quaerat, cupiditate laudantium expedita quisquam aperiam voluptatem quae illo cumque odit molestiae iure beatae odio? Omnis velit minima aspernatur qui voluptatum sapiente laudantium explicabo reiciendis architecto quaerat adipisci aliquam magni, reprehenderit iure fugit ex voluptas provident accusamus optio nostrum nemo sed soluta. Numquam quia, veniam molestias? Accusantium.</p>
</div>
<div class="teaser lazyload" data-expand="-220">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum eum velit cumque, sint perspiciatis, ea nam illo repellat labore voluptates, vero inventore dolor fuga ipsum vel quas? Debitis, laborum eveniet?</p>
<h1>Teaser Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel excepturi saepe obcaecati repellat natus at enim fugit sapiente qui et corporis laudantium totam adipisci nihil, cumque rem reprehenderit aspernatur nostrum sunt voluptates tempora pariatur ea! Commodi quo minima similique quaerat velit vitae esse beatae quos illo dolores? Saepe quam, sed praesentium ut, vel quaerat, cupiditate laudantium expedita quisquam aperiam voluptatem quae illo cumque odit molestiae iure beatae odio? Omnis velit minima aspernatur qui voluptatum sapiente laudantium explicabo reiciendis architecto quaerat adipisci aliquam magni, reprehenderit iure fugit ex voluptas provident accusamus optio nostrum nemo sed soluta. Numquam quia, veniam molestias? Accusantium.</p>
</div>

Lazysizes doesnt have any explicit event handler to know when the lazyload is done. you don't need it too.
In general all you need is lazybeforeunveil to modify the transformation or load to be informed when the image is loaded.
In some specific circumstances you could use setImmediate/setTimeout inside a lazybeforeunveil.
$(document).on('lazybeforeunveil', function(){
//do your stuff.. (setTimeout if required)
});
It is quite consistent. hope it helps

I think you can use jQuery "scroll()" to check if the page is scrolled fully down since as far as I know lazyloading works when we scroll the page so you need to capture that you are at the bottom of the page to show an alert.
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
alert("Bottom Of the Page");
}
});

Develop Reference

JavaScript is the programming language of the Web.