CODEWITHSUNDEEP
javascripthtmlcss
Tae
Tae

Reputation: 197

Javascript classList.add is not working

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.

Upvotes: 6

Views: 7343

Answers (1)

GraveyardQueen
GraveyardQueen

Reputation: 769

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>
  • I had placed the <script> tag inside the <body> tag .
  • In the checkSlide function i have replace the height property usage by the clientHeight
  • And finally i have returned the debounce function as seen in the last line of the code ,instead of calling the function because when the code was like this 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.

Upvotes: 1

Related Questions