We Keep Coding

change background colour of div on carousel

I'm trying to get to grips with javascript, and have followed a tutorial for a simple image slider. I'm trying to add to it and have the background fade to different colours as the slides move. I've managed to figure it out with the right and left arrows (not sure on best practise), but I can't seem to get it right when selecting the indicators. Can anyone advise on a solution?
Thanks in advance.
const left = document.querySelector('.left');
const right = document.querySelector('.right');
const slider = document.querySelector('.carousel__slider');
const indicatorParent = document.querySelector('.carousel__controls ol');
const indicators = document.querySelectorAll('.carousel__controls li');
index = 0;
var background = 1;
function indicatorBg(val){
var background = val;
changeBg();
}
indicators.forEach((indicator, i) => {
indicator.addEventListener('click', () => {
document.querySelector('.carousel__controls .selected').classList.remove('selected');
indicator.classList.add('selected');
slider.style.transform = 'translateX(' + (i) * -25 + '%)';
index = i;
});
});
left.addEventListener('click', function() {
index = (index > 0) ? index -1 : 0;
document.querySelector('.carousel__controls .selected').classList.remove('selected');
indicatorParent.children[index].classList.add('selected');
slider.style.transform = 'translateX(' + (index) * -25 + '%)';
if (background <= 1) {
return false;
} else {
background--;
}
changeBg();
});
right.addEventListener('click', function() {
index = (index < 4 - 1) ? index+1 : 3;
document.querySelector('.carousel__controls .selected').classList.remove('selected');
indicatorParent.children[index].classList.add('selected');
slider.style.transform = 'translateX(' + (index) * -25 + '%)';
if (background >= 4) {
return false;
} else {
background++;
}
changeBg();
});
function changeBg (){
if (background == 1) {
document.getElementById("carousel__track").className = 'slide-1';
} else if (background == 2) {
document.getElementById("carousel__track").className = 'slide-2';
} else if (background == 3) {
document.getElementById("carousel__track").className = 'slide-3';
} else if (background == 4) {
document.getElementById("carousel__track").className = 'slide-4';
}
}
window.onload = changeBg;
.carousel {
height: 80vh;
width: 100%;
margin: 0 auto;
}
#carousel__track {
height: 100%;
position: relative;
overflow: hidden;
}
.background {
background: red;
}
.carousel__slider {
height: 100%;
display: flex;
width: 400%;
transition: all 0.3s;
}
.carousel__slider div {
flex-basis: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.carousel__controls .carousel__arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
z-index: 8888
}
.carousel__controls .carousel__arrow i {
font-size: 2.6rem;
}
.carousel__arrow.left {
left: 1em;
}
.carousel__arrow.right {
right: 1em;
}
.carousel__controls ol {
position: absolute;
bottom: 15%;
left: 50%;
transform: translateX(-50%);
list-style: none;
display: flex;
margin: 0;
padding: 0;
}
.carousel__controls ol li {
width: 14px;
height: 14px;
border-radius: 50px;
margin: .5em;
padding: 0;
background: white;
transform: scale(.6);
cursor: pointer;
}
.carousel__controls ol li.selected {
background: black;
transform: scale(1);
transition: all .2s;
transition-delay: .3s;
}
.slide-1 {
background: pink;
transition: all 0.4s;
}
.slide-2 {
background: coral;
transition: all 0.4s;
}
.slide-3 {
background: green;
transition: all 0.4s;
}
.slide-4 {
background: orange;
transition: all 0.4s;
}
<section class="carousel">
<div id="carousel__track">
<div class="carousel__slider">
<div>Slide 1</div>
<div>Slide 2</div>
<div>Slide 3</div>
<div>Slide 4</div>
</div>
<div id="left" class="carousel__controls"><span class="carousel__arrow left"><</span> <span id="right" class="carousel__arrow right">></span>
<ol>
<li value="1" onclick="indicatorBg(this.value)" class="selected"></li>
<li value="2" onclick="indicatorBg(this.value)"></li>
<li value="3" onclick="indicatorBg(this.value)"></li>
<li value="4" onclick="indicatorBg(this.value)"></li>
</ol>
</div>
</div>
</section>

You forgot to change the background inside the click event handler of the indicators.
indicators.forEach((indicator, i) => {
indicator.addEventListener('click', () => {
document.querySelector('.carousel__controls .selected').classList.remove('selected');
indicator.classList.add('selected');
slider.style.transform = 'translateX(' + (i) * -25 + '%)';
index = i;
background = index + 1;
changeBg();
});
});
As far as best practice goes, I typically use class names for CSS and IDs for JavaScript. Personally, I wouldn't recommend you worry about best practices at this stage, but instead, focus on getting the code working and understanding what's going on line-by-line.

