Attempting to make image elements fade up when user scrolls down through page. Currently, images are not showing up at all. There is an issue with the JS, but not sure how else to trouble shoot. HTML, CSS, and JS below. A fresh set of eyes would probably be most helpful. Thank you!
const faders = document.querySelectorAll('.fade-in');
const appearOptions = {
threshold: 1,
rootMargin: "0px 0px -100px 0px",
};
const appearOnScroll = new IntersectionObserver(function(entries,
appearOnScroll) {
entries.forEach(entry => {
if (!entry.isIntersecting) {
return;
} else {
entry.target.classList.add('appear');
appearOnScroll.unobserve(entry.target);
}
})
},
appearOptions);
faders.forEach(fader => {
appearOnScroll.observe(fader);
})
And my HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="js/observer.js"></script>
<title>Document</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<main>
<h3>Design Studio Project</h3>
<div class="videowrapper">
<video controls="controls" width="1920" height="1080"
name="studioProject" type="mov" src="images/web_StudioProject_rd03.mp4"></video>
</div>
<div class="remainingslides">
<img class="fade-in" src="images/remaining_keyframes-01.png">
<img class="fade-in" src="images/remaining_keyframes-02.png">
<img class="fade-in" src="images/remaining_keyframes-03.png">
<img class="fade-in" src="images/remaining_keyframes-04.png">
<img class="fade-in" src="images/remaining_keyframes-05.png">
<img class="fade-in" src="images/remaining_keyframes-06.png">
<img class="fade-in" src="images/remaining_keyframes-07.png">
<img class="fade-in" src="images/remaining_keyframes-08.png">
<img class="fade-in" src="images/remaining_keyframes-09.png">
</div>
</main>
<script src="js/observer.js"></script>
</body>
</html>
and CSS
.fade-in {
opacity: 0;
transition: opacity 250ms ease-in;
}
.fade-in.appear {
opacity: 1;
}
There are a few issues with your code:
In your HTML you are referring to your js file twice.
https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
I also cleaned up how you were calling IntersectionObserver and passing the callback/options.
The error that pops up is apparently a known "non" issue:
ResizeObserver - loop limit exceeded
const faders = document.querySelectorAll('.fade-in');
var appearOptions = {
threshold: 1,
rootMargin: "0px 0px -100px 0px",
};
const appearOnScroll = new IntersectionObserver((entries,
appearOptions) => {
entries.forEach(entry => {
if (!entry.isIntersecting) {
return;
} else {
entry.target.classList.add('appear');
appearOnScroll.unobserve(entry.target);
}
})
});
faders.forEach(fader => {
appearOnScroll.observe(fader);
})
.fade-in {
opacity: 0;
transition: opacity 250ms ease-in;
}
.fade-in.appear {
opacity: 1;
}
<main>
<h3>Design Studio Project</h3>
<h2>The Most Important Revolutions</h2>
<p>Lauren Miggins</p>
<p>Summer 2020</p>
<div class="videowrapper">
<video controls="controls" width="1920" height="1080"
name="studioProject" type="mov" src="images/web_StudioProject_rd03.mp4"></video>
</div>
<div class="remainingslides">
<img class="fade-in" src="https://via.placeholder.com/800">
<img class="fade-in" src="https://via.placeholder.com/800">
<img class="fade-in" src="https://via.placeholder.com/800">
<img class="fade-in" src="https://via.placeholder.com/800">
<img class="fade-in" src="https://via.placeholder.com/800">
<img class="fade-in" src="https://via.placeholder.com/800">
<img class="fade-in" src="https://via.placeholder.com/800">
<img class="fade-in" src="https://via.placeholder.com/800">
<img class="fade-in" src="https://via.placeholder.com/800">
</div>
</main>
You've added observer.js 2 times on your page. But your other stuff is working for me.
I do not have your images and video, so I removed video for this example and make images to be just a red squares.
Strange, but it is working in Snippet editor, but not in view mode!
Anyway, here is the same in jsfiddle: click.
const faders = document.querySelectorAll('.fade-in');
const appearOptions = {
threshold: 1,
rootMargin: "0px 0px -100px 0px",
};
const appearOnScroll = new IntersectionObserver(function(entries,
appearOnScroll) {
entries.forEach(entry => {
if (!entry.isIntersecting) {
return;
} else {
entry.target.classList.add('appear');
appearOnScroll.unobserve(entry.target);
}
})
},
appearOptions);
faders.forEach(fader => {
appearOnScroll.observe(fader);
})
.fade-in {
opacity: 0;
transition: opacity 250ms ease-in;
}
.fade-in.appear {
opacity: 1;
}
/* Helpers: */
main {
width: 800px;
}
img {
display: inline-block;
border: 1px solid red;
background: red;
min-width: 200px;
min-height: 200px;
}
<main>
<h3>Design Studio Project</h3>
<h2>The Most Important Revolutions</h2>
<p>Lauren Miggins</p>
<p>Summer 2020</p>
<div class="videowrapper">
<!--video controls="controls" width="1920" height="1080"
name="studioProject" type="mov" src="images/web_StudioProject_rd03.mp4"></video-->
</div>
<div class="remainingslides">
<img class="fade-in" src="images/remaining_keyframes-01.png">
<img class="fade-in" src="images/remaining_keyframes-02.png">
<img class="fade-in" src="images/remaining_keyframes-03.png">
<img class="fade-in" src="images/remaining_keyframes-04.png">
<img class="fade-in" src="images/remaining_keyframes-05.png">
<img class="fade-in" src="images/remaining_keyframes-06.png">
<img class="fade-in" src="images/remaining_keyframes-07.png">
<img class="fade-in" src="images/remaining_keyframes-08.png">
<img class="fade-in" src="images/remaining_keyframes-09.png">
</div>
</main>
Related
I use lazy loading to load the images with the centered background loading icons, but I felt unnecessary to include the lazy loading effect in this question. I want to remove the loading icon after the image is loaded because the smaller images may not cover the loading icon.
I use the same external CSS file for loading icons. None of the closest solutions worked for me.
Any suggestions and help would be appreciated.
HTML
<div class="wrapper">
<img class="lazy" src="https://i.stack.imgur.com/kn7VW.jpg" alt="Large Image" width="800" height="380" />
</div>
<div class="wrapper">
<img class="lazy" src="https://i.stack.imgur.com/BsJCI.jpg" alt="Small Image" width="250" height="180" />
</div>
CSS
.wrapper {
background: url(https://i.stack.imgur.com/yW2VY.gif) no-repeat center;
min-height: 220px;
}
You can implement onload event of image, inside it remove class wrapper as
$(".lazy").on('load', function() { $('.wrapper').removeClass('wrapper'); })
Update: if you want to remove only loading for each image change to remove parent class only.
$(this).parent().removeClass('wrapper');
$(".lazy").on('load', function() { $(this).parent().removeClass('wrapper'); })
.wrapper {
background: url(https://i.stack.imgur.com/yW2VY.gif) no-repeat center;
min-height: 220px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<img class="lazy" src="https://i.stack.imgur.com/kn7VW.jpg" alt="Large Image" width="800" height="380" />
</div>
<div class="wrapper">
<img class="lazy" src="https://i.stack.imgur.com/BsJCI.jpg" alt="Small Image" width="250" height="180" />
</div>
I need 2 automatic slideshow on one page, but there is a problem.
I use W3 slideshow, but if i make automatic they just after one rotation or just stop show up.
Here is code.
I try to change, but i not sure what i do wrong. If you can help me.
var myIndex = 0;
carousel();
var slideId = ["mySlides1", "mySlides2"]
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides", "mySlides2");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 2000); // Change image every 2 seconds
}
.mySlides {display:none;}
.mySlides2 {display:none;}
<!DOCTYPE html>
<html>
<head>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta content="text/html; charset=iso-8859-2" http-equiv="Content-Type">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<h2 class="w3-center">Automatic Slideshow</h2>
<div class="w3-content w3-section" style="max-width:500px">
<img class="mySlides" src="img_la.jpg" style="width:100%">
<img class="mySlides" src="img_ny.jpg" style="width:100%">
<img class="mySlides" src="img_chicago.jpg" style="width:100%">
</div>
<h2 class="w3-center">Automatic Slideshow</h2>
<div class="w3-content w3-section" style="max-width:500px">
<img class="mySlides2" src="img_la.jpg" style="width:100%">
<img class="mySlides2" src="img_ny.jpg" style="width:100%">
<img class="mySlides2" src="img_chicago.jpg" style="width:100%">
</div>
</body>
</html>
I made some edits and now your code is working !
You don't want to use only one index, you want to use one index for each slideshow.
For each call to carousel() you will need to stop displaying the current img (n°[x|y]Index), and display the next img (n°[x|y]Index).
With this function, you can add different numbers of images in each slideshow (in my example, mySlides displays 3 images and mySlides2 has 4).
let xIndex = 0;
let yIndex = 0;
carousel();
function carousel() {
let x = document.getElementsByClassName("mySlides");
let y = document.getElementsByClassName("mySlides2");
x[xIndex].style.display = "none";
y[yIndex].style.display = "none";
xIndex = (xIndex+1)%x.length;
yIndex = (yIndex+1)%y.length;
if (xIndex > x.length)
xIndex = 1;
if (yIndex > y.length)
yIndex = 1;
x[xIndex].style.display = "block";
y[yIndex].style.display = "block";
setTimeout(carousel, 2000); // Change image every 2 seconds
}
<h2>Automatic Slideshow</h2>
<div style="width:150px; height:150px; overflow: hidden;">
<img class="mySlides" src="http://lorempixel.com/400/400/" style="width:100%; display: none;">
<img class="mySlides" src="http://lorempixel.com/400/200/" style="width:100%; display: none;">
<img class="mySlides" src="http://lorempixel.com/200/400/" style="width:100%; display: none;">
</div>
<h2>Automatic Slideshow</h2>
<div style="width:150px; height:150px; overflow: hidden;">
<img class="mySlides2" src="http://lorempixel.com/400/300/" style="width:100%; display: none;">
<img class="mySlides2" src="http://lorempixel.com/300/400/" style="width:100%; display: none;">
<img class="mySlides2" src="http://lorempixel.com/300/300/" style="width:100%; display: none;">
<img class="mySlides2" src="http://lorempixel.com/800/300/" style="width:100%; display: none;">
</div>
As you can see in the code below I would like to drag an image to the id "centerimg". I've hidden several images cause that's the images who would adopt to the center image. The problem is it doesn't adopt to the size of the center image. It takes the size of the image being dragged. I've tried manipulating its CSS through DOM elements and the only image that changed it's size is the initial image that was dragged.
function doFirst() {
mypic = document.getElementById('img1');
mypic.addEventListener("dragstart", startDrag, false);
mypictwo = document.getElementById('img2');
mypictwo.addEventListener("dragstart", startDrag2, false);
mypicthree = document.getElementById('img3');
mypicthree.addEventListener("dragstart", startDrag3, false);
mypicfour = document.getElementById('img4');
mypicfour.addEventListener("dragstart", startDrag4, false);
centerbox = document.getElementById("mainbox");
centerbox.addEventListener("dragenter", function(e) {
e.preventDefault();
}, false);
centerbox.addEventListener("dragover", function(e) {
e.preventDefault();
}, false);
centerbox.addEventListener("drop", dropped, false);
}
//--------------startDrag FUNCTIONS -----------------------//
function startDrag(e) {
var code = '<img id="img1" src="images/ph1.jpg">';
e.dataTransfer.setData('Text', code);
}
function startDrag2(e) {
var code = '<img id="img2" src="images/ph2.jpg">';
e.dataTransfer.setData('Text', code);
}
function startDrag3(e) {
var code = '<img id="img2" src="images/ph3.jpg">';
e.dataTransfer.setData('Text', code);
}
function startDrag4(e) {
var code = '<img id="img2" src="images/ph4.jpg">';
e.dataTransfer.setData('Text', code);
}
//--------------startDrag FUNCTIONS -----------------------//
function dropped(e) {
e.preventDefault();
centerbox.innerHTML = e.dataTransfer.getData('Text');
}
function drop(event) {
}
window.addEventListener("load", doFirst, false);
#centerimg {
width: 500px;
height: 500px;
}
#img2, #img1, #img3, #img4 {
width: 150px;
height: 150px;
}
#img5 {
visibility: hidden;
}
.changeimagesize {
height: 500px;
width: 500px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script src="drag.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3" id="1box">
<img id="img1" src="images/image1.jpg">
</div>
<div class="col-md-3" id="2box">
<img id="img2" src="images/image2.jpg">
</div>
<div class="col-md-3" id="3box">
<img id="img3" src="images/image4.jpg">
</div>
<div class="col-md-3" id="4box">
<img id="img4" src="images/image5.jpg">
</div>
</div>
</div>
<div class="row">
<center>
<div class="col-md-push-4 col-md-4 mainbox" ondrop="drop(event)" id="mainbox">
<img id="centerimg" src="images/center.png">
</div>
</center>
</div>
<!-- hidden images here-->
<img id="img5" class="img5" src="images/ph1.jpg">
<img id="img5" class="img5" src="images/ph2.jpg">
<img id="img5" class="img5" src="images/ph3.jpg">
<img id="img5" class="img5" src="images/ph4.jpg">
<img id="img5" class="img5" src="images/ph5.jpg">
<!--end of hidden images-->
</body>
</html>
Possible solution: in the dropped function force the new img tag to get the 500px width and height. In this solution I put width and height hardcoded, but I think there is also the possibility to overcome this.
function doFirst() {
mypic = document.getElementById('img1');
mypic.addEventListener("dragstart", startDrag, false);
mypictwo = document.getElementById('img2');
mypictwo.addEventListener("dragstart", startDrag2, false);
mypicthree = document.getElementById('img3');
mypicthree.addEventListener("dragstart", startDrag3, false);
mypicfour = document.getElementById('img4');
mypicfour.addEventListener("dragstart", startDrag4, false);
centerbox = document.getElementById("mainbox");
centerbox.addEventListener("dragenter", function(e) {
e.preventDefault();
}, false);
centerbox.addEventListener("dragover", function(e) {
e.preventDefault();
}, false);
centerbox.addEventListener("drop", dropped, false);
}
//--------------startDrag FUNCTIONS -----------------------//
function startDrag(e) {
var code = '<img id="img1" src="images/ph1.jpg">';
e.dataTransfer.setData('Text', code);
}
function startDrag2(e) {
var code = '<img id="img2" src="images/ph2.jpg">';
e.dataTransfer.setData('Text', code);
}
function startDrag3(e) {
var code = '<img id="img2" src="images/ph3.jpg">';
e.dataTransfer.setData('Text', code);
}
function startDrag4(e) {
var code = '<img id="img2" src="images/ph4.jpg">';
e.dataTransfer.setData('Text', code);
}
//--------------startDrag FUNCTIONS -----------------------//
function dropped(e) {
e.preventDefault();
centerbox.innerHTML = e.dataTransfer.getData('Text'); console.log(centerbox);
centerbox.getElementsByTagName("img")[0].style.width = "500px";
centerbox.getElementsByTagName("img")[0].style.height = "500px";
}
function drop(event) {
}
window.addEventListener("load", doFirst, false);
#centerimg {
width: 500px;
height: 500px;
}
#img2,
#img1,
#img3,
#img4 {
width: 150px;
height: 150px;
}
#img5 {
visibility: hidden;
}
.changeimagesize {
height: 500px;
width: 500px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script src="drag.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3" id="1box">
<img id="img1" src="images/image1.jpg">
</div>
<div class="col-md-3" id="2box">
<img id="img2" src="images/image2.jpg">
</div>
<div class="col-md-3" id="3box">
<img id="img3" src="images/image4.jpg">
</div>
<div class="col-md-3" id="4box">
<img id="img4" src="images/image5.jpg">
</div>
</div>
</div>
<div class="row">
<center>
<div class="col-md-push-4 col-md-4 mainbox" ondrop="drop(event)" id="mainbox">
<img id="centerimg" src="images/center.png">
</div>
</center>
</div>
<!-- hidden images here-->
<img id="img5" class="img5" src="images/ph1.jpg">
<img id="img5" class="img5" src="images/ph2.jpg">
<img id="img5" class="img5" src="images/ph3.jpg">
<img id="img5" class="img5" src="images/ph4.jpg">
<img id="img5" class="img5" src="images/ph5.jpg">
<!--end of hidden images-->
</body>
</html>
I'd like to have a slideshow of my work but I'm new to html/css/jquery. I'm working with a jquery plugin that looks like this:
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jquery.cycle.all.js"></script>
<script type="text/javascript">
$('#slider').cycle({
fx: 'scrollHorz',
speed: 'fast',
timeout: 0,
next: '#next',
prev: '#prev'
});
</script>
HTML looks like this:
<div align="center" id="slideshow">
<div class="controller" id="prev"></div>
<div id="slider">
<img src="Images/Logo_01.jpg" width="960" height="576" alt="logo"/>
<img src="Images/Logo_02.jpg" width="384" height="640" alt="logo"/>
<img src="Images/Logo_03.jpg" width="640" height="640" alt="logo"/>
<img src="Images/Logo_04.jpg" width="960" height="510" alt="logo"/>
<img src="Images/Logo_05.jpg" width="956" height="640" alt="logo"/>
</div>
<div class="controller" id="next"></div>
</div>
I've been modifying the slider id & I've tried everything I know-margin:0 auto;, text-align: center, display: block; but nothing's working. help?
Try this:
Using jQuery
$('#slider img').css({position: 'relative', margin: 'auto'});
Using CSS, you have to use !important as cycle jQuery plugin is adding inline CSS to images
#slider img {
position: relative !important;
margin: auto !important;
}
I am building a horizontal and vertical scroller for a website I am currently developing. The vertical one is working great, with no problems, and I have also managed to incorporate jQuery to control it's animation.
The problem lies in the horizontal scroller. To control it I need one important data: the total length of the div#news1 content (to use in the comp variable in function mexer). However the browser only returns me the clientHeight, which is the same as it's container (div#cont1). I need this to be generated automatically and properly by the browser because my website will have dynamic data inserted into it (PHP).
Why does this happen? What I am doing wrong? How can I fix it?
Here is the code for the test file:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="JS/jquery-1.7.2.min.js"></script>
<style type="text/css">
.container {
width:250px;
height:250px;
overflow:hidden;
float:left;
border:3px solid #666;
}
.container1 {
width:400px;
height:125px;
overflow:hidden;
border:3px solid #666;
}
.botao {
border:3px solid #666;
background-color:#CCC;
padding:3px 3px 3px 3px;
color:#FFFFFF;
font-family:Arial, Helvetica, sans-serif;
cursor:pointer;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
</head>
<body>
<div class="container" id="cont">
<div id="news" style="position:relative">
<p><img src="a6.jpg" height="125" width="250" /></p>
<p><img src="a6.jpg" height="125" width="250" /></p>
<p><img src="a6.jpg" height="125" width="250" /></p>
<p><img src="a6.jpg" height="125" width="250" /></p>
<p><img src="a6.jpg" height="125" width="250" /></p>
<p><img src="a6.jpg" height="125" width="250" /></p>
</div>
</div>
<p><span id="botao1" onClick="mexe(1)" class="botao">Para cima</span></p>
<p><span id="botao2" onClick="mexe(2)" class="botao">Para baixo</span></p>
<div class="container1" id="cont1" style="float:left">
<div id="news1" style="position:relative">
<div style="float:left"><img src="fotosdojoao/1.png" height="125" width="250"></div>
<div style="float:left"><img src="fotosdojoao/2.png" height="125" width="250"></div>
<div style="float:left"><img src="fotosdojoao/3.png" height="125" width="250"></div>
<div style="float:left"><img src="fotosdojoao/4.png" height="125" width="250"></div>
</div>
</div>
<p><span id="botao3" onClick="mexer(1)" class="botao">Esquerda</span></p>
<p><span id="botao4" onClick="mexer(2)" class="botao">Direita</span></p>
<script type="text/javascript">
var topo;
var baixo;
var avanco;
var altura;
function mexe(direcao)
{
topo=Number(document.getElementById("news").style.top.substr(0,document.getElementById("news").style.top.length-2));
baixo=Number(document.getElementById("news").style.top.substr(0,document.getElementById("news").style.bottom.length-2));
avanco=Number(document.getElementById("cont").clientHeight);
altura=Number(document.getElementById("news").clientHeight)-avanco+30;
if (direcao==1 && topo<0)
{
if((topo+avanco)>=0)
{
topo=0;
}
else
{
topo=topo+avanco;
}
//document.getElementById("news").style.top=topo+"px";
}
if(direcao==2)
{
if((topo-avanco)*(-1)>=altura)
{
topo=altura*-1;
}
else
{
topo=topo-avanco;
}
//document.getElementById("news").style.top=topo+"px";
}
}
$(document).ready(function()
{
$("#botao1").click(function(){
$("#news").animate({top:topo+"px"},"normal","swing");
});
$("#botao2").click(function(){
$("#news").animate({top:topo+"px"},"normal","swing");
});
});
function mexer(direcao)
{
esq=Number(document.getElementById("news1").style.left.substr(0,document.getElementById("news1").style.left.length-2));
passagem=Number(document.getElementById("cont1").clientWidth);
comp=Number(document.getElementById("news1").style.width.substr(0,document.getElementById("news1").style.width.length-2));
maximo=comp-passagem+20;
if (direcao==1 && esq<0)
{
if((esq+passagem)>=0)
{
esq=0;
}
else
{
esq=esq+passagem;
}
document.getElementById("news1").style.left=esq+"px";
}
if(direcao==2)
{
if((esq-passagem)*(-1)>=maximo)
{
esq=maximo*-1;
}
else
{
esq=esq-passagem;
}
document.getElementById("news1").style.left=esq+"px";
}
}
</script>
</body>
</html>
Not sure it's what you wanted, but to set/get the width you can do it like this:
//get width of an item
var itemWidth = $('#news1 > div:first').width();
//count number of items
var itemsCount = $('#news1 > div').length;
//width * count = width
var containerWidth = itemWidth * itemsCount;
alert(containerWidth);
You can set it directly doing
$('#news1').width(containerWidth);
Or use it when you make the scrolling.
Since it's not in english i have a hard time understanding how it works :/