Add or remove class dynamically

[twitchyjoe]

Hello,

Iv been doing some custom scripting, and it seems to me that X doesn’t allow for classes to be edited dynamically correct?
For instance using the
.addClass() or .removeClass() commands within javascript doesnt actually add or remove classes from elements or containers.

Is this a limitation of the theme due to how it handles classes? Or is there some sort of workaround that can accomplish the same result?

Just to clarify, im not talking about simply adding a custom class with the built in class field. Im talking about an element that gains an additional class with a command. Similar to how when you hover a button X adds an “x-active” class to the element.

[ruenel]

Hi Dennis,

Thanks for writing in! We do not have any limitation nor block any JS code. Maybe it has not been triggered which is why the addClass() or removeClass() function does not tale place. As I understand, you will have to use a condition in the code to remove or add your custom class. Could you please provide us the full javascript code that you are using?

Thank you in advance.

[twitchyjoe]

Hello again RueNel,

I did some debugging and the issue lied with the $(window).scrollTop() function, as well as the .position().top function that I was using previously. The $(window).scrollTop() was not recognized as function, and the .position().top would always return 0 instead of how far down an element was from the top of the page. Most likely outdated functions which caused browser compatibility issues.

Iv resolved the problem. Since I saw a ton of posts about the default X fade in effect firing too late (50% of the way into the view port) and asking how to change the trigger point. Heres the javascript I used. Feel free to edit the “1500” and “1000” values as you see fit.

$(document).ready(function() {
  			
	  				var inner = $(".down-arrow"); 			
    				var elementPosTop = inner.offset().top;  			
    				var viewportHeight = $(window).height();
  			
  
    $(window).on('scroll', function() {
     		
       			var scrollPos = window.scrollY;      	
        		var elementFromTop = elementPosTop - scrollPos;
      	     	
      
        if (elementFromTop > 1500 & elementFromTop < elementPosTop + viewportHeight) {
          	
          				inner.removeClass("active");  		
      	}
      	
      	if (elementFromTop < 1000 & elementFromTop < elementPosTop + viewportHeight) {
            			inner.addClass("active");
            			
        }
    });
  
});

Here is the CSS animation for fading in an element.

//Down arrow animation css
.down-arrow  {
    visibility: hidden;
}
.down-arrow .active {
  	visibility:visible;
}

.down-arrow .active{
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
    -webkit-animation-duration: 1.0s;
    animation-duration: 1.0s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
}

This code will fade in any element with the class .down-arrow near the bottom of the screen, and then hide the element when scrolled high out of view so it can be reset and fired again. Hopefully this can help someone else until the feature is added.

Oh and thanks for the reply as always, once I knew for sure the class commands worked with X it was much easier to figure out the issue.

[ruenel]

Hey Dennis,

It’s good to know that you have resolved the issue.
We also appreciate for sharing your code too.

Best Regards.