There is a lot of solutions, but the simplest solution that I advice is to use odd and even numbers to style the divs in the carousel (meaning that eg. first is green second is orange third is green and so on...
.carousel__slider div:nth-child(2n) /*Selects even numbered elements*/
.carousel__slider div:nth-child(2n+1) /*Selects odd numbered elements*/
Check out the snippet
const left = document.querySelector('.left');
const right = document.querySelector('.right');
const slider = document.querySelector('.carousel__slider');
const indicatorParent = document.querySelector('.carousel__controls ol');
const indicators = document.querySelectorAll('.carousel__controls li');
index = 0;
//var background = 1;
//function indicatorBg(val){
// var background = val;
// changeBg();
//}
indicators.forEach((indicator, i) => {
indicator.addEventListener('click', () => {
document.querySelector('.carousel__controls .selected').classList.remove('selected');
indicator.classList.add('selected');
slider.style.transform = 'translateX(' + (i) * -25 + '%)';
index = i;
});
});
left.addEventListener('click', function() {
index = (index > 0) ? index -1 : 0;
document.querySelector('.carousel__controls .selected').classList.remove('selected');
indicatorParent.children[index].classList.add('selected');
slider.style.transform = 'translateX(' + (index) * -25 + '%)';
// if (background <= 1) {
// return false;
// } else {
// background--;
// }
// changeBg();
});
right.addEventListener('click', function() {
index = (index < 4 - 1) ? index+1 : 3;
document.querySelector('.carousel__controls .selected').classList.remove('selected');
indicatorParent.children[index].classList.add('selected');
slider.style.transform = 'translateX(' + (index) * -25 + '%)';
// if (background >= 4) {
// return false;
// } else {
// background++;
// }
// changeBg();
});
//function changeBg (){
// if (background == 1) {
// document.getElementById("carousel__track").className = 'slide-1';
// } else if (background == 2) {
// document.getElementById("carousel__track").className = 'slide-2';
// } else if (background == 3) {
// document.getElementById("carousel__track").className = 'slide-3';
// } else if (background == 4) {
// document.getElementById("carousel__track").className = 'slide-4';
// }
//}
//window.onload = changeBg;
.carousel {
height: 80vh;
width: 100%;
margin: 0 auto;
}
#carousel__track {
height: 100%;
position: relative;
overflow: hidden;
}
.background {
background: red;
}
.carousel__slider {
height: 100%;
display: flex;
width: 400%;
transition: all 0.3s;
}
.carousel__slider div {
flex-basis: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.carousel__controls .carousel__arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
z-index: 8888
}
.carousel__controls .carousel__arrow i {
font-size: 2.6rem;
}
.carousel__arrow.left {
left: 1em;
}
.carousel__arrow.right {
right: 1em;
}
.carousel__controls ol {
position: absolute;
bottom: 15%;
left: 50%;
transform: translateX(-50%);
list-style: none;
display: flex;
margin: 0;
padding: 0;
}
.carousel__controls ol li {
width: 14px;
height: 14px;
border-radius: 50px;
margin: .5em;
padding: 0;
background: white;
transform: scale(.6);
cursor: pointer;
}
.carousel__controls ol li.selected {
background: black;
transform: scale(1);
transition: all .2s;
transition-delay: .3s;
}
/*.slide-1 {
background: pink;
transition: all 0.4s;
}
.slide-2 {
background: coral;
transition: all 0.4s;
}
.slide-3 {
background: green;
transition: all 0.4s;
}
.slide-4 {
background: orange;
transition: all 0.4s;
}*/
.carousel__slider div:nth-child(2n) {
background-color:orange;
}
.carousel__slider div:nth-child(2n+1) {
background-color:green;
}
<section class="carousel">
<div id="carousel__track">
<div class="carousel__slider">
<div>Slide 1</div>
<div>Slide 2</div>
<div>Slide 3</div>
<div>Slide 4</div>
</div>
<div id="left" class="carousel__controls"><span class="carousel__arrow left"><</span> <span id="right" class="carousel__arrow right">></span>
<ol>
<li value="1" class="selected"></li>
<li value="2" ></li>
<li value="3" ></li>
<li value="4" ></li>
</ol>
</div>
</div>
</section>

Is there a way to set one background that ignores the page breaks within this full page pure javascript site?

