Data Attributes #2

Support
#1

Going back to topic https://theme.co/apex/forum/t/data-attributes/42768

The question was: “How to add data attributes” to an elements or columns/sections/rows. Now i have another question.

As i understand, there is a way of using jquery to ADD AN ATTRIBUTE WITH VALUE TO A CLASS. So here is a topic on stackoverflow.

Just like .attr(), you give two arguments to change the data:

$(".class").data("attribute", "value");

Note that if you add the data with .data rather than .attr, it stores it internally within jQuery, you won’t see it as a data-attribute attribute in the DOM. jQuery only uses the data-attribute attribute as an initial source of the value the first time you read it.

So the new question is, how to make it right.

I’ve added a AOS.js (https://michalsnik.github.io/aos/) to my test site. It have a data-attributes (and values) such as:

data-aos="fade-up"
data-aos-offset="200"
data-aos-delay="50"
data-aos-duration="1000"
data-aos-easing="ease-in-out"
data-aos-mirror="true"
data-aos-once="false"
data-aos-anchor-placement="top-center"

So i want to add this attributes with values to my custom classes with jquery and use it right. Declare a class “fade-up” with an attribute data-aos=“fade-up” and then i will apply this class to an element that will trigger up an animation.

So th question is… IS IT POSSIBLE? Can i use something like this?

$(".class").data("attribute", "value");

P.S. Sorry for my english )

#2

This code goes in header:

<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

This code goes in child-theme functions.php:

//* Enqueue script to activate AOS.js
add_action('wp_enqueue_scripts', 'x_aos_init');
function x_aos_init() {
	add_action( 'print_footer_scripts', 'aos_init' );
}

//* Add JavaScript before </body>
function aos_init() { ?>
	<script type="text/javascript">
		new AOS.init();
	</script>
<?php }

Adding this code in text element:
<div data-aos="fadeInUp"><h2>Simple Headline</h2></div>

Dat works.

#3

Hi @Georgich,

Currently, it’s not possible to add the data-attribute to the section, row, …

If you add the data-attributes via custom JS, it wouldn’t work.

You can only wrap the custom HTML around some shortcodes(button, headline, icon, …) then add them to the text element.

<div data-aos="fadeInUp">[button type="real" shape="square" size="mini" href="#example" title="Example"]Square Button[/button]</div>

Hope it helps :slight_smile:

1 Like
#4

So sad ) It was my last hope ) now it’s time to code a lot )

Anyway, thank you for a support! Great as always!

#5

Thank you for your understanding :slight_smile:

1 Like
#6

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.