How do I make an extension's html background invisible? - javascript

I´m trying to do a test extension for chrome for a university project but I can´t find a way to make the background or body of the extension´s html completely invisible, just for a clean interface. The problems I´m having are those white corners on the background.
This is the code of the extension:
// Define variables
let audio, playbtn, title, poster, artists, mutebtn, seekslider, volumeslider,
seeking = false, seekto, curtimetext, durtimetext, playlist_status, dir, playlist,
ext, agent, playlist_artist, repeat, randomSong;
// Initialization of YouTube Api
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
var id = '5_385OOZlIg';
var url = 'https://www.youtube.com/watch?v=' + id;
// Initialization of Array of Music, Tittle, Poster Image, Artists
dir = "music/";
playlist = ["Cartoon-On-_-On","Elektronomia","Johnning","Popsicle","Fearless"];
title = ["Cartoon - On & On","Elektronomia","Janji-Heroes Tonight","Popsicle","Lost Sky - Fearless"];
artists = ["(feat. Daniel Levi) [NSC Release]","Elektronomia - Sky High [NCS Release]","(feat. Johnning) [NCS Release]",
"LFZ - [NCS Release]","(feat. Chris Linton)[NCS Release]"];
poster = ["images/ncs1.jpeg","images/ncs2.jpg","images/ncs3.jpg","images/ncs4.jpg","images/ncs5.jpg"];
// Used to run on every browser
ext = ".mp3";
agent = navigator.userAgent.toLowerCase();
if(agent.indexOf('firefox') != -1 || agent.indexOf('opera') != -1){
ext = ".ogg";
}
// Set object references
playbtn = document.getElementById("playpausebtn");
nextbtn = document.getElementById("nextbtn");
prevbtn = document.getElementById("prevbtn");
mutebtn = document.getElementById("mutebtn");
visibilitybtn = document.getElementById("visibility");
seekslider = document.getElementById("seekslider");
volumeslider = document.getElementById("volumeslider");
curtimetext = document.getElementById("curtimetext");
durtimetext = document.getElementById("durtimetext");
playlist_status = document.getElementById("playlist_status");
playlist_artist = document.getElementById("playlist_artist");
repeat = document.getElementById("repeat");
randomSong = document.getElementById("random");
playlist_index = 0;
// Audio Object
audio = new Audio();
audio.src = dir + playlist[0] + ext; // music/musicname.mp3
audio.loop = false;
// First song title and artist
playlist_status.innerHTML = title[playlist_index];
playlist_artist.innerHTML = artists[playlist_index];
// Add event handling
playbtn.addEventListener("click", playPause);
nextbtn.addEventListener("click", nextSong);
prevbtn.addEventListener("click", prevSong);
mutebtn.addEventListener("click", mute);
visibilitybtn.addEventListener("click", toggle);
seekslider.addEventListener("mousedown", function(event){seeking = true; seek(event);});
seekslider.addEventListener("mousemove", function(event){seek(event);});
seekslider.addEventListener("mouseup", function(){seeking = false;});
volumeslider.addEventListener("mousemove", setvolume);
audio.addEventListener("timeupdate", function(){seektimeupdate();});
audio.addEventListener("ended",function(){switchTrack();});
repeat.addEventListener("click", loop);
randomSong.addEventListener("click", random);
// Functions
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '315',
width: '560',
videoId: id,
playerVars: {'autoplay': 0, 'controls': 0, 'loop': 1},
events: {
'onStateChange': onPlayerStateChange
}
});
}
/*
function onPlayerReady(event) {
let pgd = player.getDuration();
let vpb = document.getElementById("video_progress_bar");
vpb.setAttribute("max",pgd);
}*/
//Intento de que la barra de progreso avance con forme al video onPlayerStateChange(event) y onPlay()
var testThread;
function onPlayerStateChange(event) {
if(event.data == 1)
{
testThread = setInterval(seektimeupdate,500);
}else{
clearInterval(testThread);
}
}
// Oculta o hace visible el video de YouTube en la interfaz
function toggle(element){
let ventana = document.getElementById("player");
if(ventana.style.display != 'none'){
ventana.style.display = 'none';
}else{
ventana.style.display = '';
}
}
function fetchMusicDetails(){
// Poster Image, Pause/Play Image
$("#playpausebtn img").attr("src", "images/pause-red.png");
$("#bgImage").attr("src", poster[playlist_index]);
$("#image").attr("src",poster[playlist_index]);
// Title and Artist
playlist_status.innerHTML = title[playlist_index];
playlist_artist.innerHTML = artists[playlist_index];
// Audio
audio.src = dir + playlist[playlist_index] + ext;
audio.play();
}
function playPause(element){
let playButton = document.getElementById("playpausebtn");
if(playButton.value == "play"){
playButton.setAttribute("value","pause");
player.playVideo()
$("#playpausebtn img").attr("src","images/pause-red.png");
}else{
playButton.setAttribute("value","play");
player.pauseVideo();
$("#playpausebtn img").attr("src","images/play-red.png");
}
}
function nextSong(){
playlist_index++;
if(playlist_index > playlist.length - 1){
playlist_index = 0;
}
fetchMusicDetails();
}
function prevSong(){
playlist_index--;
if(playlist_index < 0){
playlist_index = playlist.length - 1;
}
fetchMusicDetails();
}
function mute(){
if(player.isMuted()){
player.unMute();
$("#mutebtn img").attr("src","images/speaker.png");
}else{
player.mute();
$("#mutebtn img").attr("src","images/mute.png");
}
}
function seek(event){
if(player.getDuration() == 0){
null;
}else{
if(seeking){
seekslider.value = event.clientX - seekslider.offsetLeft;
seekto = player.getDuration() * (seekslider.value / 100);
player.seekTo(seekto);
}
}
}
function setvolume(){
player.setVolume(volumeslider.value);
}
function seektimeupdate(){
if(player.getDuration()){
let nt = player.getCurrentTime() * (100 / player.getDuration());
seekslider.value = nt;
var curmins = Math.floor(player.getCurrentTime() / 60);
var cursecs = Math.floor(player.getCurrentTime() - curmins * 60);
var durmins = Math.floor(player.getDuration() / 60);
var dursecs = Math.floor(player.getDuration() - durmins * 60);
if(cursecs < 10){cursecs = "0" + cursecs}
if(dursecs < 10){dursecs = "0" + dursecs}
if(curmins < 10){curmins = "0" + curmins}
if(durmins < 10){durmins = "0" + durmins}
curtimetext.innerHTML = curmins + ":" + cursecs;
durtimetext.innerHTML = durmins + ":" + dursecs;
}else{
curtimetext.innerHTML = "00" + ":" + "00";
durtimetext.innerHTML = "00" + ":" + "00";
}
}
function switchTrack(){
if(playlist_index == (playlist.length -1)){
playlist_index = 0;
}else{
playlist_index++;
}
fetchMusicDetails();
}
function loop(){
if(audio.loop){
audio.loop = false;
$("#repeat img").attr("src", "images/rep.png");
}else{
audio.loop = true;
$("#repeat img").attr("src", "images/rep1.png");
}
}
function getRandomNumber(min, max){
let step1 = max - min + 1;
let step2 = Math.random() * step1;
let result = Math.floor(step2) + min;
return result;
}
function random(){
let randomIndex = getRandomNumber(0 , playlist.length - 1);
playlist_index = randomIndex;
fetchMusicDetails();
}
body{
margin: 0;
padding: 0;
height: 100vh;
width: 100%;
background-color: rgba(0,0,0,0);
font-family: 'Poppins', sans-serif;
}
button{
border: none;
outline: none;
background: none;
cursor: pointer;
}
.music-container{
height: 100vh;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.music-content{
position: relative;
width: 245px;
height: 450px;
background-color: #000;
border-width: 8px 4px !important;
border: solid;
border-radius: 20px;
overflow: hidden;
box-shadow: 5px 5px 10px rgba(0, 0, 0, .52);
}
#bg-image img{
width: 110%;
height: 110%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 1;
filter: blur(6px);
-webkit-filter: blur(5px);
}
#blacklayer{
height: 450px;
width: 100%;
background-color: rgba(0,0,0,.404);
position: absolute;
z-index: 2;
}
#menu{
position: relative;
z-index: 3;
padding: 15px;
display: flex;
justify-content: space-between;
align-items: center;
}
#menu img{
width: 15px;
height: 15px;
cursor: pointer;
}
#volume-container{
position: relative;
width: 100%;
height: 15px;
z-index: 3;
display: flex;
justify-content: center;
align-items: center;
}
#volume-container img{
width: 16px;
height: 16px;
margin: 0 5px;
}
.slider{
width: 110px;
height: 1px !important;
-webkit-appearance: none;
border-radius: 10px;
background-color: #fff;
z-index: 100;
outline: none;
position: relative;
}
.slider::-webkit-slider-thumb{
-webkit-appearance: none;
width: 10px;
height: 10px;
background-color: #e62c2f;
border-radius: 50%;
cursor: pointer;
outline: none;
transform: scale(1);
}
.slider:active::-webkit-slider-thumb{
transform: scale(1.2);
}
#music-image{
position: relative;
width: 100%;
height: 215px;
z-index: 3;
}
#circle-image{
position: absolute;
top: -33%;
left: 50%;
transform: translate(-50%,50%);
width: 120px;
height: 120px;
background-color: #000;
border-radius: 50%;
border: 5px solid rgba(221,221,221,0.897);
overflow: hidden;
}
#music-image img{
width: 100%;
height: 100%;
}
#player{
position: absolute;
top: -33%;
left: 50%;
transform: translate(-50%,27%);
width: 120px;
height: 120px;
background-color: #000;
border-radius: 50%;
border: 5px solid rgba(221,221,221,0.897);
overflow: hidden;
}
#music-title{
position: relative;
padding: 0 25px;
top: 65%;
color: #fff;
}
#music-title h5{
color: #fff;
font-size: 20px;
margin: 20px 0 5px;
font-weight: 300;
text-align: center;
line-height: 1.2;
}
#music-title h6{
margin: 0;
font-size: 12.5px;
text-align: center;
font-weight: 400;
}
#music-menu{
width: 90%;
height: 40px;
position: relative;
z-index: 3;
display: flex;
justify-content: space-around;
align-items: center;
margin: 0 auto;
}
#music-menu img{
width: 15px;
height: 15px;
cursor: pointer;
}
#visibility{
width: 20px;
height: 20px;
cursor: pointer;
}
#currentTime{
position: relative;
z-index: 3;
padding: 0 12px 5px;
color: #fff;
display: flex;
justify-content: space-between;
margin-top: 8px;
}
#currentTime span{
font-size: 12px;
}
.seekslider{
width: 100px;
height: 2px !important;
-webkit-appearance: none;
border-radius: 10px;
background-color: #fff;
z-index: 3;
outline: none;
position: fixed;
margin-left: 70px;
}
.seekslider::-webkit-slider-thumb{
-webkit-appearance: none;
width: 10px;
height: 10px;
background-color: #e62c2f;
border-radius: 50%;
cursor: pointer;
outline: none;
transform: scale(1);
}
.seekslider:active::-webkit-slider-thumb{
transform: scale(1.2);
}
#buttons{
position: relative;
width: 100%;
height: 50px;
z-index: 3;
margin-top: 20px;
}
#buttons div{
display: flex;
justify-content: center;
align-items: center;
}
.play{
width: 60px;
height: 50px;
margin: 0 5px;
}
.play img{
width: 100%;
height: 100%;
}
.prev img,
.next img{
width: 20px;
height: 20px;
}
#buttons .like{
position: absolute;
top: 25%;
right: 8%;
cursor: pointer;
}
#buttons .like i{
color: rgba(255,255,255,0.883);
}
#buttons .repeat{
position: absolute;
top: 30%;
left: 6%;
font-size: 15px;
cursor: pointer;
}
#repeat img{
width: 16px;
height: 16px;
}
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="UTF-8">
<title>Music Player</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<div class="music-container">
<div class="music-content">
<div id="bg-image">
<div id="blackLayer"></div>
<img src="images/ncs1.jpeg" alt="" id="bgImage">
</div>
<div id="menu">
<img src="images/menu.png" alt="">
<img src="images/search.png" alt="">
</div>
<div id="volume-container">
<img src="images/volume-low.png" alt="" id="volumn-down">
<input type="range" class="slider" id="volumeslider" min="0" max="100" value="100" step="1">
<img src="images/volumn-high.png" alt="" id="volumn-up">
</div>
<div id="music-image">
<div id="circle-image">
<div id="player"></div>
<img src="images/ncs1.jpeg" alt="" id="image">
</div>
<div id="music-title">
<h5 id="playlist_status"></h5>
<h6 id="playlist_artist"></h6>
</div>
</div>
<div id="music-menu">
<button id="random"><img src="images/random.png" alt=""></button>
<button id="visibility"><img src="images/video-on.png" alt=""></button>
<button id="mutebtn"><img src="images/speaker.png" alt=""></button>
</div>
<div id="currentTime">
<span id="curtimetext">00:00</span>
<span id="durtimetext">00:00</span>
</div>
<input type="range" class="seekslider" id="seekslider" min="0" max="100" value="0" step="1">
<div id="buttons">
<button class="repeat" id="repeat"><img src="images/rep.png" alt=""></button>
<div>
<button class="prev" id="prevbtn"><img src="images/backward.png" alt=""></button>
<button class="play" id="playpausebtn" value="play"><img src="images/play-red.png" alt=""></button>
<button class="next" id="nextbtn"><img src="images/forward.png" alt=""></button>
</div>
<span class="like">
<i class="far fa-heart" aria-hidden="true"></i>
</span>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
<!-- begin snippet: js hide: false console: true babel: false -->
// Manifest.json
{
"manifest_version" : 2,
"name" : "OdisseyChromeExtension",
"description" : "Reproductor de musica youtube",
"version" : "0.3",
"browser_action" : {
"default_popup" : "index.html",
"default_title" : "odissey"
},
"content_security_policy": "script-src 'self' https://www.youtube.com/iframe_api https://www.youtube.com/s/player/9f996d3e/www-widgetapi.vflset/www-widgetapi.js https://code.jquery.com/jquery-3.5.1.min.js; object-src 'self'",
"permissions": [
"activeTab",
"storage",
"tabs",
"http://*/*" , "https://*/*",
"cookies",
"identity",
"identity.email"
]
}
This is the extension appearance