/**
* Full page
*/
(function () {
'use strict';
/**
* Full scroll main function
*/
var fullScroll = function (params) {
/**
* Main div
* #type {Object}
*/
var main = document.getElementById(params.mainElement);
/**
* Sections divclass
* #type {Array}
*/
var sections = main.getElementsByTagName('section');
/**
* Full page scroll configurations
* #type {Object}
*/
var defaults = {
container : main,
sections : sections,
animateTime : params.animateTime || 0.7,
animateFunction : params.animateFunction || 'ease',
maxPosition: sections.length - 1,
currentPosition: 0,
displayDots: typeof params.displayDots != 'undefined' ? params.displayDots : true,
dotsPosition: params.dotsPosition || 'left'
};
this.defaults = defaults;
/**
* Init build
*/
this.init();
};
/**
* Init plugin
*/
fullScroll.prototype.init = function () {
this.buildPublicFunctions()
.buildSections()
.buildDots()
.addEvents();
var anchor = location.hash.replace('#', '').split('/')[0];
location.hash = 0;
this.changeCurrentPosition(anchor);
this.registerIeTags();
};
/**
* Build sections
* #return {Object} this(fullScroll)
*/
fullScroll.prototype.buildSections = function () {
var sections = this.defaults.sections;
for (var i = 0; i < sections.length; i++) {
sections[i].setAttribute('data-index', i);
}
return this;
};
/**
* Build dots navigation
* #return {Object} this (fullScroll)
*/
fullScroll.prototype.buildDots = function () {
this.ul = document.createElement('ul');
this.ul.className = this.updateClass(1, 'dots', this.ul.className);
this.ul.className = this.updateClass(1, this.defaults.dotsPosition == 'right' ? 'dots-right' : 'dots-left', this.ul.className);
var _self = this;
var sections = this.defaults.sections;
for (var i = 0; i < sections.length; i++) {
var li = document.createElement('li');
var a = document.createElement('a');
a.setAttribute('href', '#' + i);
li.appendChild(a);
_self.ul.appendChild(li);
}
this.ul.childNodes[0].firstChild.className = this.updateClass(1, 'active', this.ul.childNodes[0].firstChild.className);
if (this.defaults.displayDots) {
document.body.appendChild(this.ul);
}
return this;
};
/**
* Add Events
* #return {Object} this(fullScroll)
*/
fullScroll.prototype.addEvents = function () {
if (document.addEventListener) {
document.addEventListener('mousewheel', this.mouseWheelAndKey, false);
document.addEventListener('wheel', this.mouseWheelAndKey, false);
document.addEventListener('keyup', this.mouseWheelAndKey, false);
document.addEventListener('touchstart', this.touchStart, false);
document.addEventListener('touchend', this.touchEnd, false);
window.addEventListener("hashchange", this.hashChange, false);
/**
* Enable scroll if decive don't have touch support
*/
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
if(!('ontouchstart' in window)){
document.body.style = "overflow: scroll;";
document.documentElement.style = "overflow: scroll;";
}
}
} else {
document.attachEvent('onmousewheel', this.mouseWheelAndKey, false);
document.attachEvent('onkeyup', this.mouseWheelAndKey, false);
}
return this;
};
/**
* Build public functions
* #return {[type]} [description]
*/
fullScroll.prototype.buildPublicFunctions = function () {
var mTouchStart = 0;
var mTouchEnd = 0;
var _self = this;
this.mouseWheelAndKey = function (event) {
if (event.deltaY > 0 || event.keyCode == 40) {
_self.defaults.currentPosition ++;
_self.changeCurrentPosition(_self.defaults.currentPosition);
} else if (event.deltaY < 0 || event.keyCode == 38) {
_self.defaults.currentPosition --;
_self.changeCurrentPosition(_self.defaults.currentPosition);
}
_self.removeEvents();
};
this.touchStart = function (event) {
mTouchStart = parseInt(event.changedTouches[0].clientY);
mTouchEnd = 0;
};
this.touchEnd = function (event) {
mTouchEnd = parseInt(event.changedTouches[0].clientY);
if (mTouchEnd - mTouchStart > 100 || mTouchStart - mTouchEnd > 100) {
if (mTouchEnd > mTouchStart) {
_self.defaults.currentPosition --;
} else {
_self.defaults.currentPosition ++;
}
_self.changeCurrentPosition(_self.defaults.currentPosition);
}
};
this.hashChange = function (event) {
if (location) {
var anchor = location.hash.replace('#', '').split('/')[0];
if (anchor !== "") {
if (anchor < 0) {
_self.changeCurrentPosition(0);
} else if (anchor > _self.defaults.maxPosition) {
_self.changeCurrentPosition(_self.defaults.maxPosition);
} else {
_self.defaults.currentPosition = anchor;
_self.animateScroll();
}
}
}
};
this.removeEvents = function () {
if (document.addEventListener) {
document.removeEventListener('mousewheel', this.mouseWheelAndKey, false);
document.removeEventListener('wheel', this.mouseWheelAndKey, false);
document.removeEventListener('keyup', this.mouseWheelAndKey, false);
document.removeEventListener('touchstart', this.touchStart, false);
document.removeEventListener('touchend', this.touchEnd, false);
} else {
document.detachEvent('onmousewheel', this.mouseWheelAndKey, false);
document.detachEvent('onkeyup', this.mouseWheelAndKey, false);
}
setTimeout(function(){
_self.addEvents();
}, 600);
};
this.animateScroll = function () {
var animateTime = this.defaults.animateTime;
var animateFunction = this.defaults.animateFunction;
var position = this.defaults.currentPosition * 100;
this.defaults.container.style.webkitTransform = 'translateY(-' + position + '%)';
this.defaults.container.style.mozTransform = 'translateY(-' + position + '%)';
this.defaults.container.style.msTransform = 'translateY(-' + position + '%)';
this.defaults.container.style.transform = 'translateY(-' + position + '%)';
this.defaults.container.style.webkitTransition = 'all ' + animateTime + 's ' + animateFunction;
this.defaults.container.style.mozTransition = 'all ' + animateTime + 's ' + animateFunction;
this.defaults.container.style.msTransition = 'all ' + animateTime + 's ' + animateFunction;
this.defaults.container.style.transition = 'all ' + animateTime + 's ' + animateFunction;
for (var i = 0; i < this.ul.childNodes.length; i++) {
this.ul.childNodes[i].firstChild.className = this.updateClass(2, 'active', this.ul.childNodes[i].firstChild.className);
if (i == this.defaults.currentPosition) {
this.ul.childNodes[i].firstChild.className = this.updateClass(1, 'active', this.ul.childNodes[i].firstChild.className);
}
}
};
this.changeCurrentPosition = function (position) {
if (position !== "") {
_self.defaults.currentPosition = position;
location.hash = _self.defaults.currentPosition;
}
};
this.registerIeTags = function () {
document.createElement('section');
};
this.updateClass = function (type, newClass, currentClass) {
if (type == 1) {
return currentClass += ' ' + newClass;
} else if (type == 2) {
return currentClass.replace(newClass, '');
}
};
return this;
};
window.fullScroll = fullScroll;
})();
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.scroll-container {
width: 100%;
height: 100%;
position: relative;
margin: 0;
padding: 0;
}
.scroll-container section {
width: 100%;
height: 100%;
}
.dots {
z-index: 1;
list-style: none;
padding: 0;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.dots li a {
padding: 10px;
width: 4px;
height: 5px;
display: block;
}
.dots li a:before {
content: '';
position: absolute;
width: 8px;
height: 8px;
background: rgba(255, 255, 255, 0.48);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
-webkit-transition: -webkit-transform 0.3s ease, background-color 0.3s ease;
-moz-transition: -moz-transform 0.3s ease, background-color 0.3s ease;
-ms-transition: -ms-transform 0.3s ease, background-color 0.3s ease;
-o-transition: -o-transform 0.3s ease, background-color 0.3s ease;
transition: transform 0.3s ease, background-color 0.3s ease;
}
.dots li a.active:before {
content: '';
background-color: #FFFFFF;
width: 14px;
height: 14px;
margin-top: -4px;
left: 7px;
background-color: white;
-webkit-transform: scale(1.0);
-moz-transform: scale(1.0);
-ms-transform: scale(1.0);
-o-transform: scale(1.0);
transform: scale(1.0);
}
.dots-right {
right: 10px;
}
.dots-left {
left: 10px;
}
<!DOCTYPE html>
<html>
<head>
<title>Full page scroll</title>
<link rel="stylesheet" type="text/css" href="assets/stylesheet/full-page-scroll.css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<style type="text/css">
.section1 {
background-color: #7DBCD4;
}
.section2 {
background-color: #98C19F;
}
.section3 {
background-color: #A199E2;
}
.section4 {
background-color: #CC938E;
}
.section5 {
background-color: #D2C598;
}
section div {
font-family: 'Open Sans';
font-style: normal;
text-align: center;
position: relative;
top: 50%;
transform: translateY(-50%);
}
span {
font-size: 4em;
font-style: normal;
color: #fff;
}
.button {
background-color: #F2CF66;
border-bottom: 5px solid #D1B358;
text-shadow: 0px -2px #D1B358;
padding: 10px 40px;
border-radius: 10px;
font-size: 25px;
color: #FFF;
text-decoration: none;
}
</style>
</head>
<body>
<a href="https://github.com/almeida-matheus/fullPageScrollPureJS">
<img style="position: fixed;z-index:99; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub">
</a>
<div id="main" class="scroll-container">
<section class="section1">
<div>
<span>It's beautiful and don't need Jquery :D</span>
</div>
<div>
Download here
</div>
</section>
<section class="section2">
<div>
<span>Working on Tablets and Phones</span>
</div>
</section>
<section class="section3">
<div>
<span>Anuncie aqui</span>
</div>
</section>
<section class="section4">
<div>
<span>Funciona até no IE!</span>
</div>
</section>
<section class="section5">
<div>
<span>Chegar de falar, é só baixar!</span>
</div>
</section>
</div>
<script src="assets/javascript/full-page-scroll.js"></script>
<script type="text/javascript">
new fullScroll({
mainElement: 'main',
displayDots: true,
dotsPosition: 'left',
animateTime: 0.7,
animateFunction: 'ease'
});
</script>
</body>
</html>
I have this one page website that has 5 sections. I would like to make the background color a gradient like an ocean. Light blue at the top, deep dark blue at the bottom.
Here is the gradient background: rgb(62,75,107);
background: linear-gradient(0deg, rgba(62,75,107,1) 12%, rgba(51,94,198,1) 20%, rgba(45,105,253,1) 23%, rgba(45,105,253,1) 35%, rgba(45,105,253,1) 44%, rgba(45,105,253,1) 46%, rgba(75,137,194,1) 57%, rgba(47,170,195,1) 71%, rgba(64,179,185,1) 79%, rgba(34,186,195,1) 84%, rgba(203,222,223,1) 92%);
My issue is that I can only set each square of the 1 page site to that gradient. Which is then just repeating gradients. I want one over smooth gradient background. How can I override each separate background, but still keep the page breaks?
Here is the one page site: https://www.cssscript.com/cross-platform-smooth-one-page-scrolling-pure-javascript/

How to fix an array of elements in my section. It won't display my work when I call the function...?

So the idea of my work is with the 10 slides in my section will have an element append to the slides, which are drinking can products. When the cursor hovers the cans, the cans will increase the size to show the real detail of the can.
Anyway, I have managed to create my carousel active slide, the 3D effect cans that can rotate clockwise and have a list of different colour cans in CSS (different background for each bottle class).
I can only get the first can working on the active slide, but the rest of the slides are blank. I've only create a list of 3 items in the array hoping to fill up the three slides with the drinking can products but no luck? What am I doing wrong?
I'm calling the initApp function, which has the array of cans because I want to append items, but only one at a time...
so in the each.function(index) - I can add the index, and then in initApp(index). and then in the initApp function I can adjust so that bottle[index] gets selected and then added. But nothing seems to work?? What am I doing wrong? I know there is a bunch of ways I can do this.
Like could I skip the initApp() function and add all the code in the .each(function() { my code to append bottle})??
// slider
$("#products>article").on("click", function(){
$("#products>article").removeClass("active");
$(this).addClass("active");
animate();
});
function getActiveArticle(){
var x = 0;
$("#products>article").each(function(e){
if($("#products>article").eq(e).hasClass("active")){
x = e;
return false;
}
});
return x;
}
function gofwd(){
var activeIndex = getActiveArticle();
var minArticles = 0;
var maxArticles = $("#products>article").length - 1;
if(activeIndex >= maxArticles){
activeIndex = minArticles-1;
}
$("#products>article").removeClass("active");
$("#products>article").eq(activeIndex+1).addClass("active");
animate();
}
function gobwd(){
var activeIndex = getActiveArticle();
var minArticles = 1;
var maxArticles = $("#products>article").length;
$("#products>article").removeClass("active");
$("#products>article").eq(activeIndex-1).addClass("active");
animate();
}
$(document).ready(function(){
animate();
});
function animate(){
var articleIndex = getActiveArticle();
var totalMargin = 25 * (articleIndex+1) - (25*(articleIndex));
var articlePosition = Math.floor($("#products>article").eq(articleIndex).offset().left - $("#products").offset().left) - totalMargin;
var productsHalfWidth = $("#products").width()/2;
if(articleIndex == 0){
var halfWidth = 150;
}else{
var halfWidth = 100;
}
var finalPosition = productsHalfWidth - articlePosition - halfWidth;
$("#products").animate({
"left": finalPosition,
}, {
duration: 500,
easing: 'easeOutBack',
});
}
$(window).on("resize", function(){
animate();
});
var autoPlay = setInterval(function(){
gofwd();
}, 3500);
$("#slider").on("mouseenter", function(){
clearInterval(autoPlay);
});
$("#slider").on("mouseleave", function(){
autoPlay = setInterval(function(){
gofwd();
}, 4500);
});
// cans
const getElement = (selector) => document.querySelector(selector);
const createElement = (tag) => document.createElement(tag);
// const addBackground1 = document.style['background'] = 'url ("https://i.postimg.cc/BZ8rj2NM/sleve.png")';
const addSideStyle = ($side, i) => {
let deg = 3.75 * i;
let bgPosition = 972 - (i * 10.125);
$side.style['background-position'] = bgPosition + 'px 0';
$side.style['-webkit-transform'] = 'rotateY(' + deg + 'deg) translateZ(154px)';
$side.style['-moz-transform'] = 'rotateY(' + deg + 'deg) translateZ(154px)';
$side.style['transform'] = 'rotateY(' + deg + 'deg) translateZ(154px)';
};
const createBottle = () => {
const $bottle = createElement('div');
$bottle.classList.add('bottle');
const $bottleLabel = createBottleLabel();
for (let i = 0; i < 96; i = i + 1){
let $bottleSide = createBottleSide(i);
$bottleLabel.append($bottleSide);
}
$bottle.append($bottleLabel);
return $bottle;
};
const createBottleLabel = () => {
const $bottleLabel = createElement('div');
$bottleLabel.classList.add('label');
return $bottleLabel;
}
const createBottleSide = (i) => {
const $bottleSide = createElement('div');
$bottleSide.classList.add('side');
addSideStyle($bottleSide, i);
return $bottleSide;
};
const changeBottleSize = (clickFn) => {
const _bottle = createElement('div');
_bottle.classList.add('bottle');
_bottle.style['transform'] = 'scale(0.9)';
return _bottle;
}
const clickFn = () => {
const $bottleSize = getElement('.container');
// const $bottle1 = changeBottleSize();
// const $bottle2 = changeBottleSize();
// const $bottle3 = changeBottleSize();
$bottleSize.style['transform'] = 'scale(0.9)';
return $bottleSize;
}
$('#products article').each(function(index) {
$(this).append(initApp())
});
const initApp = (index) => {
const $container = getElement('.container');
const $bottle1 = createBottle();
const $bottle2 = createBottle();
const $bottle3 = createBottle();
[$bottle1, $bottle2, $bottle3].forEach(($bottle, i) => {
$bottle.classList.add('bottle' + i);
});
$container.append($bottle1, $bottle2, $bottle3);
};
initApp();
* {
padding: 0;
margin: 0;
font-family: "Arial";
box-sizing: border-box;
}
body {
background-color: #444;
}
#slider {
position: relative;
overflow: hidden;
width: 90vw;
height: 750px;
margin: 50px auto;
background-color: rgba(255, 255, 255, .5);
}
#products {
position: relative;
display: flex;
width: 100%;
height: 100%;
align-items: center;
padding: 0 25px;
}
#products>article:first-child {
margin-left: 0;
}
#products>article {
position: relative;
min-width: 250px;
min-height: 250px;
margin-left: 25px;
font-size: 17px;
cursor: pointer;
/* background-color: rgba(255,0,0,.5); */
transition: all .3s ease-in-out;
}
#products>article.active {
min-width: 300px;
min-height: 300px;
font-size: 20px;
}
#picText {
position: absolute;
color: #fff;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
}
#id {
color: #fff;
margin: 15px;
}
#gofwd,
#gobwd {
position: absolute;
top: 50%;
padding: 50px 15px;
z-index: 1;
cursor: pointer;
background-color: rgba(255, 255, 255, .6);
transform: translateY(-50%);
transition: all .3s ease-out;
}
#gofwd:hover,
#gobwd:hover {
background-color: #fff;
}
#gobwd {
left: 0;
}
#gofwd {
right: 0;
}
.can {
position: relative;
}
.bottle:hover {
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg)
/* translate3d(350px, 190px, 40px) */
scale(0.7);
}
.bottle {
transition: all 0.2s;
width: 10.125px;
-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(650px, 190px, 40px);
-moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(650px, 190px, 40px);
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(350px, 190px, 40px);
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
transform: scale(0.2);
position: absolute;
}
.bottle0 {
top: 40px;
left: 100px;
}
.bottle1 {
top: 100px;
left: 500px;
}
.bottle2 {
top: 100px;
left: 700px;
}
.bottle>img {
position: absolute;
top: -180px;
left: -182px;
width: 374px;
}
.label {
-webkit-animation: spin 10s infinite linear;
-moz-animation: spin 10s infinite linear;
animation: spin 10s infinite linear;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
}
.side {
position: absolute;
width: 10.55px;
height: 679px;
margin-bottom: 400px;
}
.bottle0 .side {
background: url("https://i.postimg.cc/BZ8rj2NM/sleve.png");
}
.bottle1 .side {
background: url("https://i.postimg.cc/Fs2RgnN6/passion.png");
}
.bottle2 .side {
background: url("https://i.postimg.cc/zGzJjm40/raspberry.png");
}
#-webkit-keyframes spin {
from {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
to {
-webkit-transform: rotateY(-360deg);
transform: rotateY(-360deg);
}
}
#-moz-keyframes spin {
from {
-moz-transform: rotateY(0deg);
transform: rotateY(0deg);
}
to {
-moz-transform: rotateY(-360deg);
transform: rotateY(-360deg);
}
}
#keyframes spin {
from {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
transform: rotateY(0deg);
}
to {
-webkit-transform: rotateY(-360deg);
-moz-transform: rotateY(-360deg);
transform: rotateY(-360deg);
}
}
#mixin makeSide() {}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div id="slider">
<span id="gofwd" onClick="gofwd();">></span>
<span id="gobwd" onClick="gobwd();"><</span>
<div id="products">
<article class="active">
<div class="container"></div>
</article>
<article>
<div class="container">
<p id="id">2</p>
</div>
</article>
<article>
<div class="picture">
<p id="id">3</p>
</div>
</article>
<article>
<div class="picture">
<p id="id">4</p>
</div>
</article>
<article>
<div class="picture">
<p id="id">5</p>
</div>
</article>
<article>
<div class="picture">
<p id="id">6</p>
</div>
</article>
<article>
<div class="picture">
<p id="id">7</p>
</div>
</article>
<article>
<div class="picture">
<p id="id">8</p>
</div>
</article>
<article>
<div class="picture">
<p id="id">9</p>
</div>
</article>
<article>
<div class="picture">
<p id="id">10</p>
</div>
</article>
</div>
</div>

