Menu
I am having a problem with classList.add javascript function. I am trying to add "active" class onto elements and apply css style for those active classes. However, it doesn't seem to work and I am having hard time with it. Could anyone help me with this issue? Below is the current part from my HTML file and css part that corresponds to this javascript.
Part:
<script>
function debounce(func, wait = 20, immediate = true) {
var timeout;
return function() {
var context = this, args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
}
const sliderImages = document.querySelectorAll('.slide-in');
function checkSlide(e) {
sliderImages.forEach(sliderImage => {
const slideInAt = (window.scrollY + window.innerHeight) - sliderImage.height / 2;
const imageBottom = sliderImage.offsetTop + sliderImage.height;
const isHalfShown = slideInAt > sliderImage.offsetTop;
const isNotScrolledPast = window.scrollY < imageBottom;
if(isHalfShown && isNotScrolledPast) {
sliderImage.classList.add('active');
} else {
sliderImage.classList.remove('active');
}
})
}
window.addEventListener('scroll', debounce(checkSlide));
</script>CSS part that corresponds to above javascript:
.slide-in {
opacity: 0;
transition:all .5s;
}
.align-left {
float: left;
/*margin-right: 20px;*/
}
.align-right {
float: right;
/*margin-right: 20px;*/
}
.align-left.slide-in {
transform:translateX(-30%) scale(0.95);
}
.align-right.slide-in {
transform:translateX(30%) scale(0.95);
}
.slide-in.active {
opacity: 1;
transform: translateX(0%) scale(1);
}Please help me with this issue.
366
To add multiple classes to an element, select the element and pass multiple classes to the classList. add() method, e.g. box. classList. add('bg-blue', 'text-white') .
classList property The classList property has add() and remove() methods that allow passing multiple classes as arguments. Let's say we have a button with id value of button . To add multiple classes, you'll need to pass each class as a separate parameter to the add method.
IE 11 doesn't support assigning to classList · Issue #3808 · Fyrd/caniuse · GitHub.
If the specified class already exist, the class will not be added. contains(class) Returns a Boolean value, indicating whether an element has the specified class name. Possible values: true - the element contains the specified class name. false - the element does not contain the specified class name.
There are 3 ways to add CSS class using javascript. 1. Using classList property The classList property of the HTML element returns a live representation of the element's class attribute known as DOMTokenList. The DOMTokenList is read-only but it provides add () methods to add classes to the element. Select the HTML element.
Definition and Usage. The classList property returns the class name (s) of an element, as a DOMTokenList object. This property is useful to add, remove and toggle CSS classes on an element. The classList property is read-only, however, you can modify it by using the add () and remove () methods.
The classList property is read-only, but you can use add () and remove () methods to add or remove CSS classes. The classList property is useful both to add, remove and toggle CSS classes on an element. The number of classes in the list.
There is nothing wrong with the classList functionality instead i have made a few changes in the code as shown below,
<script>
function debounce(func, wait , immediate) {
var timeout;
return function() {
var context = this, args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
};
const sliderImages = document.querySelectorAll('.slide-in');
function checkSlide(e) {
sliderImages.forEach(sliderImage => {
const slideInAt = (window.scrollY + window.innerHeight) - (sliderImage.clientHeight / 2);
const imageBottom = sliderImage.offsetTop + sliderImage.clientHeight;
const isHalfShown = slideInAt > sliderImage.offsetTop;
const isNotScrolledPast = window.scrollY < imageBottom;
if(isHalfShown && isNotScrolledPast) {
sliderImage.classList.add('active');
} else {
sliderImage.classList.remove('active');
}
})
}
var myEfficientFn = debounce(function() {checkSlide();}, 20,true);
window.addEventListener("scroll", myEfficientFn);
</script>
<script> tag inside the <body> tag .height property usage by the clientHeight
window.addEventListener('scroll', debounce(checkSlide)); the debounce function got called on load of the window the call of the function was used.When we use the code window.addEventListener("scroll", function(){return debounce(checkSlide);}); the function gets assigned to that event and gets called every time that event happens.
189
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
