some handy tips about oxygen an js

Oxygen add js

To start, open a code block or JS advanced tab. Then wrap your JS with the following:

(function($){
    // Your code goes here. You can use $!
})(jQuery);

What we have above is called an anonymous and self-executing function.
Adding the parentheses at the end calls the function immediately after declaration (hence, self-executing). We can then pass the jQuery object as a parameter, which we decide to represent as the common $ symbol within our code block.

//Getting the Component ID
//using the $ for jquery
(function($){
    var el = $('#%%ELEMENT_ID%%'); // el stands for "element"
})(jQuery);

(function($) {
    var el = $('#%%ELEMENT_ID%%');
 
    el.click(function() {
        console.log('Cool message!');
    });
})(jQuery);

//colors
(function($) {
	$('#%%ELEMENT_ID%%').css('color', 'green');
})(jQuery);
//global oxygen colors by id
every global color has a id (see beside color name)
this can be used as a variable in oxygen codeblock custom css o easy post's css template

es. .class{color:color(12);}

//flickity slider
(function($) {
	'use strict';
	$('#%%ELEMENT_ID%%').attr('data-flickity', '{ "cellAlign": "left", "contain": true }');
}(jQuery));

//sticky on scroll
jQuery(window).scroll(function() {
	if (jQuery( "#%%ELEMENT_ID%%" ).hasClass( "oxy-sticky-header-active" )) {
		jQuery("#inner_content-22-6").css("margin-top", "180px");
	}
});

//remove attributo from video
jQuery(document).ready(function($){
	$("#%%ELEMENT_ID%% video").removeAttr("loop");
});

//Easy Posts ID
%%EPID%%
refers to the current Easy Posts instance’ ID.

For example,

%%EPID%% .oxy-posts {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}