If you look at your Javascript Console you should the following error:
you crated the initApp function as a const after calling it, that won't work. You have two options:
move the const initApp up, or
declare it a function like this:
function initApp(index){
// …
}

JS:Select and move a specific div to front

I'm working on a simple card stack which rotates when clicked, my problem is I cant select a specific card and send it to the front and arrange again the cards according to number. I change the codes but luck, I consumed half a day to make it works, still not working.
I hope you understand me.
Thanks
here is a sample code.
codepen
var cardStack = document.getElementsByClassName('card');
var cardArray = []; // Does not change
var stateArray = []; // Changes - keeps track of card state
var prevStateArray = [];
function cardInit() {
for (var i=0; i<cardStack.length; i++) {
var cNum = i + 1;
var cName = 'card' + cNum.toString();
cardStack[i].classList.add(cName);
cardArray.push(cNum);
stateArray = cardArray;
};
};
function stackRefresh() {
prevStateArray = stateArray.slice(0);
stateArray.unshift(stateArray.pop());
}
function nextCard() {
stackRefresh();
for (var i=0; i<cardStack.length; i++) {
var cName = 'card' + prevStateArray[i].toString();
var cNameNew = 'card' + stateArray[i].toString();
cardStack[i].classList.remove(cName);
cardStack[i].classList.add(cNameNew);
};
}
cardInit();
body {
background-color: #2a2a2a;
}
.card {
width: 200px;
height: 320px;
background-color: #fff;
box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.4);
border-radius: 5px;
display: inline-block;
position: absolute;
transform-origin: 0% 50%;
transition: all 1s ease;
}
.card-stack {
display: inline-block;
text-align: center;
position: relative;
left: 50%;
transform: translateX(-100px);
}
.card1 {
z-index: 1000;
left: 0;
}
.card2 {
z-index: 800;
transform: scale(0.99);
filter: brightness(0.9);
left: 20px;
}
.card3 {
z-index: 600;
transform: scale(0.98);
filter: brightness(0.8);
left: 40px;
}
.card4 {
z-index: 400;
transform: scale(0.97);
filter: brightness(0.7);
left: 60px;
animation-name: remove;
animation-duration: 1s;
}
#keyframes remove {
0% {transform: translateX(0px); opacity: 1};
50% {transform: translateX(-80px); opacity: 0};
51% {transform: translateX(10px) scale(0.97); opacity: 0};
100% {transform: translateX(0px) scale(0.97); opacity: 1;}
}
<div class="card-stack" onclick="nextCard();">
<div class="card">A</div>
<div class="card">B</div>
<div class="card">C</div>
<div class="card">D</div>
</div>

