Tagged: , ,

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • December 22, 2024 at 5:06 pm #1474141
    henningtillmann

    Hi,

    I want to add Avia-Elements on runtime, especially new Color Section with parallax. I can add those elements without a problem with something like this:

    const section = document.createElement('div');
section.id = 'av_section_wp' + i;
section.classList.add('avia-section', 'alternate_color', 'avia-section-default', 'avia-no-border-styling', 'avia-full-stretch', 'av-parallax-section', 'avia-bg-style-parallax', 'av-minimum-height', 'av-minimum-height-100', 'av-height-100', 'container_wrap', 'fullscreen');
section.dataset.sectionBgRepeat = 'stretch';
section.dataset.av_minimum_height_pc = '100';
section.dataset.av_min_height_opt = '100';

const sectionParallax = document.createElement('div');
sectionParallax.classList.add('av-parallax', 'active-parallax', 'enabled-parallax');
sectionParallax.dataset.aviaParallaxRation = '0.3';

...

    But this new section doesn’t have a parallax effect. It seems like it is isn’t registered in the JavaScript module for parallax. Is there a way to register those elements or generally speaking, is there a better way to add Avia elements on runtime?

    Best,
    Henning

    December 23, 2024 at 6:05 am #1474165
    Ismael

    Hey henningtillmann,

    Thank you for the inquiry.

    We haven’t tried this before but it should work. Just make sure that script is loaded before the avia-parallax-support script or the avia-snippet-parallax.js file.

    Example:

    function ava_enqueue_additional_script_before_parallax() {
    // Enqueue your new script with a dependency on 'avia-default' to make sure it loads before 'avia-parallax-support'
    wp_enqueue_script( 'your-new-script', "{$template_url}/js/your-new-script{$min_js}.js", array( 'avia-default' ), $vn, true );
}
add_action( 'wp_enqueue_scripts', 'ava_enqueue_additional_script_before_parallax', 20 );

    Let us know of the result.

    Best regards,
    Ismael

    December 23, 2024 at 10:34 am #1474171
    henningtillmann

    Thank you, Ismael.

    But the elemens will be added after a user interaction (after the page is rendered). So is there a way to “register” newly added elements to Enfolds JavaScript structure?

    December 23, 2024 at 12:38 pm #1474177
    Ismael

    Hi,

    Thank you for the update.

    You may need to call the enfold\js\avia-snippet-parallax.js > avia_parallax function after the interaction. 

     $( function()
    {
		//activate parallax scrolling for background images (sections) and objects.
    	if( $.fn.avia_parallax )
		{
			$( '.av-parallax,.av-parallax-object' ).avia_parallax();
		}
	});

    Achieving the customization you described may require significant time and theme modifications, which are beyond the scope of our support. For assistance, consider hiring a freelancer via our customization page.

    If you have other questions or need further help, let us know.

    Best regards,
    Ismael

    December 24, 2024 at 1:51 pm #1474232
    henningtillmann

    Thanks Ismael, this is what I was looking for!

    Is there any documentation somewhere on all functions like avia_parallax()?

    December 25, 2024 at 7:33 am #1474247
    Ismael

    Hi,

    Thanks for following up.

    Unfortunately, there is no documentation available for some of the core scripts or functions. All the available documentation for the theme can be found here: https://kriesi.at/documentation/enfold/

    Best regards,
    Ismael

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.