Okey this might actually solve your problem.
As the background is there because of the iframe, embed a player into an <object> or <video> tag..
<object width={ width } height={ height }>
<video src={ playlists['mylist'].JSON[index].source } type="video/webp" width="100%" height="333" objectFit="cover" />
</object>
Then just get a JSON of the playlist. If you want higher functionality like search or managment of user created playlists you need to go through Googles Data API. It can be finicky in the beggining but well worth the time.
here are some code examples:
https://developers.google.com/youtube/v3/docs/playlists/list?apix=true
Otherwise if you have set playlists in the player, you can just datamine separately and create your own JSON arrays, even manually its really simple and won't even take a minute per list when you have your mining snippet. A small upside here is you can dynamically create custom playlists outside of youtube.
then you can have three players and have them preload the previous and next video for a smoother switching experience ( an option for a fade inbetween can also be nice )
I have snippets of code somewhere for this kind of setup, if this sounds like something you care to do I can try to dig them up for you.
happy coding! :)

Related

Creating a Simple image carousel using JS Array

I created a simple carousel using HTML, CSS, and Javascript.
Clicking the left button shows the previous slide and the right one shows the next slide.
But my concern is that slide change is not working correctly
when clicking the next button: After the final slide, it won't go to the first slide again.
when clicking the previous button: After the first slide, it won't go again to last the slide again.
So please review my code and let me know my error.
let right = document.querySelector('.nxt');
let left = document.querySelector('.pre');
let slids = document.querySelector('.slids');
let first = document.querySelector('.first');
let scond = document.querySelector('.scond');
let third = document.querySelector('.third');
let fouth = document.querySelector('.fouth');
let slidesArray=[first,scond,third,fouth];
let index= 0;
let activeSlide= slidesArray[index].classList.add('active');
left.addEventListener('click',()=>{
if (++index > 0) {
slidesArray[index].classList.add('active');
}
});
right.addEventListener('click',()=>{
if (index > 0) {
slidesArray[index].classList.add('deactive');
slidesArray[--index].classList.add('active');
}
});
body{
display: flex;
justify-content: center;
align-items: center;
}
.slids>*{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50% ,-50%);
width: 400px;
height: 350px;
font-size: 50px;
font-weight: 600;
display: grid;
place-items: center;
border-radius: 20px;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
visibility: hidden;
}
.active{
visibility: visible;
}
.first{
background-color: #F7EC09;
}
.scond{
background-color: #3EC70B;
}
.third{
background-color: #3B44F6;
}
.fouth{
background-color: #A149FA;
}
.btn{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50% ,-50%);
display: flex;
gap: 450px;
}
.nxt, .pre{
font-size: 100px;
font-weight: 700;
background: none;
border: none;
cursor: pointer;
}
<body>
<div class="slids">
<div class="first">1</div>
<div class="scond">2</div>
<div class="third">3</div>
<div class="fouth">4</div>
</div>
<div class="btn">
<button class="nxt"><</button>
<button class="pre">></button>
</div>
A chained ternary expression can be used to determine the new index number in a single line:
to = to >= size ? 0 : to < 0 ? size - 1 : to;
Details are commented in example
// Reference the buttons
let next = document.querySelector('.next');
let prev = document.querySelector('.prev');
/*
Collect all div.slide into an array
Define the array's size
Define a number value outside of the function
*/
let slides = [...document.querySelectorAll('.slide')];
let size = slides.length;
let index = 0;
// Bind click event to button.prev
prev.onclick = event => move(index - 1);
// Bind click event to button.next
next.onclick = event => move(index + 1);
/*
Pass newest index number
Ternary expression:
If the given number is greater than or equal to size of the array...
...return 0...
...If the given number is less than 0...
...return last index of array...
...otherwise return the given number
Toggle the current .slide.active and new .slide
Assign index as the given number
*/
function move(to) {
to = to >= size ? 0 : to < 0 ? size - 1 : to;
slides[index].classList.toggle("active");
slides[to].classList.toggle("active");
index = to;
}
html {
font: 300 3vmin/1 Consolas;
}
body {
display: flex;
justify-content: center;
align-items: center;
}
main {
display: flex;
justify-content: center;
align-items: center;
position: relative;
max-width: max-content;
min-height: 100vh;
}
.slides {
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 420px;
height: 400px;
overflow: hidden;
}
.slide {
display: grid;
place-items: center;
position: absolute;
top: 50%;
left: 50%;
width: 400px;
height: 350px;
border-radius: 20px;
font-size: 50px;
font-weight: 600;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
visibility: hidden;
transform: translate(-50%, -50%);
}
.active {
visibility: visible;
}
.slide:first-of-type {
background-color: #F7EC09;
}
.slide:nth-of-type(2) {
background-color: #3EC70B;
}
.slide:nth-of-type(3) {
background-color: #3B44F6;
}
.slide:nth-of-type(4) {
background-color: #A149FA;
}
.ctrl {
display: flex;
justify-content: space-between;
position: absolute;
top: 45%;
left: 45%;
width: 150%;
transform: translate(-50%, -50%);
}
.next,
.prev {
border: none;
font-size: 100px;
font-weight: 700;
background: none;
cursor: pointer;
}
<main>
<section class="slides">
<div class="slide active">1</div>
<div class="slide">2</div>
<div class="slide">3</div>
<div class="slide">4</div>
</section>
<menu class="ctrl">
<button class="prev"><</button>
<button class="next">></button>
</menu>
</main>
You need to reset the index of the slide when you click next and reach to maximum slide you need to reset index to 0 to return to first slide, also when you click prev and you in the first slide, you need to reset index to 3 to return the last slide.
let right = document.querySelector(".nxt");
let left = document.querySelector(".pre");
let slids = document.querySelector(".slids");
let first = document.querySelector(".first");
let scond = document.querySelector(".scond");
let third = document.querySelector(".third");
let fouth = document.querySelector(".fouth");
const elementsArr = [first, scond, third, fouth];
let slidesArray = [first, scond, third, fouth];
let index = 0;
let activeSlide = slidesArray[index].classList.add("active");
left.addEventListener("click", () => {
if (index === 3) {
index = -1;
}
index++;
resetActiveElements()
});
right.addEventListener("click", () => {
if (index === 0) index = 4;
index--;
resetActiveElements()
});
const resetActiveElements = () => {
elementsArr.forEach((element, i) => {
if (index === i) {
element.classList.add("active");
} else {
element.classList.remove("active");
}
});
}
body{
display: flex;
justify-content: center;
align-items: center;
}
.slids>*{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50% ,-50%);
width: 400px;
height: 350px;
font-size: 50px;
font-weight: 600;
display: grid;
place-items: center;
border-radius: 20px;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
visibility: hidden;
}
.active{
visibility: visible;
}
.first{
background-color: #F7EC09;
}
.scond{
background-color: #3EC70B;
}
.third{
background-color: #3B44F6;
}
.fouth{
background-color: #A149FA;
}
.btn{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50% ,-50%);
display: flex;
gap: 450px;
}
.nxt, .pre{
font-size: 100px;
font-weight: 700;
background: none;
border: none;
cursor: pointer;
}
<body>
<div class="slids">
<div class="first">1</div>
<div class="scond">2</div>
<div class="third">3</div>
<div class="fouth">4</div>
</div>
<div class="btn">
<button class="nxt"><</button>
<button class="pre">></button>
</div>
/* <div class="btn">
<button class="pre"><</button>
<button class="nxt">></button>
</div> */
let right = document.querySelector('.nxt');
let left = document.querySelector('.pre');
let slids = document.querySelector('.slids');
let first = document.querySelector('.first');
let scond = document.querySelector('.scond');
let third = document.querySelector('.third');
let fouth = document.querySelector('.fouth');
let slidesArray = [first, scond, third, fouth];
let index = 0;
let activeSlide = slidesArray[index].classList.add('active');
left.addEventListener('click', () => {
slidesArray[index].classList.remove('active');
if (index == 0) {
index = 3;
slidesArray[index].classList.add('active');
} else {
index--;
slidesArray[index].classList.add('active');
}
});
right.addEventListener('click', () => {
slidesArray[index].classList.remove('active');
if (index == 3) {
index = 0;
slidesArray[index].classList.add('active');
} else {
index++;
slidesArray[index].classList.add('active');
}
});