Try this sample
I changed html
<div class="card-stack" onclick="nextCard(event);">
...
And js function
function nextCard(e) {
var clickedCssClass = e.srcElement.classList[1];
if (!clickedCssClass) return;
var match = /(\d+)/.exec(clickedCssClass);
var clickedNumber = match[0];
for(var j = 1; j < clickedNumber ; j++){
stackRefresh();
for (var i=0; i<cardStack.length; i++) {
var cName = 'card' + prevStateArray[i].toString();
var cNameNew = 'card' + stateArray[i].toString();
cardStack[i].classList.remove(cName);
cardStack[i].classList.add(cNameNew);
};
}
}

First include the following statement in head section of the html:
<script src="http://code.jquery.com/jquery-3.2.1.js"></script>
Add then change the following tag
<div class="card-stack" onclick="nextCard();">
To
<div class="card-stack">
Finally, I modified the function cardInit as follow:
function cardInit() {
for (var i=0; i<cardStack.length; i++) {
var cNum = i + 1;
var cName = 'card' + cNum.toString();
cardStack[i].classList.add(cName);
$(cardStack[i]).on("click",function()
{
prevClassName=this.classList[1];
$(".card1").removeClass("card1").addClass(prevClassName);
this.className=this.className.replace(prevClassName,"card1");
});
cardArray.push(cNum);
stateArray = cardArray;
};
};

