Infinite Carousel in vanilla Javascrict transition effect wont work - javascript

I tried to make an infinite image carousel in vanilla Javascript without buttons . The carousel is looping over images but i have trouble with transition effect . It sloud make a smooth ease-in-out transition to the next picture. I tried to debug this code for few hours but I have no idea how to solve this problem.
const slider = document.querySelector('.slider_slider');
const img = document.querySelectorAll('.photo');
var num = 1;
var size = slider.clientWidth;
var int= setInterval(
function intervals(){
update();
transition();
append();
},5000);
function update(){
slider.style.transform= "translateX("+(-size*num)+"px )";
}
function transition() {
slider.style.transition = "transform 0.9s ease-in-out";
if(num ===6 ){num = img.length - this.num;
slider.style.transition = "none";
slider.style.transform= "translateX("+(-size*num)+"px )";}
}
function append(){
const child = document.querySelector('.photo');
const cln = child.cloneNode(true);
slider.appendChild(cln);
const remove = document.querySelector('.photo');
remove.parentNode.removeChild(remove)}
html{
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.header_box{
display:flex;
margin:0 auto;
top:0;
background-color: aqua;
width: 100%;
height: 10vh;
}
.logo_box {
position: absolute;
height: 50px;
width: 50px;
background-color: lightcoral;
margin: 10px 0 0 40px;
}
#img_logo{
position: absolute;
height: 50px;
width: 50px;
z-index: 20;
}
.nav_box{
position: absolute;
right: 10px;
top:5px;
background-color: mediumblue;
padding:7px;
}
.nav_box> *{
display:flex;
flex-direction: row;
background-color: lime;
list-style: none;
padding: 10px 0 10px 0;
}
.nav_elements>li a {
padding: 10px 10px 10px 10px;
text-decoration: none;
font-family: 'Josefin Sans', sans-serif;
font-size: 18px;
color:rgb(53, 53, 53);
}
/* Slider 1 */
.slider_container{
position: absolute;
width: 100%;
height: 90vh;
background: black;
border: 3px solid purple;
z-index: 10;
top: 0;
left:0;
overflow: hidden;
}
.slider_slider{
display: flex;
width: 100%;
height: 100%;
}
.slider_slider> img{
width: 100%;
height: 100%;
object-fit: cover;
}
<!DOCTYPE html>
<html lang="PL">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel='stylesheet' type='text/css' href='style.css'>
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap" rel="stylesheet">
</head>
<body>
<section>
<div class="slider_container">
<div class="slider_slider">
<img src="https://image.freepik.com/free-photo/dog-standing-hind-legs-with-copy-space_23-2148366813.jpg" alt="" class="photo">
<img src="https://image.freepik.com/free-photo/beagle-dog-sitting-with-white-background_53876-30186.jpg" alt="" class="photo">
<img src="https://image.freepik.com/free-photo/cute-spitz-dog_144627-12267.jpg" alt="" class="photo">
<img src="https://image.freepik.com/free-photo/adorable-jack-russell-retriever-puppy-portrait_53876-64825.jpg" alt="" class="photo">
<img src="https://image.freepik.com/free-photo/beagles-puppies-looking-something_1150-18193.jpg" alt="" class="photo">
<img src="https://image.freepik.com/free-photo/lovely-pets-composition-with-bulldog_23-2147997312.jpg" alt="" class="photo">
</div>
</div>
</section>
<section></section>
</body>
<script src='script.js'></script>
</html>

Related

JQuery/CSS Animation of Sprite image