Javascript events wont work anymore when i changed the body tag classes in my html?

i'm building a website portfolio with an interactive display at the top with some click events and hover. However i changed the 'body' class so i could fit it in with my website and then the javascript stopped working and i can't for the life of me figure it out?!
(sorry if i didnt show enough snippets..) I'm using scss but i used a transpiler to convert it into css when i switched it over to VSC..
the normal javscript like time and date work fine - it just seems to be the elements connected on the page / in the now 'display' div which i cant connect to anymore..
It works fine when the classes are with body - code:
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
body {
background: #CCBBFF;
z-index: -10;
display: flex;
justify-content: center;
align-items: center;
}
.mainDisp {
width: 1000px;
height: 550px;
border: 1px solid black;
// overflow: hidden;
}
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
* {
position: absolute;
}
*:before,
*:after {
content: "";
position: absolute;
}
.lamp {
width: 120px;
height: 80px;
background: #494949;
-webkit-clip-path: polygon(50% 0%, 0 48%, 100% 48%);
clip-path: polygon(50% 0%, 0 48%, 100% 48%);
left: 45%;
top: 10%;
z-index: 4;
}
</head>
<body>
<div class="mainDisp">
<div class="lamp"></div>
<div class="innerLight hidden"></div>
<div class="string"></div>
....
but when i add a new class 'Display' and add the old body's classes the javascript just doesnt work anymore? Same Javascript for both..
code :
function openURL(url) {
window.open(url);
}
var book1 = document.querySelector('.book');
var super1 = document.querySelector('.super1');
var book2 = document.querySelector('.book.two');
var super2 = document.querySelector('.super2');
var book3 = document.querySelector('.book.three');
var super3 = document.querySelector('.super3');
var calculator = document.querySelector('.calculator');
var calc = document.querySelector('.calc');
var phone = document.querySelector('.phone');
var tipCalc = document.querySelector('.tipCalc');
var lightSwitch = document.querySelector('.switch');
var lamp = document.querySelector('.innerLight');
lightSwitch.addEventListener('click', function() {
lamp.classList.toggle('hidden');
})
book1.addEventListener('mouseover', function() {
super1.classList.remove('hidden')
});
book1.addEventListener('mouseout', function() {
super1.classList.add('hidden')
});
book2.addEventListener('mouseover', function() {
super2.classList.remove('hidden')
});
book2.addEventListener('mouseout', function() {
super2.classList.add('hidden')
});
book3.addEventListener('mouseover', function() {
super3.classList.remove('hidden')
});
book3.addEventListener('mouseout', function() {
super3.classList.add('hidden')
});
calculator.addEventListener('mouseover', function() {
calc.classList.remove('hidden')
});
calculator.addEventListener('mouseout', function() {
calc.classList.add('hidden')
});
phone.addEventListener('mouseover', function() {
tipCalc.classList.remove('hidden')
});
phone.addEventListener('mouseout', function() {
tipCalc.classList.add('hidden')
});
// CALENDAR DATE
const dayDisp = document.querySelector('#day');
const monthDisp = document.querySelector('#month');
var months = ['Jan','Feb','Mar','Apr','May','June','July','Aug','Sept','Oct','Nov','Dec'];
var now = new Date();
var date = now.getDate();
var month = months[now.getMonth()];
dayDisp.innerText = date;
monthDisp.innerText = month;
// MAIN CLOCK //
var hourHand = document.querySelector('.hour');
var minHand = document.querySelector('.min');
var secHand = document.querySelector('.sec');
function setDate() {
const now = new Date;
const secs = now.getSeconds();
const secondDegrees = ((secs / 60) * 360) + 90;
secHand.style.transform = `rotate(${secondDegrees}deg)`;
const mins = now.getMinutes();
const minsDegrees = ((mins / 60) * 360) + 90;
minHand.style.transform = `rotate(${minsDegrees}deg)`;
const hours = now.getHours();
const hourDegrees = ((hours / 12) * 360) + 90;
hourHand.style.transform = `rotate(${hourDegrees}deg)`;
}
setInterval(setDate, 1000);
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
body {
background: #fdf5e6;
}
html {
box-sizing: border-box;
}
-----------
.display {
width: 100%;
height: 100vh;
margin: 0;
padding: 0;
background: #CCBBFF;
position: relative;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
z-index: -10;
* {
position: absolute;
box-sizing: inherit;
}
*:before, *:after {
position: absolute;
content: '';
box-sizing: inherit;
}
.mainDisp {
position: absolute;
width: 1000px;
height: 550px;
// border: 1px solid black;
z-index: -10;
box-sizing: inherit;
.lamp {
position: absolute;
width: 120px;
height: 80px;
background: #494949;
-webkit-clip-path: polygon(50% 0%, 0 48%, 100% 48%);
clip-path: polygon(50% 0%, 0 48%, 100% 48%);
left: 45%;
top: 10%;
z-index: 4;
}
.innerLight {
position: absolute;
z-index: 1;
width: 100%;
height: 900px;
-webkit-clip-path: polygon(50% 0%, 0 48%, 100% 48%);
clip-path: polygon(50% 0%, 0 48%, 100% 48%);
background: rgba(253,245,230, 0.4);
left: 1%;
top: 55px;
}
</head>
<body>
<div class="container">
<header>
<div class="intro">
<h1 class="name">NAME</h1>
</div>
<nav>
<li>About</li>
<li>Projects</li>
<li>Skills</li>
<li>Contact</li>
</nav>
</header>
<div class='display'>
<div class="mainDisp">
<div class="lamp"></div>
<div class="innerLight hidden"></div>
<div class="string"></div>
<div class="super1 hidden"></div>
<div class="super2 hidden"></div>
<div class="super3 hidden"></div>
<!-- <div class="window" onclick="openURL('https://codepen.io/Eejay/full/VQBvOm/')" target="_blank"> -->
<div class='windows'>
<div class="outside">
<div class="moon"></div>
</div>
<div class="inner"></div>
<div class="inner two"></div>
</div>
<div class="ledge"></div>
<div class="mainClock">
<div class="hour"></div>
<div class="min"></div>
<div class="sec"></div>
</div>
Any help appreciated! I know its probably something really simple but i can't put my finger on it....
Your Problem is that you set your z-index of .display to -10. Its not clickable anymore.
Setting it to 0 will fix your issue:
.display {
width: 100%;
height: 100vh;
margin: 0;
padding: 0;
background: #CCBBFF;
position: relative;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
z-index: 0;
}
take a look at this forked codepen.

Carousel Images Same Height

I have an image/video carousel and I'm having trouble keeping all the content in the carousel the same height.
When you click on the thumbnails, the main image heights don't match up.
How do I keep everything the same height, yet responsive at the same time?
(I added some pictures to show what I mean)
Here's the codepen.
Edit: I want to keep the main images shown in the carousel the same height, not the thumbnails.
$(document).ready(function() {
// get all images loaded
var images = $(".chair-class");
// thumbnails containers
var thumbnailContainer = $("#thumbnails");
var iframe1 = $('#sketchfab-iframe-1')[0];
var iframe2 = $('#sketchfab-iframe-2')[0];
var player1 = $f(iframe1);
var player2 = $f(iframe2);
// generate thumbnail images
generateThumbnails(images, thumbnailContainer);
// listeners for controls arrows
$(".prev-next-button").on("click", function() {
player1.api('pause');
player2.api('pause');
// get the images
var currentImageIndex = images.index($(".chair-class[data-active=true]"));
var isPrevious = $(this).hasClass("previous");
var nextIndex;
if (isPrevious) {
if (currentImageIndex === 0) {
nextIndex = images.length - 1;
}
if (currentImageIndex > 0) {
nextIndex = currentImageIndex - 1;
}
} else {
if (currentImageIndex === images.length - 1) {
nextIndex = 0;
}
if (currentImageIndex < images.length - 1) {
nextIndex = currentImageIndex + 1;
}
}
// remove any active class from images
images.removeClass("active").attr('data-active', "false");
// get the next active image and add active class to that next current image
var $nextImage = $(images[nextIndex]);
var iframeId = $nextImage.data('iframe');
if (iframeId) {
$(images[nextIndex]).attr('data-active', "true");
$('.sketchfab-iframe').removeClass('active');
$('#' + iframeId).addClass('active');
} else {
$(images[nextIndex]).addClass("active").attr('data-active', "true");
$('.sketchfab-iframe').removeClass('active');
}
});
$(".thumb").on("click", function(event) {
event.preventDefault();
var images = $(".chair-class");
var indexSelected = $(this).data("img-index");
var currentShown = images.index($(".chair-class[data-active=true]"));
if (currentShown === indexSelected) return false;
player1.api('pause');
player2.api('pause');
images.removeClass("active").attr('data-active', "false");
var iframeId = $(this).data('iframe');
if (iframeId) {
$(images[indexSelected]).attr('data-active', "true");
$('.sketchfab-iframe').removeClass('active');
$('#' + iframeId).addClass('active');
} else {
images.removeClass("active");
$(images[indexSelected]).addClass('active').attr('data-active', "true");;
$('.sketchfab-iframe').removeClass('active');
}
});
function generateThumbnails(images, container) {
var ul = $("<ul>");
images.each(function(index, element) {
var currentThumb = $("<img>");
var li = $("<li>");
var src = $(this).attr("src");
currentThumb.attr("src", src);
currentThumb.attr("class", "thumb");
currentThumb.data("img-index", index);
var iframe = $(this).data('iframe');
if (iframe) {
currentThumb.data("iframe", iframe);
}
li.append(currentThumb);
ul.append(li);
});
container.append(ul);
}
});
* {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
font-size: 100%;
}
/* #green-room {
background: #333 !important;
} */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
#chair,
.chair-class {
position: absolute;
width: 100%;
height: auto;
max-width: 600px;
max-height: 400px;
margin: 0 auto;
display: block;
top: 0;
left: 0;
opacity: 0;
transition: opacity .5s;
}
.chair-class.active {
position: relative;
opacity: 1;
}
#prev {
position: absolute;
color: black;
left: 0;
top: 0;
bottom: 0;
}
#next {
position: absolute;
color: black;
right: 0;
top: 0;
bottom: 0;
}
#prev p,
#next p {
font-size: 3em;
}
#imgDetail {
position: relative;
width: 90%;
margin: 0 auto;
overflow: hidden;
}
#imgDetail a {
text-decoration: none;
display: flex;
padding: 3%;
justify-content: center;
align-items: center;
}
#imgDetail a:hover {
background-color: #333;
color: white;
opacity: 0.5;
}
#imgDetail ul {
margin: 0 auto;
display: block;
}
#thumbnails {
max-width: 1000px;
width: 100%;
display: inline-block;
text-align: center;
}
.thumb {
width: 21%;
height: auto;
margin-top: 15px;
cursor: pointer;
}
#imgDetail li {
display: inline;
}
#thumbnails ul {
margin: 0 auto;
display: block;
}
#thumbnails li {
display: inline;
padding-right: 2%;
}
#thumbnails li:last-child {
padding-right: 0;
}
.sketchfab-iframe {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 40vw;
}
.sketchfab-iframe {
opacity: 0;
margin: 0 auto;
transition: opacity .5s;
display: none;
}
.sketchfab-iframe.active {
opacity: 1;
position: relative;
display: block;
}
<script src="https://f.vimeocdn.com/js/froogaloop2.min.js"></script>
<script src="https://f.vimeocdn.com/js/froogaloop2.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Images not Owned by Me -->
<!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">
<title>Daniel Pollack</title>
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fitvids/1.2.0/jquery.fitvids.js">
</script>
</head>
<body id="green-room">
<div class="slideshow-container">
<div id="imgDetail">
<img data-iframe="sketchfab-iframe-1" src="https://i.vimeocdn.com/video/682901345_640.webp" class="chair-class" data-active="true" />
<img data-iframe="sketchfab-iframe-2" src="https://i.vimeocdn.com/video/682890362_640.webp" class="chair-class" data-active="false" />
<img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_3.jpg" class="chair-class" data-active="false" />
<div class="aspect-ratio">
<iframe id="sketchfab-iframe-1" class="sketchfab-iframe active" src="https://player.vimeo.com/video/255482396" width="100%" height="400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<div class="aspect-ratio">
<iframe id="sketchfab-iframe-2" class="sketchfab-iframe" src="https://player.vimeo.com/video/255473875" width="100%" height="400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<!--CONTROLS-->
<a href="javascript:void(0)" id="prev" class="prev-next-button previous">
<p>❬</p>
</a>
<a href="javascript:void(0)" id="next" class="prev-next-button next">
<p>❭</p>
</a>
</div>
<!--Thumbnails-->
<div id="thumbnails">
</div>
</html>
It's fixed by setting all the image height to 70vh.
Guess something is not working with StackOverflow Fiddle.
Check my codepen and let me know if that's what you are looking for.
$(document).ready(function() {
// get all images loaded
var images = $(".chair-class");
// thumbnails containers
var thumbnailContainer = $("#thumbnails");
var iframe1 = $('#sketchfab-iframe-1')[0];
var iframe2 = $('#sketchfab-iframe-2')[0];
var player1 = $f(iframe1);
var player2 = $f(iframe2);
// generate thumbnail images
generateThumbnails(images, thumbnailContainer);
// listeners for controls arrows
$(".prev-next-button").on("click", function() {
player1.api('pause');
player2.api('pause');
// get the images
var currentImageIndex = images.index($(".chair-class[data-active=true]"));
var isPrevious = $(this).hasClass("previous");
var nextIndex;
if (isPrevious) {
if (currentImageIndex === 0) {
nextIndex = images.length - 1;
}
if (currentImageIndex > 0) {
nextIndex = currentImageIndex - 1;
}
} else {
if (currentImageIndex === images.length - 1) {
nextIndex = 0;
}
if (currentImageIndex < images.length - 1) {
nextIndex = currentImageIndex + 1;
}
}
// remove any active class from images
images.removeClass("active").attr('data-active', "false");
// get the next active image and add active class to that next current image
var $nextImage = $(images[nextIndex]);
var iframeId = $nextImage.data('iframe');
if (iframeId) {
$(images[nextIndex]).attr('data-active', "true");
$('.sketchfab-iframe').removeClass('active');
$('#' + iframeId).addClass('active');
} else {
$(images[nextIndex]).addClass("active").attr('data-active', "true");
$('.sketchfab-iframe').removeClass('active');
}
});
$(".thumb").on("click", function(event) {
event.preventDefault();
var images = $(".chair-class");
var indexSelected = $(this).data("img-index");
var currentShown = images.index($(".chair-class[data-active=true]"));
if (currentShown === indexSelected) return false;
player1.api('pause');
player2.api('pause');
images.removeClass("active").attr('data-active', "false");
var iframeId = $(this).data('iframe');
if (iframeId) {
$(images[indexSelected]).attr('data-active', "true");
$('.sketchfab-iframe').removeClass('active');
$('#' + iframeId).addClass('active');
} else {
images.removeClass("active");
$(images[indexSelected]).addClass('active').attr('data-active', "true");;
$('.sketchfab-iframe').removeClass('active');
}
});
function generateThumbnails(images, container) {
var ul = $("<ul>");
images.each(function(index, element) {
var currentThumb = $("<img>");
var li = $("<li>");
var src = $(this).attr("src");
currentThumb.attr("src", src);
currentThumb.attr("class", "thumb");
currentThumb.data("img-index", index);
var iframe = $(this).data('iframe');
if (iframe) {
currentThumb.data("iframe", iframe);
}
li.append(currentThumb);
ul.append(li);
});
container.append(ul);
}
});
* {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
font-size: 100%;
}
/* #green-room {
background: #333 !important;
} */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
#chair,
.chair-class {
position: absolute;
width: auto;
height: 100%;
/* max-width: 600px;
max-height: 400px; */
margin: 0 auto;
display: block;
top: 0;
left: 0;
opacity: 0;
transition: opacity .5s;
}
.chair-class.active {
position: relative;
opacity: 1;
}
#prev {
position: absolute;
color: black;
left: 0;
top: 0;
bottom: 0;
}
#next {
position: absolute;
color: black;
right: 0;
top: 0;
bottom: 0;
}
#prev p,
#next p {
font-size: 3em;
}
#imgDetail {
position: relative;
width: 90%;
margin: 0 auto;
height: 70vh;
overflow: hidden;
}
#imgDetail img {
height: 70vh;
}
#imgDetail a {
text-decoration: none;
display: flex;
padding: 3%;
justify-content: center;
align-items: center;
}
#imgDetail a:hover {
background-color: #333;
color: white;
opacity: 0.5;
}
#imgDetail ul {
margin: 0 auto;
display: block;
}
#thumbnails {
max-width: 1000px;
display: inline-block;
text-align: center;
}
.thumb {
width: 21%;
height: auto;
margin-top: 15px;
cursor: pointer;
}
#imgDetail li {
display: inline;
}
#thumbnails ul {
margin: 0 auto;
display: block;
}
#thumbnails li {
display: inline;
padding-right: 2%;
}
#thumbnails li:last-child {
padding-right: 0;
}
.sketchfab-iframe {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
/* top:10vh; */
height: 70vh;
opacity: 0;
margin: 0 auto;
transition: opacity .5s;
display: none;
}
.sketchfab-iframe.active {
opacity: 1;
position: relative;
display: block;
}
<script src="https://f.vimeocdn.com/js/froogaloop2.min.js"></script>
<script src="https://f.vimeocdn.com/js/froogaloop2.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Images not Owned by Me -->
<body>
<div class="slideshow-container">
<div id="imgDetail">
<img data-iframe="sketchfab-iframe-1" src="https://i.vimeocdn.com/video/682901345_640.webp" class="chair-class" data-active="true" />
<img data-iframe="sketchfab-iframe-2" src="https://i.vimeocdn.com/video/682890362_640.webp" class="chair-class" data-active="false" />
<img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_3.jpg" class="chair-class" data-active="false" />
<div class="aspect-ratio">
<iframe id="sketchfab-iframe-1" class="sketchfab-iframe active" src="https://player.vimeo.com/video/255482396" width="100%" height="400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<div class="aspect-ratio">
<iframe id="sketchfab-iframe-2" class="sketchfab-iframe" src="https://player.vimeo.com/video/255473875" width="100%" height="400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<!--CONTROLS-->
<a href="javascript:void(0)" id="prev" class="prev-next-button previous">
<p>❬</p>
</a>
<a href="javascript:void(0)" id="next" class="prev-next-button next">
<p>❭</p>
</a>
</div>
<!--Thumbnails-->
<div id="thumbnails">
</div>
</div>
</body>
$(document).ready(function () {
// get all images loaded
var images = $(".chair-class");
// thumbnails containers
var thumbnailContainer = $("#thumbnails");
var iframe1 = $('#sketchfab-iframe-1')[0];
var iframe2 = $('#sketchfab-iframe-2')[0];
var player1 = $f(iframe1);
var player2 = $f(iframe2);
// generate thumbnail images
generateThumbnails(images, thumbnailContainer);
// listeners for controls arrows
$(".prev-next-button").on("click", function () {
player1.api('pause');
player2.api('pause');
// get the images
var currentImageIndex = images.index($(".chair-class[data-active=true]"));
var isPrevious = $(this).hasClass("previous");
var nextIndex;
if (isPrevious) {
if (currentImageIndex === 0) {
nextIndex = images.length - 1;
}
if (currentImageIndex > 0) {
nextIndex = currentImageIndex - 1;
}
} else {
if (currentImageIndex === images.length - 1) {
nextIndex = 0;
}
if (currentImageIndex < images.length - 1) {
nextIndex = currentImageIndex + 1;
}
}
// remove any active class from images
images.removeClass("active").attr('data-active', "false");
// get the next active image and add active class to that next current image
var $nextImage = $(images[nextIndex]);
var iframeId = $nextImage.data('iframe');
if (iframeId) {
$(images[nextIndex]).attr('data-active', "true");
$('.sketchfab-iframe').removeClass('active');
$('#' + iframeId).addClass('active');
} else {
$(images[nextIndex]).addClass("active").attr('data-active', "true");
$('.sketchfab-iframe').removeClass('active');
}
});
$(".thumb").on("click", function (event) {
event.preventDefault();
var images = $(".chair-class");
var indexSelected = $(this).data("img-index");
var currentShown = images.index($(".chair-class[data-active=true]"));
if (currentShown === indexSelected) return false;
player1.api('pause');
player2.api('pause');
images.removeClass("active").attr('data-active', "false");
var iframeId = $(this).data('iframe');
if (iframeId) {
$(images[indexSelected]).attr('data-active', "true");
$('.sketchfab-iframe').removeClass('active');
$('#' + iframeId).addClass('active');
} else {
images.removeClass("active");
$(images[indexSelected]).addClass('active').attr('data-active', "true");;
$('.sketchfab-iframe').removeClass('active');
}
});
function generateThumbnails(images, container) {
var ul = $("<ul>");
images.each(function (index, element) {
var currentThumb = $("<img>");
var li = $("<li>");
var src = $(this).attr("src");
currentThumb.attr("src", src);
currentThumb.attr("class", "thumb");
currentThumb.data("img-index", index);
var iframe = $(this).data('iframe');
if (iframe) {
currentThumb.data("iframe", iframe);
}
li.append(currentThumb);
ul.append(li);
});
container.append(ul);
}
});
* {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
font-size: 100%;
}
/* #green-room {
background: #333 !important;
} */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
#chair, .chair-class {
position: absolute;
width: 80%;
height: auto;
max-width: 600px;
max-height: 400px;
margin: 0 auto;
display: block;
top: 0;
left: 0;
right: 0;
opacity: 0;
transition: opacity .5s;
}
.chair-class.active {
position: relative;
opacity: 1;
}
#prev {
position: absolute;
color: black;
left: 0;
top: 0;
bottom: 0;
}
#next {
position: absolute;
color: black;
right: 0;
top: 0;
bottom: 0;
}
#prev p, #next p {
font-size: 3em;
}
#imgDetail {
position: relative;
width: 90%;
margin: 0 auto;
overflow: hidden;
}
#imgDetail a {
text-decoration: none;
display: flex;
padding: 3%;
justify-content: center;
align-items: center;
}
#imgDetail a:hover {
background-color: #333;
color: white;
opacity: 0.5;
}
#imgDetail ul {
margin: 0 auto;
display: block;
}
#thumbnails {
max-width: 1000px;
width: 100%;
display: inline-block;
text-align: center;
}
.thumb {
width: 21%;
height: 120px;
margin-top: 15px;
cursor: pointer;
}
#imgDetail li {
display: inline;
}
#thumbnails ul {
margin: 0 auto;
display: block;
}
#thumbnails li {
display: inline;
padding-right: 2%;
}
#thumbnails li:last-child {
padding-right: 0;
}
.sketchfab-iframe {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 40vw;
}
.sketchfab-iframe {
opacity: 0;
margin: 0 auto;
transition: opacity .5s;
display: none;
}
.sketchfab-iframe.active {
opacity: 1;
position: relative;
display: block;
}
<script src="https://f.vimeocdn.com/js/froogaloop2.min.js"></script>
<script src="https://f.vimeocdn.com/js/froogaloop2.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Images not Owned by Me -->
<!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">
<title>Daniel Pollack</title>
<link rel="stylesheet" type="text/css" href="css/styles.css"/>
<script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"> </script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> </script>
<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fitvids/1.2.0/jquery.fitvids.js">
</script>
</head>
<body id="green-room">
<div class="slideshow-container">
<div id="imgDetail">
<img data-iframe="sketchfab-iframe-1" src="https://i.vimeocdn.com/video/682901345_640.webp" class="chair-class" data-active="true" />
<img data-iframe="sketchfab-iframe-2" src="https://i.vimeocdn.com/video/682890362_640.webp" class="chair-class" data-active="false" />
<img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_3.jpg" class="chair-class" data-active="false" />
<div class="aspect-ratio">
<iframe id="sketchfab-iframe-1" class="sketchfab-iframe active" src="https://player.vimeo.com/video/255482396" width="100%" height="400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<div class="aspect-ratio">
<iframe id="sketchfab-iframe-2" class="sketchfab-iframe" src="https://player.vimeo.com/video/255473875" width="100%" height="400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<!--CONTROLS-->
<a href="javascript:void(0)" id="prev" class="prev-next-button previous">
<p>❬</p>
</a>
<a href="javascript:void(0)" id="next" class="prev-next-button next">
<p>❭</p>
</a>
</div>
<!--Thumbnails-->
<div id="thumbnails">
</div>
</html>