did you mean this?
I have added a moveTop function like
function moveTop() {
event.preventDefault();
event.stopPropagation();
var index = Array.prototype.slice.call(event.target.parentNode.querySelectorAll('.card')).indexOf(event.target)
var temp = stateArray[index];
prevStateArray = stateArray.slice(0);
stateArray.splice(index, 1);
stateArray.unshift(temp);
refreshCards();
}
var cardStack = document.getElementsByClassName('card');
var cardArray = []; // Does not change
var stateArray = []; // Changes - keeps track of card state
var prevStateArray = [];
function cardInit() {
for (var i = 0; i < cardStack.length; i++) {
var cNum = i + 1;
var cName = 'card' + cNum.toString();
cardStack[i].classList.add(cName);
cardArray.push(cNum);
stateArray = cardArray;
};
};
function stackRefresh() {
prevStateArray = stateArray.slice(0);
stateArray.unshift(stateArray.pop());
}
function nextCard() {
stackRefresh();
refreshCards();
}
function refreshCards() {
for (var i = 0; i < cardStack.length; i++) {
var cName = 'card' + prevStateArray[i].toString();
var cNameNew = 'card' + stateArray[i].toString();
cardStack[i].classList.remove(cName);
cardStack[i].classList.add(cNameNew);
};
}
function moveTop() {
event.preventDefault();
event.stopPropagation();
var index = Array.prototype.slice.call(event.target.parentNode.querySelectorAll('.card')).indexOf(event.target)
var temp = stateArray[index];
prevStateArray = stateArray.slice(0);
stateArray.splice(index, 1);
stateArray.unshift(temp);
refreshCards();
}
cardInit();
body {
background-color: #2a2a2a;
}
.card {
width: 200px;
height: 320px;
background-color: #fff;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.4);
border-radius: 5px;
display: inline-block;
position: absolute;
transform-origin: 0% 50%;
transition: all 1s ease;
text-align: right;
}
.card-stack {
display: inline-block;
text-align: center;
position: relative;
left: 50%;
transform: translateX(-100px);
}
.card1 {
z-index: 1000;
left: 0;
}
.card2 {
z-index: 800;
transform: scale(0.99);
filter: brightness(0.9);
left: 20px;
}
.card3 {
z-index: 600;
transform: scale(0.98);
filter: brightness(0.8);
left: 40px;
}
.card4 {
z-index: 400;
transform: scale(0.97);
filter: brightness(0.7);
left: 60px;
animation-name: remove;
animation-duration: 1s;
}
#keyframes remove {
0% {
transform: translateX(0px);
opacity: 1
}
;
50% {
transform: translateX(-80px);
opacity: 0
}
;
51% {
transform: translateX(10px) scale(0.97);
opacity: 0
}
;
100% {
transform: translateX(0px) scale(0.97);
opacity: 1;
}
}
<div class="card-stack" onclick="nextCard();">
<div class="card" onclick="moveTop()">A</div>
<div class="card" onclick="moveTop()">B</div>
<div class="card" onclick="moveTop()">C</div>
<div class="card" onclick="moveTop()">D</div>
</div>

