I want to create infinite object slider, which array 0 will go back to 24. There will be 25 picture that moving and changing shape when a left or right button clicked.
Why, array of 14 is numbArr[2]; number will reduce to minus and so on. meanwhile, inside function, 14 is i, number will stay 24 forever.
edit. (sorry if I use confusing variables name, to make it easy to understand:
let eleven = is counter for eleven post (second left from middle)
let twelve = is counter for twelve post (left from middle)
let thirteen = is counter for thirteen post (middle)
let fourteen = is counter for fourteen post (right from middle)
let fifteen = is counter for fifteen post (second right from middle)
).
Example of the website
//
// Infinite Slider Button
//
const slrdBtnBefore = document.getElementById(`sldr-btn-before`);
const sldrBtnAfter = document.getElementById(`sldr-btn-after`);
//
// Infinite Slider classList
//
const bbleCont = [`one-cont`, `two-cont`, `three-cont`, `four-cont`, `five-cont`, `six-cont`, `seven-cont`, `eight-cont`, `nine-cont`, `ten-cont`, `eleven-cont`, `twelve-cont`, `thirteen-cont`, `fourteen-cont`, `fifteen-cont`, `sixteen-cont`, `seventeen-cont`, `eighteen-cont`, `nineteen-cont`, `twenty-cont`, `twentyone-cont`, `twentytwo-cont`, `twentythree-cont`, `twentyfour-cont`, `twentyfive-cont`];
// console.log(bbleCont);
const bbleNumb = [`bble-one`, `bble-two`, `bble-three`, `bble-four`, `bble-five`, `bble-six`, `bble-seven`, `bble-eight`, `bble-nine`, `bble-ten`, `bble-eleven`, `bble-twelve`, `bble-thirteen`, `bble-fourteen`, `bble-fifteen`, `bble-sixteen`, `bble-seventeen`, `bble-eighteen`, `bble-nineteen`, `bble-twenty`, `bble-twentyone`, `bble-twentytwo`, `bble-twentythree`, `bble-twentyfour`, `bble-twentyfive`];
// console.log(bbleNumb);
//
// Infinite Slider Variable
//
const contS = document.querySelectorAll(`.bble-cont`);
//console.log(contS.length);
const bubbS = document.querySelectorAll(`.bble-basic`);
// console.log(bubbS);
//
// Number (Important!)
//
let twelve = 11;
let thirteen = 12;
let fourteen = 13;
//
// addEventListener
//
slrdBtnBefore.addEventListener(`click`, () => {
fourteen--;
const numbArr = [twelve, thirteen, fourteen];
console.log(`array of 14 is `, numbArr[2]);
function exeC(numb, index, filter, keyword) {
const e = contS[index];
const f = bubbS[index];
const g = numb - 1;
const h = numb + 1;
let i = numbArr[keyword];
if (i < 0) {
i = contS.length - 1;
} else if (i > contS.length - 1) {
i = 0;
}
console.log(numb);
console.log(`inside function, 14 is `, i);
e.classList.add(bbleCont[i]);
f.classList.add(bbleNumb[i]);
if (filter == 1) {
e.classList.remove(bbleCont[h]);
f.classList.remove(bbleNumb[h]);
} else {
e.classList.remove(bbleCont[g]);
f.classList.remove(bbleNumb[g]);
}
}
exeC(fourteen, 13, 1, 2);
});
#import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght#0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
:root {
--test-background: rgba(0, 0, 0, 0.5);
--main-font: 'Lato', sans-serif;
}
*,::before,::after {
box-sizing: border-box;
}
h1, h2, h3, h4, h5, h6, p {
margin: 0px;
padding: 0px;
}
img {
display: block;
width: 100%;
object-fit: cover;
}
body {
margin: 0px;
padding: 0px;
position: relative;
background: url(./assets/csgo-wallpaper.png) center/cover fixed no-repeat;
z-index: 0;
}
/*
Header
*/
header {
background: rgba(0, 0, 0, 0.65);
height: 100vh;
width: 100vw;
}
.h-container {
/* background: red; */
height: 100%;
display: grid;
place-items: center;
}
/*
Page Startup
Animation
*/
.h-load {
background: rgba(0, 0, 0, 1);
height: 100%;
width: 100%;
display: grid;
place-items: center;
z-index: 5;
}
.trigger-one {
/* transition: all 1.5s ease-out 1.5s; */
background: transparent;
}
.h-load-bble {
padding: 4.5rem;
height: 750px;
width: 750px;
border: transparent;
border-radius: 50%;
display: grid;
place-items: center;
}
.trigger-two {
transform: skewX(20deg);
/* transition: all 1.5s ease-out 1.5s, border-radius 0s; */
padding: 4.5rem;
height: 500px;
width: 500px;
border-top: 1.5px solid rgba(255, 255, 255, 0.5);
border-bottom: 4.5px solid rgba(0, 0, 0, 0.5);
border-radius: 50%;
box-shadow: -10px 15px 20px 0px rgba(255, 255, 255, 0.25), -20px 30px 20px 5px rgba(255, 255, 255, 0.25), -30px 50px 30px 25px rgba(0, 0, 0, 0.5);
display: grid;
place-items: center;
}
.trigger-three {
display: none;
}
/*
Infinte Slider
Teams
*/
.h-sldr {
/* background: red; */
height: 500px;
width: 100%;
display: flex;
place-items: center;
}
/*
Infinter Slider
Button
*/
.sldr-btn {
cursor: pointer;
margin: 0px;
padding: 0px;
background: transparent;
border: transparent;
width: 4vw;
z-index: 10;
}
.sldr-btn i {
transition: all 0.3s ease-in-out;
margin: 0px;
padding: 0px;
font-size: 7.5rem;
color: rgba(255, 255, 255, 0.65);
}
.sldr-btn i:hover {
color: rgba(255, 255, 255, 1);
}
/*
Infinite Slider
Track
*/
.sldr-track {
/* background: var(--test-background); */
height: 75vh;
width: 92vw;
overflow: hidden;
position: relative;
}
/*
Infinite Slider
Teams
*/
.bble-cont {
/* background: red; */
margin: 0px;
padding: 0px;
height: auto;
width: auto;
transition: all 0.5s ease-out;
}
.bble-basic {
margin: 0px;
padding: 0px;
transition: all 0.5s ease-out;
/* background: red; */
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(3px);
display: flex;
place-items: center;
border: 0px solid transparent;
border-radius: 50%;
}
.one-cont {
top: -15%;
left: 35%;
transform: translate(-50%, -50%);
position: absolute;
z-index: 2;
}
.bble-one {
padding: 1.75rem;
height: 90px;
width: 90px;
filter: blur(2px);
}
.two-cont {
top: -15%;
left: 15%;
transform: translate(-50%, -50%);
position: absolute;
z-index: 2;
}
.bble-two {
padding: 1.75rem;
height: 90px;
width: 90px;
filter: blur(2px);
}
.three-cont {
top: -15%;
left: -5%;
transform: translate(-50%, -50%);
position: absolute;
z-index: 2;
}
.bble-three {
padding: 1.75rem;
height: 90px;
width: 90px;
filter: blur(2px);
}
.four-cont {
top: 50%;
left: -5%;
transform: translate(-50%, -50%);
position: absolute;
z-index: 2;
}
.bble-four {
padding: 1.75rem;
height: 90px;
width: 90px;
filter: blur(2px);
}
.five-cont {
top: 50%;
left: 0%;
transform: translate(0%, -50%);
position: absolute;
z-index: 2;
}
.bble-five {
padding: 1.75rem;
height: 90px;
width: 90px;
filter: blur(2px);
}
.six-cont {
top: 50%;
left: 3.25%;
transform: translate(-50%, -50%);
position: absolute;
z-index: 3;
}
.bble-six {
padding: 1.75rem;
height: 105px;
width: 105px;
filter: blur(2px);
}
.seven-cont {
top: 50%;
left: 5%;
transform: translate(-50%, -50%);
position: absolute;
z-index: 4;
}
.bble-seven {
padding: 2.25rem;
height: 120px;
width: 120px;
filter: blur(2px);
}
.eight-cont {
top: 50%;
left: 7.5%;
transform: translate(-50%, -50%);
position: absolute;
z-index: 5;
}
.bble-eight {
padding: 2.25rem;
height: 135px;
width: 135px;
filter: blur(2px);
}
.nine-cont {
top: 50%;
left: 10%;
transform: translate(-50%, -50%);
position: absolute;
z-index: 6;
}
.bble-nine {
padding: 2.25rem;
height: 150px;
width: 150px;
filter: blur(2px);
}
.ten-cont {
top: 50%;
left: 15.5%;
transform: translate(-50%, -50%);
position: absolute;
z-index: 7;
}
.bble-ten {
padding: 3rem;
height: 225px;
width: 225px;
filter: blur(2px);
}
.eleven-cont {
top: 50%;
left: 24%;
transform: translate(-50%, -50%);
position: absolute;
z-index: 8;
}
.bble-eleven {
padding: 3.5rem;
height: 275px;
width: 275px;
filter: blur(2px);
}
.twelve-cont {
top: 50%;
left: 35%;
transform: translate(-50%, -50%);
position: absolute;
z-index: 9;
}
.bble-twelve {
padding: 4.5rem;
height: 350px;
width: 350px;
filter: blur(2px);
}
.thirteen-cont {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
z-index: 10;
}
.bble-thirteen {
transform: skewX(20deg);
padding: 5rem;
height: 500px;
width: 500px;
box-shadow: -10px 15px 20px 0px rgba(255, 255, 255, 0.25), -20px 30px 30px 5px rgba(255, 255, 255, 0.25), -30px 50px 30px 25px rgba(0, 0, 0, 0.5);
border-top: 1.5px solid rgba(255, 255, 255, 0.5);
border-bottom: 4.5px solid rgba(0, 0, 0, 0.5);
}
.bble-thirteen:hover {
transition: all 0.5s ease-in-out;
transform: skewX(0deg);
box-shadow: none;
border-top: 0px solid transparent;
border-bottom: 0px solid transparent;
}
.fourteen-cont {
top: 50%;
left: 65%;
transform: translate(-50%, -50%);
position: absolute;
z-index: 9;
}
.bble-fourteen {
padding: 4.5rem;
height: 350px;
width: 350px;
filter: blur(2px);
}
.fifteen-cont {
top: 50%;
left: 76%;
transform: translate(-50%, -50%);
position: absolute;
z-index: 8;
}
.bble-fifteen {
padding: 4.5rem;
height: 275px;
width: 275px;
filter: blur(2px);
}
.sixteen-cont {
top: 50%;
left: 84.5%;
transform: translate(-50%, -50%);
position: absolute;
z-index: 7;
}
.bble-sixteen {
padding: 3rem;
height: 225px;
width: 225px;
filter: blur(2px);
}
.seventeen-cont {
top: 50%;
left: 90%;
transform: translate(-50%, -50%);
position: absolute;
z-index: 6;
}
.bble-seventeen {
padding: 2.25rem;
height: 150px;
width: 150px;
filter: blur(2px);
}
.eighteen-cont {
top: 50%;
left: 92.5%;
transform: translate(-50%, -50%);
position: absolute;
z-index: 5;
}
.bble-eighteen {
padding: 2.25rem;
height: 135px;
width: 135px;
filter: blur(2px);
}
.nineteen-cont {
top: 50%;
left: 95%;
transform: translate(-50%, -50%);
position: absolute;
z-index: 4;
}
.bble-nineteen {
padding: 2.25rem;
height: 120px;
width: 120px;
filter: blur(2px);
}
.twenty-cont {
top: 50%;
left: 96.75%;
transform: translate(-50%, -50%);
position: absolute;
z-index: 3;
}
.bble-twenty {
padding: 1.75rem;
height: 105px;
width: 105px;
filter: blur(2px);
}
.twentyone-cont {
top: 50%;
left: 100%;
transform: translate(0%, -50%);
position: absolute;
z-index: 2;
}
.bble-twentyone {
padding: 1.75rem;
height: 90px;
width: 90px;
filter: blur(2px);
}
.twentytwo-cont {
top: 50%;
left: 105%;
transform: translate(-50%, -50%);
position: absolute;
z-index: 2;
}
.bble-twentytwo {
padding: 1.75rem;
height: 90px;
width: 90px;
filter: blur(2px);
}
.twentythree-cont {
top: -15%;
left: 105%;
transform: translate(-50%, -50%);
position: absolute;
z-index: 2;
}
.bble-twentythree {
padding: 1.75rem;
height: 90px;
width: 90px;
filter: blur(2px);
}
.twentyfour-cont {
top: -15%;
left: 85%;
transform: translate(-50%, -50%);
position: absolute;
z-index: 2;
}
.bble-twentyfour {
padding: 1.75rem;
height: 90px;
width: 90px;
filter: blur(2px);
}
.twentyfive-cont {
top: -15%;
left: 65%;
transform: translate(-50%, -50%);
position: absolute;
z-index: 2;
}
.bble-twentyfive {
padding: 1.75rem;
height: 90px;
width: 90px;
filter: blur(2px);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PGL Major Stockholm 2021</title>
<!-- Website Logo -->
<link rel="shortcut icon" href="./assets/PGL-Major.png" type="image/x-icon">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" />
<!-- Main CSS -->
<link rel="stylesheet" href="./main.css">
</head>
<body>
<header>
<div class="h-container">
<div id="load-bckgrnd" class="h-load trigger-three">
<div id="load-objct" class="h-load-bble">
<img src="./assets/PGL-Major.png" alt="PGL Stockhom Major 2021.png">
</div>
</div>
<div class="h-sldr">
<button id="sldr-btn-before" class="sldr-btn">
<i class="fas fa-caret-left"></i>
</button>
<div class="sldr-track">
<div id="container" class="bble-cont one-cont">
<div id="bubble" class="bble-basic bble-one">
<img src="./assets/Mouz.png" alt="MOUZ.png">
</div>
</div>
<div id="container" class="bble-cont two-cont">
<div id="bubble" class="bble-basic bble-two">
<img src="./assets/Team-Liquid.png" alt="Team Liquid.png">
</div>
</div>
<div id="container" class="bble-cont three-cont">
<div id="bubble" class="bble-basic bble-three">
<img src="./assets/Evil-Geniuses.png" alt="Evil Geniuses.png">
</div>
</div>
<div id="container" class="bble-cont four-cont">
<div id="bubble" class="bble-basic bble-four">
<img src="./assets/ENCE.png" alt="ENCE.png">
</div>
</div>
<div id="container" class="bble-cont five-cont">
<div id="bubble" class="bble-basic bble-five">
<img src="./assets/BIG.png" alt="BIG.png">
</div>
</div>
<div id="container" class="bble-cont six-cont">
<div id="bubble" class="bble-basic bble-six">
<img src="./assets/Team-Spirit.png" alt="Team Spirit.png">
</div>
</div>
<div id="container" class="bble-cont seven-cont">
<div id="bubble" class="bble-basic bble-seven">
<img src="./assets/Movistar-Riders.png" alt="Movistar Riders.png">
</div>
</div>
<div id="container" class="bble-cont eight-cont">
<div id="bubble" class="bble-basic bble-eight">
<img src="./assets/paiN-Gaming.png" alt="paiN Gaming.png">
</div>
</div>
<div id="container" class="bble-cont nine-cont">
<div id="bubble" class="bble-basic bble-nine">
<img src="./assets/Renegades.png" alt="Renegades.png">
</div>
</div>
<div id="container" class="bble-cont ten-cont">
<div id="bubble" class="bble-basic bble-ten">
<img src="./assets/TYLOO.png" alt="GODSENT.png">
</div>
</div>
<div id="container" class="bble-cont eleven-cont">
<div id="bubble" class="bble-basic bble-eleven">
<img src="./assets/GODSENT.png" alt="GODSENT.png">
</div>
</div>
<div id="container" class="bble-cont twelve-cont">
<div id="bubble" class="bble-basic bble-twelve">
<img src="./assets/Sharks-Esports.png" alt="Sharks Esports.png">
</div>
</div>
<div id="container" class="bble-cont thirteen-cont">
<div id="bubble" class="bble-basic bble-thirteen">
<img src="./assets/PGL-Major.png" alt="PGL Stoclholm Major 2021.png">
</div>
</div>
<div id="container" class="bble-cont fourteen-cont">
<div id="bubble" class="bble-basic bble-fourteen">
<img src="./assets/Natus-Vincere.png" alt="Natus Vincere.png">
</div>
</div>
<div id="container" class="bble-cont fifteen-cont">
<div id="bubble" class="bble-basic bble-fifteen">
<img src="./assets/G2-Esports.png" alt="G2 Esports.png">
</div>
</div>
<div id="container" class="bble-cont sixteen-cont">
<div id="bubble" class="bble-basic bble-sixteen">
<img src="./assets/Gambit-Esports.png" alt="Gambit Esports.png">
</div>
</div>
<div id="container" class="bble-cont seventeen-cont">
<div id="bubble" class="bble-basic bble-seventeen">
<img src="./assets/Heroic.png" alt="Heroic.png">
</div>
</div>
<div id="container" class="bble-cont eighteen-cont">
<div id="bubble" class="bble-basic bble-eighteen">
<img src="./assets/Team-Vitality.png" alt="Team Vitality.png">
</div>
</div>
<div id="container" class="bble-cont nineteen-cont">
<div id="bubble" class="bble-basic bble-nineteen">
<img src="./assets/FURIA-Esports.png" alt="FURIA Esports.png">
</div>
</div>
<div id="container" class="bble-cont twenty-cont">
<div id="bubble" class="bble-basic bble-twenty">
<img src="./assets/Virtus-pro.png" alt="Virtus Pro.png">
</div>
</div>
<div id="container" class="bble-cont twentyone-cont">
<div id="bubble" class="bble-basic bble-twentyone">
<img src="./assets/Ninja-in-Pyjamas.png" alt="Ninja in Pyjamas.png">
</div>
</div>
<div id="container" class="bble-cont twentytwo-cont">
<div id="bubble" class="bble-basic bble-twentytwo">
<img src="./assets/Entropiq.png" alt="Entropiq.png">
</div>
</div>
<div id="container" class="bble-cont twentythree-cont">
<div id="bubble" class="bble-basic bble-twentythree">
<img src="./assets/Coppenhagen-Flames.png" alt="Coppenhagen Flames.png">
</div>
</div>
<div id="container" class="bble-cont twentyfour-cont">
<div id="bubble" class="bble-basic bble-twentyfour">
<img src="./assets/FaZe-Clan.png" alt="FaZe Clan.png">
</div>
</div>
<div id="container" class="bble-cont twentyfive-cont">
<div id="bubble" class="bble-basic bble-twentyfive">
<img src="./assets/Astralis.png" alt="Astralis.png">
</div>
</div>
</div>
<button id="sldr-btn-after" class="sldr-btn">
<i class="fas fa-caret-right"></i>
</button>
</div>
</div>
</div>
</header>
<!-- Java Script -->
<script src="./app.js"></script>
</body>
</html>
I'm working on a page where the user can scroll down. The scroll bar is hidden but functional (pushed to the side with inner&outer divs and "right: -17px;").
In this forum I saw some scroll-disappear solutions, but only in jQuery, but I want to learn pure/vanilla JavaScript before I use any library.
I tried to write my own simple JS code. It worked for the first when I haven't hide the scrollbar, seems I have to change something in the JS code.
Here is my code: (I also created a snippet below to simulate):
window.addEventListener("scroll", scrollEffectOne);
function scrollEffectOne()
{
var hidethis = document.getElementById("box");
hidethis.style.opacity = "0.1";
}
*
{
margin: 0px;
padding: 0px;
font-family: Arial;
}
#outer
{
height: 100%;
width: 100%;
overflow: hidden;
position: absolute;
}
#inner
{
top: 0px;
right: -17px;
bottom: 0px;
left: 0px;
position: absolute;
overflow-x: hidden;
}
#frame_1
{
top: 0px;
height: 100%;
width: 100%;
position: absolute;
background-image: linear-gradient(-225deg, #22E1FF 0%, #1D8FE1 48%, #625EB1 100%);
}
#frame_2
{
top: 100%;
height: 100%;
width: 100%;
position: absolute;
background-image: linear-gradient(-225deg, #D4FFEC 0%, #57F2CC 48%, #4596FB 100%);
}
#frame_3
{
top: 200%;
height: 100%;
width: 100%;
position: absolute;
background-image: linear-gradient(-225deg, #473B7B 0%, #3584A7 51%, #30D2BE 100%);
}
#box
{
width: 350px;
height: 100px;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
position: absolute;
background-color: rgba(0,0,0,.3);
border-radius: 10px;
opacity: 1;
}
#box a
{
opacity: 1;
font-size: 15px;
color: white;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
position: absolute;
}
#box b
{
color: rgba(255,255,255,.3);
}
<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
<meta charset="UTF-8"/>
</head>
<body>
<div id="outer">
<div id="inner">
<div id="frame_1">
<div id="box">
<a>Hide Me <b>while scrolling</b> !</a>
</div>
</div>
<div id="frame_2"></div>
<div id="frame_3"></div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
<meta charset="UTF-8"/>
</head>
<body>
<div id="outer">
<div id="inner">
<div id="frame_1">
<div id="box">
<a>Hide Me <b>while scrolling</b> !</a>
</div>
</div>
<div id="frame_2"></div>
<div id="frame_3"></div>
</div>
</div>
</body>
<style>
*
{
margin: 0px;
padding: 0px;
font-family: Arial;
}
#outer
{
height: 100%;
width: 100%;
overflow: hidden;
position: absolute;
}
#inner
{
top: 0px;
right: -17px;
bottom: 0px;
left: 0px;
position: absolute;
overflow-x: hidden;
}
#frame_1
{
top: 0px;
height: 100%;
width: 100%;
position: absolute;
background-image: linear-gradient(-225deg, #22E1FF 0%, #1D8FE1 48%, #625EB1 100%);
}
#frame_2
{
top: 100%;
height: 100%;
width: 100%;
position: absolute;
background-image: linear-gradient(-225deg, #D4FFEC 0%, #57F2CC 48%, #4596FB 100%);
}
#frame_3
{
top: 200%;
height: 100%;
width: 100%;
position: absolute;
background-image: linear-gradient(-225deg, #473B7B 0%, #3584A7 51%, #30D2BE 100%);
}
#box
{
width: 350px;
height: 100px;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
position: absolute;
background-color: rgba(0,0,0,.3);
border-radius: 10px;
opacity: 1;
}
#box a
{
opacity: 1;
font-size: 15px;
color: white;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
position: absolute;
}
#box b
{
color: rgba(255,255,255,.3);
}
</style>
<script>
window.addEventListener("scroll", scrollEffectOne);
function scrollEffectOne()
{
var hidethis = document.getElementById("box");
hidethis.style.opacity = "0.1";
}
</script>
</html>
Your code looks right but it didnt work until i changed the useCapture option to true. To be honest, I dont know why it has do be true.
window.addEventListener("scroll", scrollEffectOne, true);
Read more that about here: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
JSFiddle: https://jsfiddle.net/d34pksmn/1/
HTML:
<div style="overflow: hidden; width: 100%; position: relative; height: 165px; background: #00AC00;">
<div class="dvSli" style="width: 100%; height: 100%; overflow: hidden; position: absolute; z-index: 4;">
</div>
<div style="overflow: visible; position: absolute; left: 2%; top: 75px; z-index: 10; padding: 10px;">
<span id="arrow-left"></span>
</div>
<div style="overflow: visible; position: absolute; right: 0; top: 75px; z-index: 10;">
<span id="arrow-right"></span>
</div>
<div style="overflow: hidden; height: 40px; width: 100%; text-align: center;">
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
<!-- Generate a letter for each occurance in `dCon` class DIV -->
</div>
<div class="dCon" style="overflow: auto; width: 6000000%; height: 125px;">
<div style="display: inline-block; width: 115px; height: 125px; background: #FF0000; position: relative; z-index: 3;">
ONE
</div>
<div style="display: inline-block; width: 115px; height: 125px; background: #FF0000; position: relative; z-index: 3;">
TWO
</div>
<div style="display: inline-block; width: 115px; height: 125px; background: #FF0000; position: relative; z-index: 3;">
THREE
</div>
<div style="display: inline-block; width: 115px; height: 125px; background: #FF0000; position: relative; z-index: 3;">
FOUR
</div>
<div style="display: inline-block; width: 115px; height: 125px; background: #FF0000; position: relative; z-index: 3;">
FIVE
</div>
<div style="display: inline-block; width: 115px; height: 125px; background: #FF0000; position: relative; z-index: 3;">
SIX
</div>
<div style="display: inline-block; width: 115px; height: 125px; background: #FF0000; position: relative; z-index: 3;">
SEVEN
</div>
<div style="display: inline-block; width: 115px; height: 125px; background: #FF0000; position: relative; z-index: 3;">
EIGHT
</div>
<div style="display: inline-block; width: 115px; height: 125px; background: #FF0000; position: relative; z-index: 3;">
NINE
</div>
<div style="display: inline-block; width: 115px; height: 125px; background: #FF0000; position: relative; z-index: 3;">
TEN
</div>
</div>
</div>
How can I modify my HTML/CSS/JQuery so:
Clicking on left/right arrow will slide each DIV inside the dCon
class parent div, left if left is clicked and right if right is
clicked.
I wanted to achieve the image carousel without the use of any plugins.
I'm not 100% certain what you're asking for in part 2, can you be a bit more specific?
For the first part, here's an easy solution:
$(function() {
$("#arrow-left").click(function() {
$(".dCon div:first-child").appendTo(".dCon");
$(".dCon").remove(".dCon div:first-child");
});
$("#arrow-right").click(function() {
$(".dCon div:last-child").prependTo(".dCon");
$(".dCon").remove(".dCon div:last-child");
});
});
and the updated fiddle: https://jsfiddle.net/JSnoobDC16/d34pksmn/6/
I want to give a sliding effect using left and right DIVs when user clicks in the middle DIV(blue). But it's not working.
The script code is not working. I think there is some error.
When I used hover in my stylesheet it also didn't work. I mean that I used hover on id inner/outer/power which will change css property of id left and right to create a sliding transition effect. But it didn't work. But when I used container to be hovered instead of the above ids then sliding effect was working. I'm totally depressed as it's not making any sense to me.
<script type="text/javascript" >
function slide()
{
document.getElementById("left").style.left = -100% ;
document.getElementById("right").style.right = -100% ;
}
</script>
html,body{
height: 100%;
width: 100%;
margin: 0;
max-width: 100%;
overflow-x: hidden;
}
#container {
height: 100%;
width: 100%;
margin: 0;
position: absolute;
}
#left {
left: 0px;
margin-left: 0%;
position: absolute;
height: 100%;
width: 50%;
background-color: yellow;
transition: left ease-out 3s;
}
#right {
right: 0px;
margin-left: 50%;
position: absolute;
height: 100%;
width: 50%;
background-color: green;
transition: right ease-out 3s;
}
#outer{
z-index: 5;
margin-left: 47.5%;
margin-top: 25%;
width: 5%;
position: absolute;
}
#inner {
z-index: 5;
width: 100%;
height: 100%;
padding-bottom: 100%;
border-radius: 50%;
background-color: blue;
}
#power {
z-index: 5;
position: absolute;
width: 100%;
height: 100%;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="design.css">
<title></title>
</head>
<body>
<div id="container">
<div id="outer">
<div id="inner" >
<a href="javascript:slide()">
<img id="power" src="off.png">
</a>
</div>
</div>
<div id="left"></div>
<div id="right"></div>
</div>
</body>
</html>
The value for your CSS effect needs to be in quotations.
function slide()
{
document.getElementById("left").style.left = "-100%";
document.getElementById("right").style.right = "-100%" ;
}
html,body{
height: 100%;
width: 100%;
margin: 0;
max-width: 100%;
overflow-x: hidden;
}
#container {
height: 100%;
width: 100%;
margin: 0;
position: absolute;
}
#left {
left: 0px;
margin-left: 0%;
position: absolute;
height: 100%;
width: 50%;
background-color: yellow;
transition: left ease-out 3s;
}
#right {
right: 0px;
margin-left: 50%;
position: absolute;
height: 100%;
width: 50%;
background-color: green;
transition: right ease-out 3s;
}
#outer{
z-index: 5;
margin-left: 47.5%;
margin-top: 25%;
width: 5%;
position: absolute;
}
#inner {
z-index: 5;
width: 100%;
height: 100%;
padding-bottom: 100%;
border-radius: 50%;
background-color: blue;
}
#power {
z-index: 5;
position: absolute;
width: 100%;
height: 100%;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="design.css">
<title></title>
</head>
<body>
<div id="container">
<div id="outer">
<div id="inner" >
<a href="javascript:slide()">
<img id="power" src="off.png">
</a>
</div>
</div>
<div id="left"></div>
<div id="right"></div>
</div>
</body>
</html>
As a side note, in code snippets, your JavaScript does not need to be inside of the script tag, as long as it is in the JavaScript section.
Try this:
document.getElementById("left").style.left = "-100px";
I have a loading div that I display, and I want to have the text in the <h1> below the <img> and I can get it aligned in the middle horizontally, but I cant get it aligned below the <img> here is my HTML
<div id="loading">
<img id="loading-image" src="http://downgraf.com/wp-content/uploads/2014/09/01-progress.gif" alt="Loading..." />
<h1 id="loading_text">Loading...</h1>
</div>
And my CSS
#loading {
width: 100%;
height: 100%;
top: 0px;
left: 0px;
position: fixed;
display: block;
z-index: 99;
background: rgba(255, 255, 255, 0.5);
}
#loading-image {
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 100;
width:10%
}
#loading_text {
color:black;
text-align:center;
z-index: 101;
vertical-align:middle
}
And I have included a fiddle here: http://jsfiddle.net/myh5f13q/
So how can I get the <h1> centered horizontally and below the <img>?
Thanks
Remove all the positioning and give this way:
#loading {
display: block;
z-index: 99;
background: rgba(255, 255, 255, 0.5);
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
#loading-image {
width: 10%;
display: block;
margin: auto;
}
#loading_text {
color: black;
text-align: center;
z-index: 101;
vertical-align: middle
}
<div id="loading">
<img id="loading-image" src="http://downgraf.com/wp-content/uploads/2014/09/01-progress.gif" alt="Loading..." />
<h1 id="loading_text">Loading...</h1>
</div>
Preview
Full Screen
I would wrap the content in another <div> and use CSS transform and position absolute to centre both vertically and horizontally.
Source: https://css-tricks.com/centering-css-complete-guide/
#loading {
position: relative;
}
#loading-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div id="loading">
<div id="loading-content">
<img id="loading-image" src="http://downgraf.com/wp-content/uploads/2014/09/01-progress.gif" alt="Loading..." />
<h1 id="loading_text">Loading...</h1>
</div>
</div>
Add another container, and vertically center it within the #loading element.
http://jsfiddle.net/mblase75/gfv08q4z/
#loading {
width: 100%;
height: 100%;
left: 0px;
position: fixed;
display: block;
z-index: 99;
background: rgba(255, 255, 255, 0.5);
}
#loading-container {
position: relative;
top: 50%;
transform: translateY(-50%);
}
#loading-image {
display: block;
margin: auto;
width:10%
}
#loading_text {
color:black;
text-align:center;
z-index: 101;
vertical-align:middle
}
<div id="loading">
<div id="loading-container">
<img id="loading-image" src="http://downgraf.com/wp-content/uploads/2014/09/01-progress.gif" alt="Loading..." />
<h1 id="loading_text">Loading...</h1>
</div>
</div>