I have code for an accordion list using CSS and JavaScript. When I click on a heading it brings up the hidden content. How do I make this so if I click on the same heading it will hide the content again? Anything helps, cheers.
(function () {
var accordions, i;
// Make sure the browser supports what we are about to do.
if (!document.querySelectorAll || !document.body.classList) return;
// Using a function helps isolate each accordion from the others
function makeAccordion(accordion) {
var targets, currentTarget, i;
targets = accordion.querySelectorAll('.accordion > * >h1 ');
for(i = 0; i < targets.length; i++) {
targets[i].addEventListener('click', function () {
if (currentTarget)
currentTarget.classList.remove('expanded');
currentTarget = this.parentNode;
currentTarget.classList.add('expanded');
}, false);
}
accordion.classList.add('js');
}
// Find all the accordions to enable
accordions = document.querySelectorAll('.accordion');
// Array functions don't apply well to NodeLists
for(i = 0; i < accordions.length; i++) {
makeAccordion(accordions[i]);
}
})();
<style>
.accordion.js > * {
overflow: hidden;
}
.accordion.js > *:not(.expanded) > *:not(h1) {
max-height: 0;
margin-top: 0;
margin-bottom: 0;
opacity: 0;
visibility: hidden;
}
.accordion.js > .expanded > *:not(h1) {
max-height: 10em;
opacity: 1;
visibility: visible;
}
.accordion.js > * > h1 {
cursor: pointer;
visibility: visible;
}
.accordion.js > * > *:not(h1) {
transition: max-height 0.7s,
visibility 1s,
margin 1s,
opacity 1s;
}
.sections {
color:#5E5E5E;
text-align:center;
width:90%;
border-style:solid;
border-width:1px;
border-color:#D1D1D1;
padding: 0 .5em;
background-color:#FFFFFF;
border-radius:3px;
}
</style>
<section class="accordion">
<section class="sections">
<h1>A</h1>
<p>All content for A.</p>
</section>
<br style="line-height:5px"/>
<section class="sections">
<h1>B</h1>
<p>All content for B</p>
</section>
<br style="line-height:5px"/>
<section class="sections">
<h1>C</h1>
<p>All content for C<p>
</section>
</section>
This should work.
All I did was add a condition to check if the accordion class exits on the target parent and remove it if it does. Otherwise everything else is the same.
(function () {
var accordions, i;
// Make sure the browser supports what we are about to do.
if (!document.querySelectorAll || !document.body.classList) return;
// Using a function helps isolate each accordion from the others
function makeAccordion(accordion) {
var targets, currentTarget, i;
targets = accordion.querySelectorAll('.accordion > * >h1 ');
for(i = 0; i < targets.length; i++) {
targets[i].addEventListener('click', function (e) {
/*Added the code below*/
if (e.target.parentNode.classList.contains("expanded")) {
e.target.parentNode.classList.remove("expanded")
} else {
/*Else do the following, same as before */
if (currentTarget)
currentTarget.classList.remove('expanded');
currentTarget = this.parentNode;
currentTarget.classList.add('expanded');
}
}, false);
}
accordion.classList.add('js');
}
// Find all the accordions to enable
accordions = document.querySelectorAll('.accordion');
console.log(accordions);
// Array functions don't apply well to NodeLists
for(i = 0; i < accordions.length; i++) {
makeAccordion(accordions[i]);
}
})();
.accordion.js > * {
overflow: hidden;
}
.accordion.js > *:not(.expanded) > *:not(h1) {
max-height: 0;
margin-top: 0;
margin-bottom: 0;
opacity: 0;
visibility: hidden;
}
.accordion.js > .expanded > *:not(h1) {
max-height: 10em;
opacity: 1;
visibility: visible;
}
.accordion.js > * > h1 {
cursor: pointer;
visibility: visible;
}
.accordion.js > * > *:not(h1) {
transition: max-height 0.7s,
visibility 1s,
margin 1s,
opacity 1s;
}
.sections {
color:#5E5E5E;
text-align:center;
width:90%;
border-style:solid;
border-width:1px;
border-color:#D1D1D1;
padding: 0 .5em;
background-color:#FFFFFF;
border-radius:3px;
}
<section class="accordion">
<section class="sections">
<h1>A</h1>
<p>All content for A.</p>
</section>
<br style="line-height:5px"/>
<section class="sections">
<h1>B</h1>
<p>All content for B</p>
</section>
<br style="line-height:5px"/>
<section class="sections">
<h1>C</h1>
<p>All content for C<p>
</section>
</section>
Related
I want to translateX to a position if change is more than -150, but due to having transition property in container it shows the animation of travelling to the new translate value. I want it to have directly jump to the -400px translateX value without showing the animation to going to it and still have the transition property in place for future scrolls
const config = {
individualItem: '.slide', // class of individual item
carouselWidth: 400, // in px
carouselId: '#slideshow', // carousel selector
carouselHolderId: '#slide-wrapper', // carousel should be <div id="carouselId"><div id="carouselHolderId">{items}</div></div>
}
document.addEventListener("DOMContentLoaded", function(e) {
// Get items
const el = document.querySelector(config.individualItem);
const elWidth = parseFloat(window.getComputedStyle(el).width) + parseFloat(window.getComputedStyle(el).marginLeft) + parseFloat(window.getComputedStyle(el).marginRight);
// Track carousel
let mousedown = false;
let movement = false;
let initialPosition = 0;
let selectedItem;
let currentDelta = 0;
document.querySelectorAll(config.carouselId).forEach(function(item) {
item.style.width = `${config.carouselWidth}px`;
});
document.querySelectorAll(config.carouselId).forEach(function(item) {
item.addEventListener('pointerdown', function(e) {
mousedown = true;
selectedItem = item;
initialPosition = e.pageX;
currentDelta = parseFloat(item.querySelector(config.carouselHolderId).style.transform.split('translateX(')[1]) || 0;
});
});
const scrollCarousel = function(change, currentDelta, selectedItem) {
let numberThatFit = Math.floor(config.carouselWidth / elWidth);
let newDelta = currentDelta + change;
let elLength = selectedItem.querySelectorAll(config.individualItem).length - numberThatFit;
if(newDelta <= 0 && newDelta >= -elWidth * elLength) {
selectedItem.querySelector(config.carouselHolderId).style.transform = `translateX(${newDelta}px)`;
// IMPORTANT LINE
if(newDelta <= 0 && newDelta <= -150) {
selectedItem.querySelector(config.carouselHolderId).style.transform = `translateX(-1000px)`;
}
}
}
document.body.addEventListener('pointermove', function(e) {
if(mousedown == true && typeof selectedItem !== "undefined") {
let change = -(initialPosition - e.pageX);
scrollCarousel(change, currentDelta, document.body);
movement = true;
}
});
['pointerup', 'mouseleave'].forEach(function(item) {
document.body.addEventListener(item, function(e) {
selectedItem = undefined;
movement = false;
});
});
});
.slide-wrapper {
transition: 400ms ease;
transform: translateX(0px);
width: 400px;
height: 400px;
}
.slide-number {
pointer-events: none;
}
<!DOCTYPE html>
<html>
<head>
<title>HTML and CSS Slideshow</title>
<style>
body {
font-family: Helvetica, sans-serif;
padding: 5%;
text-align: center;
font-size: 50;
overflow-x: hidden;
}
/* Styling the area of the slides */
#slideshow {
overflow: hidden;
height: 400px;
width: 400px;
margin: 0 auto;
}
/* Style each of the sides
with a fixed width and height */
.slide {
float: left;
height: 400px;
width: 400px;
}
/* Add animation to the slides */
.slide-wrapper {
/* Calculate the total width on the
basis of number of slides */
width: calc(728px * 4);
/* Specify the animation with the
duration and speed */
/* animation: slide 10s ease infinite; */
}
/* Set the background color
of each of the slides */
.slide:nth-child(1) {
background: green;
}
.slide:nth-child(2) {
background: pink;
}
.slide:nth-child(3) {
background: red;
}
.slide:nth-child(4) {
background: yellow;
}
/* Define the animation
for the slideshow */
#keyframes slide {
/* Calculate the margin-left for
each of the slides */
20% {
margin-left: 0px;
}
40% {
margin-left: calc(-728px * 1);
}
60% {
margin-left: calc(-728px * 2);
}
80% {
margin-left: calc(-728px * 3);
}
}
</style>
</head>
<body>
<!-- Define the slideshow container -->
<div id="slideshow">
<div id="slide-wrapper" class="slide-wrapper">
<!-- Define each of the slides
and write the content -->
<div class="slide">
<h1 class="slide-number">
1
</h1>
</div>
<div class="slide">
<h1 class="slide-number">
2
</h1>
</div>
<div class="slide">
<h1 class="slide-number">
3
</h1>
</div>
<div class="slide">
<h1 class="slide-number">
4
</h1>
</div>
</div>
</div>
</body>
</html>
If I understood your question properly, I think you would have to remove the transition property before changing the value and then apply it again once the transition is done.
const item = selectedItem.querySelector(config.carouselHolderId)
item.style.cssText = `transform: translateX(${newDelta}px); transition: none`;
// Restore the transition
item.style.transition = '';
You could temporarily disable the transition:
const config = {
individualItem: '.slide', // class of individual item
carouselWidth: 400, // in px
carouselId: '#slideshow', // carousel selector
carouselHolderId: '#slide-wrapper', // carousel should be <div id="carouselId"><div id="carouselHolderId">{items}</div></div>
}
document.addEventListener("DOMContentLoaded", function(e) {
// Get items
const el = document.querySelector(config.individualItem);
const elWidth = parseFloat(window.getComputedStyle(el).width) + parseFloat(window.getComputedStyle(el).marginLeft) + parseFloat(window.getComputedStyle(el).marginRight);
// Track carousel
let mousedown = false;
let movement = false;
let initialPosition = 0;
let selectedItem;
let currentDelta = 0;
document.querySelectorAll(config.carouselId).forEach(function(item) {
item.style.width = `${config.carouselWidth}px`;
});
document.querySelectorAll(config.carouselId).forEach(function(item) {
item.addEventListener('pointerdown', function(e) {
mousedown = true;
selectedItem = item;
initialPosition = e.pageX;
currentDelta = parseFloat(item.querySelector(config.carouselHolderId).style.transform.split('translateX(')[1]) || 0;
});
});
const scrollCarousel = function(change, currentDelta, selectedItem) {
let numberThatFit = Math.floor(config.carouselWidth / elWidth);
let newDelta = currentDelta + change;
let elLength = selectedItem.querySelectorAll(config.individualItem).length - numberThatFit;
if(newDelta <= 0 && newDelta >= -elWidth * elLength) {
selectedItem.querySelector(config.carouselHolderId).style.transform = `translateX(${newDelta}px)`;
// IMPORTANT LINE
if(newDelta <= 0 && newDelta <= -150) {
const el = selectedItem.querySelector(config.carouselHolderId);
el.classList.add("jump");
el.style.transform = `translateX(-1000px)`;
setTimeout(() => el.classList.remove("jump"), 10);
}
}
}
document.body.addEventListener('pointermove', function(e) {
if(mousedown == true && typeof selectedItem !== "undefined") {
let change = -(initialPosition - e.pageX);
scrollCarousel(change, currentDelta, document.body);
movement = true;
}
});
['pointerup', 'mouseleave'].forEach(function(item) {
document.body.addEventListener(item, function(e) {
selectedItem = undefined;
movement = false;
});
});
});
.slide-wrapper {
transform: translateX(0px);
width: 400px;
height: 400px;
transition: 400ms ease;
user-select: none;
}
.slide-number {
pointer-events: none;
}
.slide-wrapper.jump
{
transition-duration: 10ms;
}
<!DOCTYPE html>
<html>
<head>
<title>HTML and CSS Slideshow</title>
<style>
body {
font-family: Helvetica, sans-serif;
padding: 5%;
text-align: center;
font-size: 50;
overflow-x: hidden;
}
/* Styling the area of the slides */
#slideshow {
overflow: hidden;
height: 400px;
width: 400px;
margin: 0 auto;
}
/* Style each of the sides
with a fixed width and height */
.slide {
float: left;
height: 400px;
width: 400px;
}
/* Add animation to the slides */
.slide-wrapper {
/* Calculate the total width on the
basis of number of slides */
width: calc(728px * 4);
/* Specify the animation with the
duration and speed */
/* animation: slide 10s ease infinite; */
}
/* Set the background color
of each of the slides */
.slide:nth-child(1) {
background: green;
}
.slide:nth-child(2) {
background: pink;
}
.slide:nth-child(3) {
background: red;
}
.slide:nth-child(4) {
background: yellow;
}
/* Define the animation
for the slideshow */
#keyframes slide {
/* Calculate the margin-left for
each of the slides */
20% {
margin-left: 0px;
}
40% {
margin-left: calc(-728px * 1);
}
60% {
margin-left: calc(-728px * 2);
}
80% {
margin-left: calc(-728px * 3);
}
}
</style>
</head>
<body>
<!-- Define the slideshow container -->
<div id="slideshow">
<div id="slide-wrapper" class="slide-wrapper">
<!-- Define each of the slides
and write the content -->
<div class="slide">
<h1 class="slide-number">
1
</h1>
</div>
<div class="slide">
<h1 class="slide-number">
2
</h1>
</div>
<div class="slide">
<h1 class="slide-number">
3
</h1>
</div>
<div class="slide">
<h1 class="slide-number">
4
</h1>
</div>
</div>
</div>
</body>
</html>
I'm being tormented in the past 4 hours to find out how to do this, I don't know what I'm doing wrong, I have a page with multiple layers, I wish to trigger some transition when the needed page has opacity 1, it should be simple when u think of it, here is my code, please help ;)
slide1 = document.querySelector('.slide1');
function videoPlay() {
var videoOne = document.getElementById('myVideo');
if ((slide1.style.opacity) > 0 ) {
videoOne.play();
}
}
videoPlay();
.slide {
width: 100%;
background-size: cover;
background-position: center;
position: absolute;
}
.slide1 {
width: 100%;
background: none;
opacity: 0;
}
<div class="slide slide1">
<div class="slide-content">
<div class="secondColumn">
<video muted id="myVideo">
<source src="Media/Acqua.mp4" type="video/mp4">
</video>
<div class="lowerTab"></div>
</div>
</div>
here is the code which i use to change the opacity using the wheel :
//wheel event
document.addEventListener('wheel',
function scrollWheel(event) {
var fig =event.deltaY;
if (fig > 0) {
slideMove();
}
else if (fig<0) {
slideMovReverse();
}
})
//basic movement
function slideMove() {
if (current === sliderImages.length-1 ) {
current = -1
}
reset();
sliderImages[current+1].style.transition = "opacity 1s ease-in 0s";
sliderImages[current+1].style.opacity= "1.0";
current++;
}
You can use the transitionend event, but you'd have to set up the transition first. As it sits now, there's not much information in your question about the different slides, how the transitions are set up, etc. Here's a baseline to give you an idea:
const slide1 = document.querySelector('.slide1');
const videoEl = document.querySelector('.slide1__video');
const button = document.querySelector('button');
let inView = false;
slide1.addEventListener('transitionend', () => {
let content = 'Playing';
if (inView) {
content = ''
}
videoEl.textContent = content;
inView = !inView;
})
button.addEventListener('click', () => {
slide1.classList.toggle('active')
})
.slide1 {
transition: opacity 500ms linear;
opacity: 0;
border: 1px solid green;
padding: 10px;
margin-bottom: 24px
}
.slide1.active {
opacity: 1
}
<div class="slide1">
Slide 1
<div class="slide1__video"></div>
</div>
<button>Next</button>
Edit
It'll need some love but I think it's in the right direction to what you're after.
const slides = Array.from(document.querySelectorAll('.slide'));
document.addEventListener('wheel', onScroll);
const SCROLL_TOLERANCE = 100;
let currentIndex = 0;
let currentScroll = 0;
function onScroll(e) {
if (e.deltaY > 0) {
currentScroll += 1;
} else {
currentScroll -= 1;
}
if (currentScroll >= (currentIndex * SCROLL_TOLERANCE) + 15) {
showNext();
} else if (currentScroll <= (currentIndex * SCROLL_TOLERANCE) - 15) {
showPrevious();
}
}
function showNext() {
if (currentIndex === slides.length - 1) {
return console.warn('At the end.');
}
currentIndex += 1;
setSlide();
}
function showPrevious() {
if (currentIndex === 0) {
return console.warn('At the beginning.');
}
currentIndex -= 1;
setSlide();
}
function setSlide() {
let newOpacity = 0;
slides.forEach(slide => {
if (+slide.dataset.index === currentIndex) {
newOpacity = 1
} else {
newOpacity = 0;
}
slide.style.opacity = newOpacity;
slide.addEventListener('transitionend', () => {
console.log('Done transitioning!');
// Do things here when the transition is over.
})
});
}
html,
body {
padding: 0;
margin: 0;
font-family: sans-serif;
font-size: 18px
}
.slide {
border: 3px solid #efefef;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
transition: all 500ms linear;
opacity: 0;
transition-delay: 250ms;
}
.slide.active {
opacity: 1;
}
<div class="slide active" data-index="0">
Slide 1
</div>
<div class="slide" data-index="1">
Slide 2
</div>
<div class="slide" data-index="2">
Slide 3
</div>
<div class="slide" data-index="3">
Slide 4
</div>
This is probably best viewed in the fiddle here.
This is a simple fade in/out slideshow for a portfolio. The displayed slide has a class "active". It should fade out before the next slide fades in. Instead it disappears instantly. The fade in of the next slide is working fine.
This is the basic html code.
var x = document.getElementById("inner-portfolio-wrapper").childElementCount;
var j = 1;
var k;
function clickMe() {
if (x > 1) {
if (j === x) {
j = 1;
k = x;
} else {
k = j;
j++;
}
console.log("j = " + j);
console.log("k = " + k);
document.getElementById("portfolio-item-" + k).style.display = "none";
document.getElementById("portfolio-item-" + j).style.display = "block";
document.getElementById("portfolio-item-" + j).classList.add("active");
document.getElementById("portfolio-item-" + k).classList.remove("active");
}
}
#inner-portfolio-wrapper {
position: relative;
width: 150px;
height: 50px;
}
.portfolio-item {
display: none;
animation: fadeIn 2s;
}
.portfolio-item .active {
display: block;
animation: fadeOut 2s;
}
.portfolio-item:first-child {
display: block;
}
#keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<div id="inner-portfolio-wrapper">
<div id="portfolio-item-1" class="portfolio-item">
<h2>
ITEM 1
</h2>
</div>
<div id="portfolio-item-2" class="portfolio-item">
<h2>
ITEM 2
</h2>
</div>
<div id="portfolio-item-3" class="portfolio-item">
<h2>
ITEM 3
</h2>
</div>
</div>
<button type="button" onclick="clickMe()">
Click Me
</button>
Any help to get the fade out working would be appreciated. Everything else is working just fine.
For now, fadeOut animation doesn't work because click on button immediately removes .active from the item and it gets style display: none.
To get the desired effect the only thing your onClick function has to do - is to trigger fadeOut animation. All next actions have to be called as callback of animationEnd event.
You also need to make some changes in styles:
.portfolio-item {
display: none;
}
.portfolio-item.active {
display: block;
animation: fadeIn 2s;
}
.portfolio-item.active.out {
display: block;
animation: fadeOut 2s;
}
And finally, it works:
//detect the supported event property name and assign it to variable
// Function from David Walsh: http://davidwalsh.name/css-animation-callback
function whichAnimationEvent() {
var t,
el = document.createElement("fakeelement");
var animations = {
"animation": "animationend",
"OAnimation": "oAnimationEnd",
"MozAnimation": "animationend",
"WebkitAnimation": "webkitAnimationEnd"
}
for (t in animations) {
if (el.style[t] !== undefined) {
return animations[t];
}
}
}
var animationEvent = whichAnimationEvent();
//Declare global variables
var total = document.getElementById("inner-portfolio-wrapper").childElementCount;
var currentNum = 1
var nextNum;
//Get all portfolio items add add them an event listener
var items = document.getElementById("inner-portfolio-wrapper").children
for (var i = 0; i < items.length; i++) {
items[i].addEventListener(animationEvent, function(e) {
if (e.animationName === 'fadeOut') {
this.classList.toggle('out')
this.classList.toggle('active');
document.getElementById("portfolio-item-" + nextNum).classList.toggle('active')
currentNum = nextNum
}
})
}
//When page loaded make first porfolio item active
items[0].classList.add("active");
function clickMe() {
if (total > 1) {
var currentElement = document.getElementById("portfolio-item-" + currentNum);
nextNum = (currentNum === total) ? 1 : currentNum + 1
currentElement.classList.toggle('out')
}
}
#inner-portfolio-wrapper {
position: relative;
width: 150px;
height: 50px;
}
.portfolio-item {
display: none;
}
.portfolio-item.active {
display: block;
animation: fadeIn 2s;
}
.portfolio-item.active.out {
display: block;
animation: fadeOut 2s;
}
#keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<div id="inner-portfolio-wrapper">
<div id="portfolio-item-1" class="portfolio-item">
<h2>
ITEM 1
</h2>
</div>
<div id="portfolio-item-2" class="portfolio-item">
<h2>
ITEM 2
</h2>
</div>
<div id="portfolio-item-3" class="portfolio-item">
<h2>
ITEM 3
</h2>
</div>
</div>
<button type="button" onclick="clickMe()">
Click Me
</button>
A Website uses only one single jQuery function which we'd like to replace by an equal pure Javascript function. However I struggle to convert (translate) that function.
I am aware jQuery is perfect for that task but the trade-off to download all jQuery code for the few lines of Javascript might be worth the effort - in which I do not succeed.
What the script is doing:
When hovering a sectionBox the all other sectionBox(es) fadeTo a value of 0.4.
The script does NOT utilize IDs assigned to each SectionBox.
The question is: How to handle the equivalent of children and siblings in Javascript?
Update:
After doing some homework I came up with some own functional code which is far from the final Goal to achieve equal functionality and smooth transitions, but at least in its functionality comparable to the existing function in the jQuery code.
Also I rephrased the question(s).
A really great solution using CSS only was provided to solve the problem. However I'd like to learn whether and how I can solve this in pure Javascript.
Currently there are three columns. Left and Center columns are affected by my homework-code whereas the column to the right uses the original jQuery code.
May I suggest to look at the example below to visualize the anticipated Goal.
Here are few Questions:
Q1: How can the functions be combined into less and more efficient functions?
So that hovering an element encompasses all elements in the three columns.
Running the code in Codepen one can observe that when leaving a column (left or center) the last item hovered remains with a value of low opacity.
Q2: How can this behaviour be controlled?
/* --- code to convert ---*/
/*hover left column*/
/*$("#left").children().hover(function() {
$(this).siblings().stop().fadeTo(300,0.4);
$('#center > .sectionBox').stop().fadeTo(300,0.4);
$('#right > .sectionBox').stop().fadeTo(300,0.4);
},
function() {
$(this).siblings().stop().fadeTo(200,1);
$('#center > .sectionBox').stop().fadeTo(200,1);
$('#right > .sectionBox').stop().fadeTo(200,1);
});
*/
/* --- attempt to convert jQuery code from above ---*/
/* --- currently affecting left- and center-columns only --- */
/* --- How to combine functions into less and more efficient functions */
/*
var elem_IDLft = 'left'
var elem_IDCtr = 'center'
var elem_IDRgt = 'right'
*/
/* --- LEFT Column ---*/
var elemLft_ID = 'left'
var elemL_name = document.getElementById(elemLft_ID).children;
var elemL_length = elemL_name.length;
for (var i=0; i<elemL_length; i++) {
elemL_name[i].addEventListener("mouseover", mouseOverL);
elemL_name[i].addEventListener("mouseout", mouseOutL);
}
/*---mouse events---*/
/*---Don't use: style.display = "none"--*/
//function mouseOver() {this.style.opacity = "1.0";}
//function mouseOut() {this.style.opacity = "0.4";}
function mouseOverL() {
for (var i=0; i<elemL_length; i++) {
if (elemL_name[i] === this) {elemL_name[i].style.opacity = "1.0";}
else {elemL_name[i].style.opacity = "0.5";}
}
return;
}
function mouseOutL() {
for (var i=0; i<elemL_length; i++) {
if (elemL_name[i] !== this) {elemL_name[i].style.opacity = "1.0";}
else {elemL_name[i].style.opacity = "0.5";}
}
return;
}
// --- To-Do: smooth Transitions
/* --- CENTER Column ---*/
var elemCtr_ID = 'center'
var elem_name = document.getElementById(elemCtr_ID).children;
var elem_length = elem_name.length;
for (var i=0; i<elem_length; i++) {
elem_name[i].addEventListener("mouseover", mouseOver);
elem_name[i].addEventListener("mouseout", mouseOut);
}
/*---mouse events---*/
/*---Don't use: style.display = "none"--*/
//function mouseOver() {this.style.opacity = "1.0";}
//function mouseOut() {this.style.opacity = "0.4";}
function mouseOver() {
for (var i=0; i<elem_length; i++) {
if (elem_name[i] === this) {elem_name[i].style.opacity = "1.0";}
else {elem_name[i].style.opacity = "0.5";}
}
return;
}
function mouseOut() {
for (var i=0; i<elem_length; i++) {
if (elem_name[i] !== this) {elem_name[i].style.opacity = "1.0";}
else {elem_name[i].style.opacity = "0.5";}
}
return;
}
/* --- Question: How to properly get the inverse for the above 'this' ?---*/
/* --- So that the element 'this' (hovered) has style.opacity = 1 ---*/
/* --- and all others from elem_name get style.opacity = 0.4 --- */
/* --- At the moment it's really bumpy --- */
/* --- Possibly caused by many forced reflows while executing Javascript occur --- */
/* --- The goal is to obtain smooth transitions ---*/
/*-------------------------------------*/
/*--- more jQuery code for columns 'center' and 'right' ---*/
/*--- center column*/
/*
$("#center").children().hover(function() {
$(this).siblings().stop().fadeTo(300,0.4);
$('#left > .sectionBox').stop().fadeTo(300,0.4);
$('#right > .sectionBox').stop().fadeTo(300,0.4);
},
function() {
$(this).siblings().stop().fadeTo(200,1);
$('#left > .sectionBox').stop().fadeTo(200,1);
$('#right > .sectionBox').stop().fadeTo(200,1);
});
*/
/*--- right column*/
$("#right").children().hover(function() {
$(this).siblings().stop().fadeTo(300,0.4);
$('#center > .sectionBox').stop().fadeTo(300,0.4);
$('#left > .sectionBox').stop().fadeTo(300,0.4);
},
function() {
$(this).siblings().stop().fadeTo(200,1);
$('#center > .sectionBox').stop().fadeTo(200,1);
$('#left > .sectionBox').stop().fadeTo(200,1);
});
/*liquid display*/
body {font-family:Verdana, Arial, Helvetica, sans-serif; font-size:62.5%;}
html {font-size:10px; color:#fff; background-color:#242424;}
#wrapper {width: 100%;font-size: 1.2rem; overflow: hidden}
.column {float: left; width: 31.0%; margin-right: 3.5%;} /* 100%-(3*31%)=7%/2=3.5%*/
.last {margin-right: 0;}
h1 {font-size: 1.2rem; text-align:center;padding:-1rem;}
#media screen and (max-width: 800px) {#left.column, #center.column, #right.column {width: 100%;}}
.sectionBox {
background-color: rgba(100,100,100,1.0);
box-shadow: 5px 5px 7px #111;
margin: 0 0 2.0rem 0;
padding: 0.1rem;
}
.sectionBox > p > code {background-color:#efefef; color:#111;}
#left {color:#fffaaa;}
#center {color:#fffccc;}
#right {color:#fffeee;}
<div id="wrapper">
<div class="sectionBox"><h1>Flexbox - fadeTo - transition: from jQuery to pure Javascript</h1>
<p><strong>An attempt to translate this jQuery 'fadeTo'-function to pure Javascript.</strong>
<br />
<code>
/*hover left column*/<br>
$("#left").children().hover(function() {
$(this).siblings().stop().fadeTo(300,0.4);
$('#center > .sectionBox').stop().fadeTo(300,0.4);
$('#right > .sectionBox').stop().fadeTo(300,0.4);
},
function() {
$(this).siblings().stop().fadeTo(200,1);
$('#center > .sectionBox').stop().fadeTo(200,1);
$('#right > .sectionBox').stop().fadeTo(200,1);
});
</code>
</p>
</div>
<div id="left" class="column">id="left"
<section class="sectionBox"><h1>id="newPictures"</h1>
</section>
<section class="sectionBox"><h1>id="oldPictures"</h1>
</section>
<section class="sectionBox"><h1>id="somePlace"</h1>
</section>
<section class="sectionBox"><h1>id="someOtherPlace"</h1>
</section>
</div>
<div id="center" class="column">id="center"
<section class="sectionBox"><h1>id="travelNews"</h1>
</section>
<section class="sectionBox"><h1>id="otherTravelNews"</h1>
</section>
<section class="sectionBox"><h1>id="impressum"</h1>
</section>
</div>
<div id="right" class="column last">id="right"
<section class="sectionBox"><h1>id="search"</h1>
</section>
<section class="sectionBox"><h1>id="toolsFaq"</h1>
</section>
</div>
</div> <!--.wrapper-->
This is the working example of the relevant jQuery code.
/*hover left column*/
$("#left").children().hover(function() {
$(this).siblings().stop().fadeTo(300,0.4);
$('#center > .sectionBox').stop().fadeTo(300,0.4);
$('#right > .sectionBox').stop().fadeTo(300,0.4);
},
function() {
$(this).siblings().stop().fadeTo(200,1);
$('#center > .sectionBox').stop().fadeTo(200,1);
$('#right > .sectionBox').stop().fadeTo(200,1);
});
/*hover center column*/
/*same function for "#center" and "#right" columns*/
... and here is the same code over at codepen.
Link to Codepen
You can use Element.animate()
const div = document.getElementById("animate");
div.onclick = () => {
div.animate({
opacity: 0
}, {
duration: 1000,
easing: "linear",
iterations: 1,
fill: "both"
})
.onfinish = function() {
console.log(div.style.opacity);
}
}
#animate {
width: 50px;
height: 50px;
background: blue;
color: gold;
}
<div id="animate">click</div>
You don't need jQuery for that... and you don't even need javascript either.
pure CSS will do:
/*liquid display*/
body {font-family:Verdana, Arial, Helvetica, sans-serif; font-size:62.5%;}
html {font-size:10px; color:#fff; background-color:#242424;}
#wrapper {overflow: hidden; width: 100%;}
.column {float: left; width: 31.0%; margin-right: 3.5%;} /* 100%-(3*31%)=7%/2=3.5%*/
.last {margin-right: 0;}
#media screen and (max-width: 800px) {#left.column, #center.column, #right.column {width: 100%;}}
.sectionBox {
font-size: 1.6rem;
background-color: rgba(100,100,100,1.0);
box-shadow: 5px 5px 7px #111;
margin: 0 0 1.5rem 0;
padding: 0.5rem 0.3rem 0.5rem 0.3rem;
opacity:1; /* set initial opacity and transition time*/
transition:opacity 200ms ease; /*for when hover-out*/
}
#left {color:#fffaaa;}
#center {color:#fffccc;}
#right {color:#fffeee;}
#wrapper{
pointer-events: none; /*prevents the :hover from firing*/
} /*when not actually on an item */
.sectionBox{
pointer-events:auto; /*resets the hover on the items */
}
#wrapper:hover .sectionBox{
opacity:0.4; /*when hovering the container, all items becomes translucent*/
transition: opacity 300ms ease;
}
#wrapper:hover .sectionBox:hover{
opacity:1; /*prevents the specific hovered item opacity from changing*/
}
<div id="wrapper">
<div id="left" class="column">
<section class="sectionBox"> id="newPictures"
</section>
<section class="sectionBox"> id="oldPictures"
</section>
<section class="sectionBox"> id="somePlace"
</section>
</div>
<div id="center" class="column">
<section class="sectionBox"> id="travelNews"
</section>
<section class="sectionBox"> id="impressum"
</section>
</div>
<div id="right" class="column last">
<section class="sectionBox"> id="search"
</section>
<section class="sectionBox"> id="toolsFaq"
</section>
</div>
</div>
The trick is to use the hover on the container to adjust the opacity of all the childs, while setting the pointer-events to none so it won't fire when not actually over a child.
Then it's just using the hover on the specific child to reset the opacity to 1, and adjusting the transitions.
100% pure CSS magic FTW!
If anyone can phrase this question better than I can, please advise and I will alter (or edit yourself).
Here's my current jsfiddle: https://jsfiddle.net/5v7mzadu/
My HTML:
<div class="text-cycler">
WE <div class="c-text" id="ctext-1">CARE</div>
<div class="c-text" id="ctext-2">THINK</div>
<div class="c-text" id="ctext-3">SEE</div>
<div class="c-text" id="ctext-1">KNOW</div>
</div>
My CSS:
.text-cycler {
text-align:center;
font-size:25px;
}
.c-text {
display:inline-block
}
My Javascript:
var divs = $('div[id^="ctext-"]').hide(),
i = 0;
(function cycle() {
divs.eq(i).fadeIn(400)
.delay(1000)
.fadeOut(400, cycle);
i = ++i % divs.length;
})();
As you can see the second word fades in/out,. I'd like to add a smooth transition to the div, so that the width of the div container does NOT abruptly change width size. (so that the width "snap" is more smooth)
Can anyone help?
I believe you needed the animation over the content and text alignment center.
And indeed this must solve your purpose.
I have added span{white-space: nowrap; vertical-align: text-top;} to force it to align in single line, and added jQuery animate method to animate the width of the rotating text
And here's the fiddle for you to play around
var divs = $('div[id^="ctext-"]').hide(),
i = 0;
(function cycle() {
divs.eq(i)
.animate(400, function() {
$('.x').animate({
width: $(this).innerWidth()
});
})
.fadeIn(400)
.delay(1000)
.fadeOut(400, cycle);
i = ++i % divs.length;
})();
.text-cycler {
text-align: center;
font-size: 25px;
}
span {
white-space: nowrap;
vertical-align: text-top;
}
.c-text {
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text-cycler">
<span> WE </span>
<span class="x">
<div class="c-text" id="ctext-1">CARE</div>
<div class="c-text" id="ctext-2">THINK</div>
<div class="c-text" id="ctext-3">SEE</div>
<div class="c-text" id="ctext-1">KNOW</div>
</span>
</div>
See this snippet
var divs = $('div[id^="ctext-"]').hide(),
i = 0;
(function cycle() {
divs.eq(i).fadeIn(400)
.delay(1000)
.fadeOut(400, cycle);
i = ++i % divs.length;
})();
.text-cycler {
font-size:25px;
position:fixed; /*added*/
padding-left:40% /*added*/
}
.c-text {
display:inline-block
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text-cycler" align="center">
WE <div class="c-text" id="ctext-1">CARE</div><div class="c-text" id="ctext-2">THINK</div><div class="c-text" id="ctext-3">SEE</div><div class="c-text" id="ctext-1">KNOW</div>
</div>
JavascriptLess way.
If you want to get funky. (No seriously, this is more a funky solution than usable)
.text-cycler {
width:75%;
margin:auto;
user-select: none;
text-align:center;
font-size:5vw;
}
.text-cycler:after {
content:"";
display:inline-block;
animation: change;
animation-duration: 10s;
animation-iteration-count: infinite;
}
#keyframes change {
0% {
content: "CARE";
opacity: 0;
}
3% {
opacity: 1;
}
22% {
opacity: 1;
}
25% {
content: "CARE";
opacity: 0;
}
25.1% {
content: "THINK";
}
28% {
opacity: 1;
}
47% {
opacity: 1;
}
50% {
content: "THINK";
opacity: 0;
}
50.1% {
content: "SEE";
}
53% {
opacity: 1;
}
72% {
opacity: 1;
}
75% {
content: "SEE";
opacity: 0;
}
75.1% {
content: "KNOW";
}
78% {
opacity: 1;
}
97% {
opacity: 1;
}
100% {
content: "KNOW";
opacity: 0;
}
}
<div class="text-cycler">
WE
</div>