The problem you are having is that you don't know which card was clicked. My guess is to pass the event when calling nextCard():
onclick="nextCard(event)"
And within the function:
function nextCard(event) {
// detect which card was picked
console.log(event.target);
// logic to bring picked card to the top
...
}

Button is not displaying in FireFox

I am using a button that triggers 4-5 other buttons with animation. its working fine in Chrome but not in FireFox
I have used a fullscreen background video in my current project, with this button, but in firefox, when i inspect elements, it shows there, but the browser is not displaying the element at all.
inspiration taken by - http://codepen.io/phenax/
'use strict';
(function (document, win) {
var animation_time = 600;
var btn_move_limit = 30;
var item_showing = false;
var className = {
show_items: 'menu--list__show',
revolve: 'menu--list__revolve',
button_cross: 'bar__crossy'
};
var $el = {
toggle_btn: document.querySelector('.js-menu--toggle'),
menu_items: document.querySelector('.js-menu--list'),
items: document.querySelectorAll('.js-item')
};
var constrain = function constrain(val, lim) {
return val > lim ? lim : val < -lim ? -lim : val;
};
var setButtonPosition = function setButtonPosition(left, top) {
$el.toggle_btn.style.left = constrain(left, btn_move_limit) + 'px';
$el.toggle_btn.style.top = constrain(top, btn_move_limit) + 'px';
};
var showAllItems = function showAllItems() {
var item_menu = $el.menu_items.classList;
item_menu.add(className.show_items);
setTimeout(function () {
item_menu.add(className.revolve);
$el.toggle_btn.classList.add(className.button_cross);
item_showing = true;
}, animation_time);
};
var hideAllItems = function hideAllItems() {
var item_menu = $el.menu_items.classList;
item_menu.remove(className.revolve);
$el.toggle_btn.classList.remove(className.button_cross);
setTimeout(function () {
item_menu.remove(className.show_items);
item_showing = false;
setButtonPosition(0, 0);
}, animation_time);
};
var findPosRelative = function findPosRelative(e) {
e = e.pageX ? {
pageX: e.pageX,
pageY: e.pageY
} : e.touches[0];
var offset = {
x: win.innerWidth / 2,
y: win.innerHeight / 2
};
e.pageX = e.pageX - offset.x;
e.pageY = e.pageY - offset.y;
return e;
};
var menuBtnClickHandler = function menuBtnClickHandler() {
if (item_showing)
hideAllItems();
else
showAllItems();
};
var itemClick = function itemClick(e) {
var item_id = e.target.dataset.id;
console.log('Item ID: ' + item_id);
hideAllItems();
};
var mouseMoveMent = function mouseMoveMent(e) {
var left, top;
if (item_showing) {
e = findPosRelative(e);
left = 140 * e.pageX / win.innerWidth;
top = 140 * e.pageY / win.innerHeight;
} else {
left = 0;
top = 0;
}
setButtonPosition(left, top);
};
document.addEventListener('DOMContentLoaded', function () {
$el.toggle_btn.addEventListener('click', menuBtnClickHandler);
for (var i = 0; i < $el.items.length; i++) {
if (window.CP.shouldStopExecution(1)) {
break;
}
$el.items[i].addEventListener('click', itemClick);
}
window.CP.exitedLoop(1);
win.addEventListener('mousemove', mouseMoveMent);
win.addEventListener('touchmove', mouseMoveMent);
});
}(document, window));
.menu--toggle {
position: absolute;
width: 80px;
height: 80px;
border-radius: 50%;
transform: translateX(-50%);
border: none;
outline: none;
cursor: pointer;
left: 0;
top: 0;
color: #222;
z-index: 1;
background-image: url("../images/logo/logo.jpg");
background-position: center;
background-size: cover;
box-shadow: 0 0 0 rgba(204, 169, 44, 0.4);
}
.menu {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
margin-top: -80px;
filter: url("#svgFilter"); }
.menu .item {
position: absolute;
width: 80px;
height: 80px;
border-radius: 50%;
transform: translateX(-50%);
border: none;
outline: none;
cursor: pointer;
left: 0;
top: 0;
background-color: #FFEB3B;
color: #222; }
.menu .item {
transition: all 0.6s ease-in-out; }
.menu--toggle {
transition: all .2s linear; }
.menu--toggle .bar {
width: 20px;
height: 2px;
background-color: #222;
margin: 5px auto;
transition: all 0.6s ease-in-out; }
.menu--toggle.bar__crossy .bar:nth-child(2) {
opacity: 0; }
.menu--toggle.bar__crossy .bar:nth-child(1) {
transform: translateY(7px) rotate(45deg); }
.menu--toggle.bar__crossy .bar:nth-child(3) {
transform: translateY(-7px) rotate(-45deg); }
.menu--list ul {
list-style-type: none;
padding: 0;
margin: 0; }
.menu--list li {
position: absolute;
width: 60px;
height: 80px;
transition: all 0.6s ease-in-out;
transform-origin: 0% 50%; }
.menu--list__show .item {
margin-left: 60px; }
.menu--list__revolve li:nth-child(1) {
transform: rotate(90deg); }
.menu--list__revolve li:nth-child(1) .item {
transform: rotate(270deg); }
.menu--list__revolve li:nth-child(2) {
transform: rotate(180deg); }
.menu--list__revolve li:nth-child(2) .item {
transform: rotate(180deg); }
.menu--list__revolve li:nth-child(3) {
transform: rotate(270deg); }
.menu--list__revolve li:nth-child(3) .item {
transform: rotate(90deg); }
.menu--list__revolve li:nth-child(4) {
transform: rotate(360deg); }
.menu--list__revolve li:nth-child(4) .item {
transform: rotate(0deg); }
<div class="menu">
<nav class="menu--list js-menu--list">
<ul>
<li><button type="button" onClick="window.open('https://www.facebook.com/themadhousecafe', '_blank')" class="fa fa-facebook item js-item" data-id="1"></button></li>
<li><button type="button" onClick="window.open('http://blog.nomadbaker.com/', '_blank')" class="fa item js-item" data-id="2">Blog</button></li>
<li><button type="button" onClick="window.open('#', '_blank')" class="item js-item" data-id="3">Menu</button></li>
<li><button type="button" onClick="window.open('#', '_blank')" class="fa fa-phone item js-item" data-id="4"></button></li>
</ul>
</nav>
<button type="button" class='logo_button menu--toggle js-menu--toggle'>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</button>
</div>