I have a sprite image containing 4 different pictures. They are 520px in height. I would like animate them sliding from the first picture to the last picture. I am able to get them to flip through images, however I cannot get them to slide smoothly. Also, when the last image is reached, I need to slide back to the first image. I am unsure how to do this, this is my current code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>FVRC Pics</title>
<meta charset="UTF-8">
<link type="text/css" href="styles/normalize.css" rel="stylesheet" />
<link type="text/css" href="styles/my_style.css" rel="stylesheet">
</head>
<body>
<h1> Fox Valley Runner Club</h1>
<div class="container">
<div id="slider">
<div id="leftArrow"</div>
<div id="rightArrow"></div>
</div>
</div>
<div id="startApp">
<ul>
<li>Start here!</li>
</ul>
</div>
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>-->
<script type="text/javascript" src="scripts/jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function() {
$("#leftArrow").click(function() {
$("#slider").css("backgroundPostionX","+=792px");
});
$("#rightArrow").click(function() {
$("#slider").css("backgroundPostionX","-=792px");
});
});
</script>
</body>
</html>
CSS:
h1 {
color: #0000ff; /*blue*/
font-size: 44px;
padding-left: 10%;
}
.container {
max-height: 520px;
background-color: #808080; /*grey*/
}
#leftArrow, #rightArrow {
display: inline-block;
width: 38px;
height: 50px;
}
#leftArrow {
position: relative;
/*top: 0;*/`enter code here`
top: 235px;
left: 2%;
width: 5%;
height: 50px;
background: url('../images/left_arrow.png') 0 0 no-repeat;
z-index: 10;
}
#rightArrow {
position: relative;
/*top: 0;*/
top: 235px;
left: 87.5%;
width: 5%;
height: 50px;
background: url('../images/right_arrow.png') bottom right no-repeat;
z-index: 10;
}
#slider {
position: relative;
height: 520px;
max-width: 792px;
margin: 0 auto;
/*background: url("../images/Animate-Sprite_520a.png") -0 0 no-repeat;*/
background-image: url('../images/Animate-Sprite_520a.png');
background-repeat: no-repeat;
}
#startApp {
width: 235px;
margin: 0 auto;
}
#startApp ul {
list-style-type: none;
}
#startApp ul li a {
display: inline-block;
text-decoration: none;
width: 150px;
text-align: center;
background-color: steelblue;
border: 2px solid #808080;
color: white;
font-size: 32px;

CSS - JavaScript Not Being Implemented