Turn button into scroll if statement

The following code initially loads more content when the bottom button is clicked but I need it to work when the scroll reach the bottom of the page... I've tried the code under the words //HERE IS THE PROBLEM// but it seems not to work.... any idea?
var lazyload = lazyload || {};
(function($, lazyload) {
"use strict";
var page = 2,
buttonId = "#button-more",
loadingId = "#loading-div",
container = "#container";
//HERE IS THE PROBLEM
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
lazyload.load = function() {
var url = "./" + page + ".html";
$(buttonId).hide();
$(loadingId).show();
$.ajax({
url: url,
success: function(response) {
if (!response || response.trim() == "NONE") {
$(buttonId).fadeOut();
$(loadingId).text("No more entries to load!");
return;
}
appendContests(response);
},
error: function(response) {
$(loadingId).text("Sorry, there was some error with the request. Please refresh the page.");
}
});
};
}
});
var appendContests = function(response) {
var id = $(buttonId);
$(buttonId).show();
$(loadingId).hide();
$(response).appendTo($(container));
page += 1;
};
})(jQuery, lazyload);
body{
background-color: #ccc;
margin: 0;
}
#wrapper{
width:100%;
margin: 0 auto;
min-height: 500px;
background-color: #e9e9e9;
color: #333;
padding: 10px;
text-align: center;
}
#data-container{
margin: 10px;
}
#data-container .data-item{
background-color: #444444;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding: 105px;
margin: 5px;
color: #fff;
}
#loading-div{
display: none;
}
#button-more{
cursor: pointer;
margin: 0 auto;
background-color: #aeaeae;
color: #fff;
width: 200px;
height: 50px;
line-height: 50px;
}
.child{
width:100%;
height:1000px;
background-color:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<h1>Lazy Load Demo</h1>
<div id="container">
<div class="child">
</div>
</div>
<div id="button-more" onclick="lazyload.load()">
Load more items
</div>
<div id="loading-div">
loading more items
</div>
</div>
let more = document.querySelector("button");
let show = document.querySelector(".show");
let loading = document.querySelector(".loading");
let bottom = document.querySelector(".bottom");
let allowAjax = true;
function getAjax(){
loading.classList.add("show");
if(allowAjax === true){
allowAjax = false;
let xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
let back = xhttp.response;
back = JSON.parse(back);
let imgSrc = back.results[0].picture.large;
let imgEl = document.createElement("img");
imgEl.src = imgSrc;
show.appendChild(imgEl);
loading.classList.remove("show");
allowAjax = true;
}
};
xhttp.open("GET", "https://randomuser.me/api/", true);
xhttp.send();
}
}
window.addEventListener("scroll",function(){
let scrollPos = window.pageYOffset;
let bottomPos = bottom.offsetTop;
if(bottomPos / 1.5 <= scrollPos){
// Almost to the bottom of the page
getAjax();
}
});
more.addEventListener("click",function(){
getAjax();
});
img{
display: block;
width: 30em;
height: 30em;
}
.more{
position: fixed;
top: 1em;
right: 5em;
background: skyblue;
color: #FFF;
padding: 0.5em;
border: none;
cursor: pointer;
outline: none;
}
.loading{
width: 10em;
height: 10em;
display: none;
position: fixed;
top: 5em;
right: 1em;
background: #212323;
padding: 0.5em;
}
.loading.show{
display: block;
}
.show img{
display: block;
width: 30em;
height: 30em;
}
<img src="https://unsplash.it/300/300/?random" />
<img src="https://unsplash.it/300/300/?random" />
<img src="https://unsplash.it/300/300/?random" />
<img src="https://unsplash.it/300/300/?random" />
<div class="show"></div>
<div class="bottom"></div>
<button class="more">More</button>
<img src="http://www.lettersmarket.com/uploads/lettersmarket/blog/loaders/common_metal/ajax_loader_metal_512.gif"class="loading">
initially loads

