Assign class to another class (jQuery)

[Georgich]

Hi guys, sorry for question, i know it may be “out of scope”. But maybe you can help me another again.

I managed to implement ScrollReveal (https://scrollrevealjs.org/) on my test site. Now want to achieve this:

There is a Heading Element. The structure is:

• x-text-content
  – x-text-content-text
  —x-text-content-primary
  —x-text-content-subheadline

I want to assign .my-custom-class-reveal-from-top to x-text-content-primary and .my-custom-class-reveal-from-bottom to x-text-content-subheadline. How can i do this? Probably i need to use jquery to assign the class to another class?

[Georgich]

$(’.x-text-content-text-subheadline’).addClass(‘reveal-it’); causes errors…

[thai]

Hi @Georgich,

I can’t confirm assign the classes using the jQuery will work with ScrollReveal library.

But you can try with this code:

jQuery(document).ready(function($) {
	$(".x-text-content-primary").addClass('my-custom-class-reveal-from-top');
	$(".x-text-content-subheadline").addClass('my-custom-class-reveal-from-bottom');
});

Please note that custom coding is outside the scope of our support. Issues that might arise from the use of custom code and further enhancements should be directed to a third party developer.

Hope that helps and thank you for understanding.

[Georgich]

Thanks! Errors have gone away. But there are no assigned classes in the code. You can check it.

No classes added…

[paul.r]

Hi @Georgich,

There is still a js error.

Please change this code

$('.slicky').slick({
  dots: true,
  infinite: true,
  speed: 500,
  fade: true,
  cssEase: 'linear'
});

to this

jQuery('.slicky').slick({
  dots: true,
  infinite: true,
  speed: 500,
  fade: true,
  cssEase: 'linear'
});

Hope that helps

[Georgich]

@paul.r

jQuery(’.slicky’).slick({
dots: true,
infinite: true,
speed: 500,
fade: true,
cssEase: ‘linear’
});

Thanks! Errors have gone away totally, but classes wasn’t added. Elements still got no classes wich i’m tring to assign.

[paul.r]

Hi @Georgich,

The target class is incorrect. Please change the js code to this

jQuery(document).ready(function($) {
	$(".x-text-content-text-primary").addClass('my-custom-class-reveal-from-top');
	$(".x-text-content-text-subheadline").addClass('my-custom-class-reveal-from-bottom');
});

Thanks

[Georgich]

Many thanks! A can confirm that classes were added. But ScrollReveal library won’t work dat way. It only works then classes are applied in Customize. Anyway, i want to thank you guys a lot, now i know how to assign classes that way with jQuery. It will helps me a lot in a future! MANY THANKS!

[lely]

You’re always welcome Philipp!