I fetched an html file using fetch api and took the div components and embedded them into another html file. The css is not being applied after the process is complete. Nor is the javascript file being called. I checked the file paths and they are correct. Does the css and javascript tags not transfer over when they are fetched using the fetch api?
***Main script.js***
let testSide = document.querySelector('#test-sidebar')
let htmlUrl = './TextBox/index.html'
fetch(htmlUrl)
.then((result)=>{
return result.text()
}).then((html)=>{
var parser = new DOMParser();
var doc = parser.parseFromString(html, 'text/html')
var doDo = doc.querySelector('.parent-container')
testSide.appendChild(doDo)
}).catch((error)=>{
console.log(error)
})
***Main HTML File***
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>To Do</title>
<!-- Boxicons CDN Link -->
<link href='https://unpkg.com/boxicons#2.0.7/css/boxicons.min.css' rel='stylesheet'>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href='style.css'>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="test-sidebar">
</div>
<script src="script.js"></script>
</body>
</html>
***Second Html File***
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Notbox</title>
<link rel="stylesheet" href="style.css">
<!-- Boxicons CDN Link -->
<link href='https://unpkg.com/boxicons#2.0.7/css/boxicons.min.css' rel='stylesheet'>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="parent-container">
<!---Select items------>
<div class="container">
<div class="header">
</div>
<div class="content">
<div class="items-content">
<ul class="list" id="list">
</ul>
</div>
<button type="button" class="create-text-box">Create Text Box</button>
</div>
</div>
<!--Display notebox-->
<div class="notebox-container">
<div class="header">
</div>
<div class="content">
<div class="items-content">
<textarea class="list" id="noteList" ></textarea>
</div>
<button type="button" class="copy-text">Copy Text</button>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
***CSS of second html file***
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
position: relative;
width: 100%;
height: 100vh;
font-family: 'Titillium Web', sans-serif;
}
/*------------------------container-----------------------*/
.parent-container{
position: relative;
width: 100%;
height: 540px;
max-height: 5400px;
}
/*------------------------container-----------------------*/
.container{
position: absolute;
top: 0;
left: 10px;
width: 400px;
margin: 0 auto;
box-shadow: 5px 5px 8px rgb(171, 178, 185);
border-radius: 15px 15px 0 0;
}
/*--------------------------header-----------------------*/
.header{
position: relative;
width: 100%;
height: 150px;
background-color: #2E86C1;
border-radius: 15px 15px 0 0;
}
/*---------------------------content------------------------*/
.content{
position: relative;
width: 100%;
height: 390px;
max-height: 390px;
background-color: #EAEDED;
overflow: hidden;
}
.content::-webkit-scrollbar{
display: none;
}
.content ul{
padding: 0;
margin: 0;
}
.items-content{
position: relative;
width: 100%;
height: calc(100% - 35px);
max-height: calc(100% - 35px);
overflow: auto;
border-bottom: 1px solid #D6DBDF;
}
.item{
position: relative;
border-bottom: 1px solid #EBEDEF;
list-style: none;
padding: 0;
margin: 0;
width: 100%;
height: 45px;
min-height: 45px;
background-color: white;
display: flex;
align-items: center;
cursor: pointer
}
.item:hover{
background-color: #EAECEE
}
.item p{
position: absolute;
padding-left: 35px;
height: 45px;
line-height: 45px;
width: 100%;
white-space: nowrap;
}
/*--------------------------Create Text Box--------------------------*/
.create-text-box{
position: absolute;
border: none;
outline: none;
width: 100%;
height: 35px;
bottom: 0;
left: 0;
background-color: #21618C;
color: white;
cursor: pointer
}
/*For note box*/
/*------------------------notbox container-----------------------*/
.notebox-container{
position: absolute;
top: 0;
right: 10px;
width: 400px;
margin: 0 auto;
box-shadow: 5px 5px 8px rgb(171, 178, 185);
border-radius: 15px 15px 0 0;
}
/*--------------------------header-----------------------*/
.notebox-container .header{
position: relative;
width: 100%;
height: 150px;
background-color: #2E86C1;
border-radius: 15px 15px 0 0;
}
/*---------------------------content------------------------*/
.notebox-container .content{
position: relative;
width: 100%;
height: 390px;
max-height: 390px;
background-color: #EAEDED;
overflow: hidden;
}
#noteList
{
resize: none;
font-size: 15px;
font: serif;
color: #28B463;
text-align: center;
/*font-weight: bold;*/
border: none;
height: calc(100% - 35px);
width: 100%;
}
.notebox-container .content::-webkit-scrollbar{
display: none;
}
.notebox-container .content ul{
padding: 0;
margin: 0;
}
.notebox-container .items-content{
position: relative;
width: 100%;
height: calc(100% - 35px);
max-height: calc(100% - 35px);
overflow: auto;
border-bottom: 1px solid white;
}
.notebox-container .item{
position: relative;
border-bottom: 1px solid white;
list-style: none;
padding: 0;
margin: 0;
width: 100%;
height: 45px;
min-height: 45px;
background-color: white;
display: flex;
align-items: center;
}
.notebox-container .item p{
position: absolute;
padding-left: 35px;
height: 45px;
line-height: 45px;
width: 100%;
white-space: nowrap;
text-align: center;
}
/*--------------------------Create Text Box--------------------------*/
.notebox-container .copy-text{
position: absolute;
border: none;
outline: none;
width: 100%;
height: 35px;
bottom: 0;
left: 0;
background-color: #21618C;
color: white;
cursor: pointer
}
.notebox-container #remove{
color: #28B463;
}
The issue I believe is due to the use of href
href linking is the method for including an external style sheet on your web pages. It is intended to link your page with your style sheet. Whereas importing allows you to import one style sheet into another.
Use:
<style>
#import url(YOUR/FILE/PATH)
</style>
Its good practice to place css files in a subfolder located within the main folder your html is stored. This subfolder is labelled static
e.g. main folder
main folder
index.html
static
style.css
<style>
#import url("static/style.css")
</style>
Try replacing your fetch code with this:
fetch(htmlUrl)
.then((result)=>{
return result.text()
})
.then((html)=>{
var doc = document.createRange().createContextualFragment(template);
testSide.appendChild(doc);
}).catch((error)=>{
console.log(error)
})
createContextualFragment renders the Second Html File and load all its scripts
Load .css from Main Html file will work fine.
var doDo = doc.querySelector('.parent-container') here you load only parent-container div element. No css found on here. so if you want to load css from Second Html file then you should write/load css and javascript inner side of parent-container div. ex:
<div class="parent-container">
<link rel="stylesheet" href='style.css'> <!---change here[2]------>
--------
-------
If you try this on local machine you may face this error
Fetch API cannot load file:///C:/....*.html. URL scheme "file" is not supported.
Try in on Localhost or on an online server. you may not found this problem.
Main HTML File
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<div id="test-sidebar">
</div>
<script>
let testSide = document.querySelector('#test-sidebar');
let htmlUrl = 'index.html';
fetch(htmlUrl)
.then((result) => {
return result.text()
}).then((html) => {
var parser = new DOMParser();
var doc = parser.parseFromString(html, 'text/html')
var doDo = doc.querySelector('.parent-container')
console.log('doc', doDo)
testSide.appendChild(doDo)
}).catch((error) => {
console.log(error)
})
</script>
<link rel="stylesheet" href='style.css'> <!---change here[1]------>
</body>
</html>
Second Html File
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Notbox</title>
<link rel="stylesheet" href="style.css"> <!-- change here[2] -->
<!-- Boxicons CDN Link -->
<link href='https://unpkg.com/boxicons#2.0.7/css/boxicons.min.css' rel='stylesheet'>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="parent-container">
<link rel="stylesheet" href="style.css"> <!---change here[2]------>
<!---Select items------>
<div class="container">
<div class="header">
</div>
<div class="content">
<div class="items-content">
<ul class="list" id="list">
</ul>
</div>
<button type="button" class="create-text-box">Create Text Box</button>
</div>
</div>
<!--Display notebox-->
<div class="notebox-container">
<div class="header">
</div>
<div class="content">
<div class="items-content">
<textarea class="list" id="noteList" ></textarea>
</div>
<button type="button" class="copy-text">Copy Text</button>
</div>
</div>
</div>
</body>
</html>
Output:

Background colour or image change with JS script

All,
I want to have a JS script in which when you scroll down the header ("Banner") of the website gets another colour. (Change from transaparant to a colour). (In the future i want it to change from an image to another image.. ).
i added a JS script from this website but it does not work yet. I think i need to know which div i need to use for the scrollbar.
Can anybode help with this?
var scroll_pos = 0;
$(document).scroll(function() {
scroll_pos = $(this).scrollTop();
if(scroll_pos > 20) {
(".banner" , 'background-color', 'blue');
} else {
(".banner" , 'background-color', 'red');
}
});
});
#import url("webfonts/Garisman_Studio_FreudianTwo/stylesheet.css");
* {
margin: 0;
padding: 0;
width: 100%;
height: auto;
}
.banner {
display: table;
clear: both;
position: fixed;
font-size: 1vw;
color: #333955;
font-family: "Garisman Studio FreudianTwo";
width: 100%;
z-index: 99;
align-content: center;
overflow: auto;
}
.menutekst {
text-align: center;
font-size: 2vw;
color: #333955;
top: 20px;
position: fixed;
word-spacing: 1em;
}
.koopnubutton{
position: fixed;
background : #333955;
background : rgba(51, 57, 85, 1);
border-radius : 16px;
-moz-border-radius : 16px;
-webkit-border-radius : 16px;
;
color: #FFFFFF;
width: 200px;
}
.firstdiv {
position: relative;
}
.firstdiv > img {
object-fit: cover;
width: 100%;
}
.eettellus {
position: absolute;
bottom: 30%;
width: auto;
left: 20%;
font-family: "Garisman Studio FreudianTwo";
color: #FDFDFD;
font-size: 3.5vw;
}
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="tellus.css">
<meta charset="utf-8">
<title>Tellus Chocolade</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<div class="banner" onKeyDown="asdasdf"><div class="menutekst">ons verhaal impact chocolade contact</div></div>
<div class= "firstdiv">
<img src="Afbeelding Landingspagina.png" width="1601" height="1130" alt=""/>
<div class="eettellus">Breng de natuur terug,<br>
<span style="font-size: 3.8vw">eet tellus chocolade</span></div></div>
<div class= "firstdiv"><img src="Images/About Tellus.png" width="1601" height="1215" alt=""/></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="jQueryAssets/script.js"></script>
</body>
</html>
You should change the background-color in css and also name the class in jquery proper:
var scroll_pos = 0;
$(document).scroll(function() {
scroll_pos = $(this).scrollTop();
if(scroll_pos > 20) {
$(".banner").css("backgroundColor", "red");
} else {
$(".banner").css("backgroundColor", "rgba(100,100,100,0.5)");
}
});
#import url("webfonts/Garisman_Studio_FreudianTwo/stylesheet.css");
* {
margin: 0;
padding: 0;
width: 100%;
height: auto;
}
.banner {
display: table;
clear: both;
position: fixed;
font-size: 1vw;
background-color: rgba(100,100,100,0.5);
font-family: "Garisman Studio FreudianTwo";
width: 100%;
z-index: 99;
align-content: center;
overflow: auto;
}
.menutekst {
text-align: center;
font-size: 2vw;
top: 20px;
word-spacing: 1em;
}
.koopnubutton{
position: fixed;
background : #333955;
background : rgba(51, 57, 85, 1);
border-radius : 16px;
-moz-border-radius : 16px;
-webkit-border-radius : 16px;
;
color: #FFFFFF;
width: 200px;
}
.firstdiv {
position: relative;
}
.firstdiv > img {
object-fit: cover;
width: 100%;
}
.eettellus {
position: absolute;
bottom: 30%;
width: auto;
left: 20%;
font-family: "Garisman Studio FreudianTwo";
color: #FDFDFD;
font-size: 3.5vw;
}
<head>
<link rel="stylesheet" href="tellus.css">
<meta charset="utf-8">
<title>Tellus Chocolade</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<div class="banner" onKeyDown="asdasdf"><div class="menutekst">ons verhaal impact chocolade contact</div></div>
<div class= "firstdiv">
<img src="Afbeelding Landingspagina.png" width="1601" height="1130" alt=""/>
<div class="eettellus">Breng de natuur terug,<br>
<span style="font-size: 3.8vw">eet tellus chocolade</span></div></div>
<div class= "firstdiv"><img src="Images/About Tellus.png" width="1601" height="1215" alt=""/></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="jQueryAssets/script.js"></script>
</body>
You just need to measure the height of your banner in order to know where you need to switch the color:
$(document).scroll(function() {
var scroll_pos = $(this).scrollTop();
if (scroll_pos > $(".banner").height()) {
$(".banner").css("background-color", "blue");
} else {
$(".banner").css("background-color", "red");
}
});
.banner {
display: table;
clear: both;
position: fixed;
font-size: 1vw;
color: #333955;
font-family: "Garisman Studio FreudianTwo";
width: 100%;
z-index: 99;
align-content: center;
overflow: auto;
background-color: red;
}
body {
height: 2000px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="banner" onKeyDown="asdasdf"><div class="menutekst">ons verhaal impact chocolade contact</div></div>
Use a native javascript in your html code :
<div class="banner" onscroll="myScript" ></div>
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="tellus.css">
<meta charset="utf-8">
<title>Tellus Chocolade</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<div class="banner" onscroll="myScript"><div class="menutekst">ons verhaal impact chocolade contact</div></div>
<div class= "firstdiv">
<img src="Afbeelding Landingspagina.png" width="1601" height="1130" alt=""/>
<div class="eettellus">Breng de natuur terug,<br>
<span style="font-size: 3.8vw">eet tellus chocolade</span></div></div>
<div class= "firstdiv"><img src="Images/About Tellus.png" width="1601" height="1215" alt=""/></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="jQueryAssets/script.js"></script>
</body>
</html>
and in your javascript
window.onscroll = function() {myScript()};
function myScript() {
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
document.getElementById("banner").css('background-color', 'blue');
} else {
document.getElementById("banner").css('background-color', 'red');
}
}
I hope this answer will help you.