jQuery mouseenter and mouseleave handler not working properly

I have been trying desperately to solve my problem and I just don't find the mistake in my code. So what I am programming is a slider which works with jQuery and I had everything precisely as I wanted it but then I made some completely irrelevant changes and it didn't work any more. My issue is that (as you can see in the jsfiddle) the arrows to navigate the slider don't (always) show up. They only show up at the very end of the Interval (see jsfiddle). Am I doing something wrong with the .mouseenter and .mouseleave-handlers?
Would you recommend using the `.hover-handler?
Thanks in advance
JSFiddle: http://jsfiddle.net/VincentBS/ogm967bz
And if that helps: Here is the website the slider is programmed for
$(document).ready(function(){
hideArrows();
hideImages();
$(".back").click(function(){prevImage()});
$(".pre").click(function(){nextImage()});
$("#slider").mouseenter(function(){
//showArrows();
$(".back").show();
$(".pre").show();
})
$("#slider").mouseleave(function(){
//hideArrows();
$(".back").hide();
$(".pre") .hide();
})
start();
});
function hideArrows(){
$(".back").hide();
$(".pre") .hide();
}
function showArrows(){
$(".back").show();
$(".pre") .show();
}
function hideImages(){
$("#2").hide();
$("#3").hide();
$("#4").hide();
$("#5").hide();
}
function start(){
// save when we started for calculating progress
var startedAt = Date.now();
// set animation bounds
var startValue = 1;
var endValue = 100;
// figure out how much change we have over the whole animation
var delta = endValue - startValue;
// Animation function, to run at 60 fps.
t = setInterval(function(){
// How far are we into the animation, on a scale of 0 to 1.
var progress = (Date.now() - startedAt) / 5000;
// If we passed 1, the animation is over so clean up.
if (progress > 1) {
nextImage();
}
}, 1000 / 60);
}
function prevImage(){
var id = document.getElementsByClassName("activeslider")[0].id;
var next = parseInt(id) - 1;
if(next < 1){next = 5}
next = "#" + next.toString();
id = "#" + id.toString();
$(id).removeClass("activeslider").fadeOut();
$(next).addClass("activeslider").fadeIn();
clearInterval(t);
start();
}
function nextImage(){
var id = document.getElementsByClassName("activeslider")[0].id;
var next = parseInt(id) + 1;
if(next > 5){next = 1}
next = "#" + next.toString();
id = "#" + id.toString();
$(id).removeClass("activeslider").fadeOut();
$(next).addClass("activeslider").fadeIn();
clearInterval(t);
start();
}
#slider {
float: left;
width: 700px;
height: 233px;
}
.back, .pre {
background-color: #EB5A00;
opacity: 1;
margin-top: 92px;
color: #FFF;
font-size: 25px;
text-align: center;
padding: 12.5px 7.5px;
cursor: pointer;
z-index: 1001;
}
.back {
float: left;
margin-left: 10px;
}
.pre {
float: right;
margin-right: 10px;
}
#slider, .back, .pre {
-webkit-user-drag: none;
-moz-user-select: none;
user-drag: none;
}
.sliderimage {
width: 100%;
}
#slider img {
position: absolute;
width: 700px;
-webkit-user-drag: none;
-moz-user-select: none;
user-drag: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="slider">
<img class="sliderimage activeslider" src="http://dev.hvgg.de/file_upload/data15749.jpg" id="1" />
<img class="sliderimage" src="http://dev.hvgg.de/file_upload/data15750.jpg" id="2" />
<img class="sliderimage" src="http://dev.hvgg.de/file_upload/data15751.jpg" id="3" />
<img class="sliderimage" src="http://dev.hvgg.de/file_upload/data15752.jpg" id="4" />
<img class="sliderimage" src="http://dev.hvgg.de/file_upload/data15753.jpg" id="5" />
<span class="back">◀</span>
<span class="pre">▶</span>
</div>
Position problem I have change some css property
#slider {
float: left;
width: 700px;
height: 233px;
position: relative;
}
.back, .pre {
background-color: #EB5A00;
opacity: 1;
color: #FFF;
font-size: 25px;
position: absolute;
text-align: center;
padding: 12.5px 7.5px;
cursor: pointer;
z-index: 1001;
}
.back {
left: 0;
margin-left: 10px;
top: 50%;
}
.pre {
margin-right: 10px;
right: 0;
top: 50%;
}
#slider, .back, .pre {
-webkit-user-drag: none;
-moz-user-select: none;
user-drag: none;
}
.sliderimage {
width: 100%;
}
#slider img {
position: absolute;
width: 700px;
-webkit-user-drag: none;
-moz-user-select: none;
user-drag: none;
}
http://jsfiddle.net/ogm967bz/1/
I have tweaked your CSS a bit of .back, .pre
$(document).ready(function(){
hideArrows();
hideImages();
$(".back").click(function(){prevImage()});
$(".pre").click(function(){nextImage()});
$("#slider").mouseenter(function(){
//showArrows();
$(".back").show();
$(".pre").show();
})
$("#slider").mouseleave(function(){
//hideArrows();
$(".back").hide();
$(".pre") .hide();
})
start();
});
function hideArrows(){
$(".back").hide();
$(".pre") .hide();
}
function showArrows(){
$(".back").show();
$(".pre") .show();
}
function hideImages(){
$("#2").hide();
$("#3").hide();
$("#4").hide();
$("#5").hide();
}
function start(){
// save when we started for calculating progress
var startedAt = Date.now();
// set animation bounds
var startValue = 1;
var endValue = 100;
// figure out how much change we have over the whole animation
var delta = endValue - startValue;
// Animation function, to run at 60 fps.
t = setInterval(function(){
// How far are we into the animation, on a scale of 0 to 1.
var progress = (Date.now() - startedAt) / 5000;
// If we passed 1, the animation is over so clean up.
if (progress > 1) {
nextImage();
}
}, 1000 / 60);
}
function prevImage(){
var id = document.getElementsByClassName("activeslider")[0].id;
var next = parseInt(id) - 1;
if(next < 1){next = 5}
next = "#" + next.toString();
id = "#" + id.toString();
$(id).removeClass("activeslider").fadeOut();
$(next).addClass("activeslider").fadeIn();
clearInterval(t);
start();
}
function nextImage(){
var id = document.getElementsByClassName("activeslider")[0].id;
var next = parseInt(id) + 1;
if(next > 5){next = 1}
next = "#" + next.toString();
id = "#" + id.toString();
$(id).removeClass("activeslider").fadeOut();
$(next).addClass("activeslider").fadeIn();
clearInterval(t);
start();
}
#slider {
float: left;
width: 700px;
height: 233px;
}
.back, .pre {
background-color: #EB5A00;
opacity: 1;
top: 92px; /* Chnages here */
color: #FFF;
font-size: 25px;
text-align: center;
padding: 12.5px 7.5px;
cursor: pointer;
z-index: 1001;
position:absolute; /* Chnages here */
}
.back {
float: left;
left: 10px; /* Chnages here */
}
.pre {
float: right;
right: 10px; /* Chnages here */
}
#slider, .back, .pre {
-webkit-user-drag: none;
-moz-user-select: none;
user-drag: none;
}
.sliderimage {
width: 100%;
}
#slider img {
position: absolute;
width: 700px;
-webkit-user-drag: none;
-moz-user-select: none;
user-drag: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="slider">
<img class="sliderimage activeslider" src="http://dev.hvgg.de/file_upload/data15749.jpg" id="1" />
<img class="sliderimage" src="http://dev.hvgg.de/file_upload/data15750.jpg" id="2" />
<img class="sliderimage" src="http://dev.hvgg.de/file_upload/data15751.jpg" id="3" />
<img class="sliderimage" src="http://dev.hvgg.de/file_upload/data15752.jpg" id="4" />
<img class="sliderimage" src="http://dev.hvgg.de/file_upload/data15753.jpg" id="5" />
<span class="back">◀</span>
<span class="pre">▶</span>
</div>
Refer : http://jsfiddle.net/ogm967bz/8/
add the following css in the file
position:relative;
under the
.back, .pre {
background-color: #EB5A00;
opacity: 1;
margin-top: 92px;
color: #FFF;
font-size: 25px;
text-align: center;
padding: 12.5px 7.5px;
cursor: pointer;
z-index: 1001;
cursor: pointer;
position:relative;
}

Categories