trigger cursor move event upon page load

I'm working on a portfolio website that is a full browser sized container which swaps images when moving the cursor from left to right.
the header and captions are involved in the jquery script in order to change their color according to the image that is shown.
this seems to work great but the only downside is that the header & caption are not visible until the cursor is moved across the browser when you just loaded the site.
Is there a way to make the text appear upon site load? like triggering a mouseover event when it loads so the text is already there? or maybe some less complicated fix...
In any case thanks so much for the help!
$.fn.swinger = function () {
return this.each(function () {
var $container = $(this);
$container.css({
"position": "relative"
});
var $images = $container.find("img");
$images.css({
});
var $middleImage = $($images[Math.floor($images.length / 2)]);
$middleImage.css({
"z-index": "2",
"position": "relative"
});
var columnsCount = $images.length;
$images.each((i, img) => {
var left = `${100 / columnsCount * i}%`;
var width = `${100 / columnsCount}%`;
var $column = $(`<span style="z-index:999;position:absolute;top:0;bottom:0;left:${left};width:${width}"></span>`);
$(img).after($column);
$column.hover(() => {
$images.css({
"z-index": "1",
"position": "absolute"
});
$(img).css({
"z-index": "2",
"position": "relative"
});
// just added one line
$(".caption").text($(img).attr("alt"));
$(".caption")
.text($(img).attr("alt"))
.css('color', $(img).data('color'));
$('header').css('color', $(img).data('color'))
});
})
});
}
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
}
.left-holder {
text-align: left;
float: left;
margin-right: 55px;
width: 250px; }
div.swinger-container {
text-align: center; /* ensures the image is always in the h-middle */
overflow: hidden;
width: 100vw;
height: calc(100vh);
}
div.swinger-container img {
object-fit: cover;
-o-object-position: center center;
object-position: center center;
width: 100%;
height: 100% !important;
}
header {
width: 100%;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 10px 10px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin-top: -2px;
text-align: center;
z-index: 100;
-webkit-transition: all .2s;
transition: all .2s; }
header.header-about {
color: white !important;
background-color: white; }
header h1, header h2, header .about {
font-size: 1em;
font-weight: 400;
display: block;
line-height: 1.2em;
margin-bottom: 0;
padding-bottom: 0; }
header h1 {
text-align: left; }
header a {
text-decoration: none;
color: white;
line-height: 1; }
header .about {
text-align: left;
padding-bottom: 2px; }
.caption {
z-index: 100;
position: fixed;
left: 0;
right: 0;
bottom: 20px;
max-width: 500px;
text-align: center;
margin-left: auto;
margin-right: auto;
width: 50vw;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!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">
<link rel="stylesheet" href="Style.css">
<title>website title</title>
<script src="./jquery-3.6.0.min.js"></script>
</head>
<body>
<header>
<div class="left-holder">
<h1>my name</h1>
<h2>what I do</h2>
</div>
<div class="caption">
</div>
</header>
<div class="slides">
<div class="swinger-container">
<img src="https://images.unsplash.com/photo-1447703693928-9cd89c8d3ac5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1951&q=80" data-color="white" alt="Caption 1"/>
<img src="https://images.unsplash.com/photo-1502239608882-93b729c6af43?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80" class=“swinger_img_white” alt="Caption 2"/>
<img src="https://images.unsplash.com/photo-1516557070061-c3d1653fa646?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80" data-color="white" alt="Caption 3"/>
<img src="https://images.unsplash.com/photo-1468657988500-aca2be09f4c6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1950&q=80" class=“swinger_img_white” alt="Caption 4"/>
<img src="https://images.unsplash.com/photo-1488554378835-f7acf46e6c98?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1951&q=80" data-color="white" alt="Caption 5"/>
<img src="https://images.unsplash.com/photo-1491895200222-0fc4a4c35e18?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1567&q=80" class=“swinger_img_black” alt="Caption 6"/>
<img src="https://images.unsplash.com/photo-1517816743773-6e0fd518b4a6?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80" data-color="black" alt="Caption 7"/>
<img src="https://images.unsplash.com/photo-1548685913-fe6678babe8d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1923&q=80" data-color="black" alt="Caption 8"/>
</div>
</div>
<script type="text/javascript">
$(document).ready(init);
function init()
{
$(".swinger-container").swinger();
}
</script>
<script src="swinger.js"></script>
</body>
</html>
Is this okay for you?
I have just used the first image as a default one. Then the mouse events will do the rest.
Added this in init:
let defaultImage = $("#default-image");
$(".caption").text(defaultImage.attr("alt")).css('color', $(defaultImage).data('color'));
$('header').css('color', $(defaultImage).data('color'));
$.fn.swinger = function() {
return this.each(function() {
var $container = $(this);
$container.css({
"position": "relative"
});
var $images = $container.find("img");
$images.css({
});
var $middleImage = $($images[Math.floor($images.length / 2)]);
$middleImage.css({
"z-index": "2",
"position": "relative"
});
var columnsCount = $images.length;
$images.each((i, img) => {
var left = `${100 / columnsCount * i}%`;
var width = `${100 / columnsCount}%`;
var $column = $(`<span style="z-index:999;position:absolute;top:0;bottom:0;left:${left};width:${width}"></span>`);
$(img).after($column);
$column.hover(() => {
$images.css({
"z-index": "1",
"position": "absolute"
});
$(img).css({
"z-index": "2",
"position": "relative"
});
// just added one line
$(".caption").text($(img).attr("alt"));
$(".caption")
.text($(img).attr("alt"))
.css('color', $(img).data('color'));
$('header').css('color', $(img).data('color'))
});
})
});
}
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {}
.left-holder {
text-align: left;
float: left;
margin-right: 55px;
width: 250px;
}
div.swinger-container {
text-align: center;
/* ensures the image is always in the h-middle */
overflow: hidden;
width: 100vw;
height: calc(100vh);
}
div.swinger-container img {
object-fit: cover;
-o-object-position: center center;
object-position: center center;
width: 100%;
height: 100% !important;
}
header {
width: 100%;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 10px 10px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin-top: -2px;
text-align: center;
z-index: 100;
-webkit-transition: all .2s;
transition: all .2s;
}
header.header-about {
color: white !important;
background-color: white;
}
header h1,
header h2,
header .about {
font-size: 1em;
font-weight: 400;
display: block;
line-height: 1.2em;
margin-bottom: 0;
padding-bottom: 0;
}
header h1 {
text-align: left;
}
header a {
text-decoration: none;
color: white;
line-height: 1;
}
header .about {
text-align: left;
padding-bottom: 2px;
}
.caption {
z-index: 100;
position: fixed;
left: 0;
right: 0;
bottom: 20px;
max-width: 500px;
text-align: center;
margin-left: auto;
margin-right: auto;
width: 50vw;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!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">
<link rel="stylesheet" href="Style.css">
<title>website title</title>
<script src="./jquery-3.6.0.min.js"></script>
</head>
<body>
<header>
<div class="left-holder">
<h1>my name</h1>
<h2>what I do</h2>
</div>
<div class="caption">
</div>
</header>
<div class="slides">
<div class="swinger-container">
<img id="default-image" src="https://images.unsplash.com/photo-1447703693928-9cd89c8d3ac5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1951&q=80" data-color="white" alt="Caption 1" />
<img src="https://images.unsplash.com/photo-1502239608882-93b729c6af43?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80" class=“swinger_img_white” alt="Caption 2" />
<img src="https://images.unsplash.com/photo-1516557070061-c3d1653fa646?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80" data-color="white" alt="Caption 3" />
<img src="https://images.unsplash.com/photo-1468657988500-aca2be09f4c6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1950&q=80" class=“swinger_img_white” alt="Caption 4" />
<img src="https://images.unsplash.com/photo-1488554378835-f7acf46e6c98?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1951&q=80" data-color="white" alt="Caption 5" />
<img src="https://images.unsplash.com/photo-1491895200222-0fc4a4c35e18?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1567&q=80" class=“swinger_img_black” alt="Caption 6" />
<img src="https://images.unsplash.com/photo-1517816743773-6e0fd518b4a6?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80" data-color="black" alt="Caption 7" />
<img src="https://images.unsplash.com/photo-1548685913-fe6678babe8d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1923&q=80" data-color="black" alt="Caption 8" />
</div>
</div>
<script type="text/javascript">
$(document).ready(init);
function init() {
$(".swinger-container").swinger();
// Just prepare the first setup here
// Note that I have added the ID default-image to the first image
let defaultImage = $("#default-image");
$(".caption").text(defaultImage.attr("alt")).css('color', $(defaultImage).data('color'));
$('header').css('color', $(defaultImage).data('color'));
}
</script>
<script src="swinger.js"></script>
</body>
</html>

App returns error "your user photo IMG wrapper is not rendered as a circle yet"

I have an issue with a challenge I am undertaking: App returns error "your user photo IMG wrapper is not rendered as a circle yet". I have tried and checked most resources but have been left stuck. I don't know if it is a viewport issue or not but my tests keep failing.
Here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<title>Mini App</title>
<style>
body{
background: lavender;
margin: 0px;
overflow: hidden
}
*{
margin: 0;
padding: 0;
}
h2{
text-align: center;
margin-bottom: 2.79em;
text-transform: Capitalize;
}
div.user-photo{
width: 150px;
height: 150px;
margin: 1em auto;
background: #fff;
overflow: hidden;
border-radius: 100%;
-webkit-border-radius: 60%;
-moz-border-radius: 60%;
}
div.details{
font-size: 2.3em;
margin: 2.5em 0.2em 0.2em 0.2em;
color: #fff;
padding: 0.2em;
display: flex;
min-height: 6em;
background: #6200ee;
}
footer{
width: calc(100% - 2em);
z-index: 500;
position: absolute;
bottom: 0;
overflow: hidden;
display: flex;
justify-content: space-between;
margin: 0 1em;
}
footer button.mdc-icon-button{
margin: 0.5em;
background-color: #573594;
}
img{
max-width: 100%;
max-height: 100%;
display: block;
}
</style>
</head>
<body>
<header>
<h2>Ibu Omenka Eric</h2>
</header>
<div class="user-photo mdc-elevation--z3" >
<img src="https://via.placeholder.com/150" alt =""/>
</div>
<div class ="details mdc-elevation--z3"></div>
<div class ="messages"></div>
<footer>
<button id = "btn-address"
class="mdc-icon-button small material-icons" style="color: white;"><i> home</i></button>
<button id = "btn-phone"
class="mdc-icon-button small material-icons" style="color: white;"><i>phone</i></button>
<button id = "btn-birthdate"
class="mdc-icon-button small material-icons" style="color: white;"><i>date_range</i></button>
</footer>
<script>
const notify = (msg) => {
const toastr = document.querySelector('.messages');
if(!toastr) return;
toastr.textContent = msg;
if(!toastr.classList.contains('on')) {
toastr.classList.add('on');
}
};
const clearNotice = () => {
const toastr = document.querySelector('.messages');
if(!toastr) return;
toastr.textContent = '';
toastr.classList.remove('on');
};
const displayUserPhotoAndName = (data) => {
if(!data) return;
// add your code here
clearNotice();
};
const getAUserProfile = () => {
const api = 'https://randomuser.me/api/';
// make API call here
notify(`requesting profile data ...`);
};
const startApp = () => {
// invoke the getAUserProfile here
};
startApp();
</script>
</body>
</html>
I cannot figure out where the error is in the code.
div .user-photo {
width: 150px;
height: 150px;
margin: 1em auto;
background: #fff;
border-radius: 50%;
display: block;
overflow: hidden;

Categories