Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #1363039

    Hi Enfold Team,

    I´d like to use a headline rotator (typewriter) for my site that stopps the anmiation after the first pass with the last text element.
    Is there a simple solution to this?

    Thank you very much for your reply in advance.

    Best regards,
    fkm

    #1363047

    if you are familiar with child-theme alb elements ( Link ) – you can use the headline-rotator file as child-theme file.
    the thing to edit is the js file:

    open the headline_rotator.js file
    find ( near line 65) :

    if(_self.options.animation != "typewriter")
    {
    	_self._move({}, _self.open);
    	_self._autoplay();
    }

    and replace with:

    if(_self.options.animation != "typewriter")
    {
    	_self._move({}, _self.open);
    	_self._autoplay();
    	if(_self.open == _self.count - 1) {
    		clearInterval(_self.autoplay);
    	}
    }

    upload that edited file to your child-theme/shortcodes folder.

    to load now the child-theme script – deregister first the parent script then load the child-theme file
    (via child-theme functions.php snippet)

    function load_child_theme_headline_rotator_script() {
       wp_deregister_script( 'avia-module-rotator' );
       wp_enqueue_script( 'avia-child-module-rotator', get_stylesheet_directory_uri().'/shortcodes/headline_rotator.js', array( 'avia-shortcodes' ), false, true );
    }
    add_action( 'wp_enqueue_scripts', 'load_child_theme_headline_rotator_script', 100 );

    PS: you see that only non Typewriter headline rotators are influenced

    #1363132

    Hi folks!

    Thank you for the inquiry.

    @fkm: You can try the recommended changes above. Just let us know if you need help with the adjustments.

    @guenni007: Thanks for the help!

    Best regards,
    Ismael

    #1364875

    Hi Guenni007 and hi Ismael,

    thank you very much for your quick replies and please excuse my late one.

    @guenni007:
    Unfortunatelly I´m not familiar with child theme ALB elements yet.
    I just tried to follow your guide step by step but I couldn’t even find the headline_rotator.js file.
    Up to now I only put CSS codes into the quick CSS field or the functions.php field of my child theme.

    Isn’t there an easier way?

    Thank you very much for another reply in advance.

    Best regards,
    fkm

    #1364908

    Isn’t there an easier way?

    No.

    the headline-rotator.js file is in : enfold/config-templatebuilder/avia-shortcodes/headline_rotator/ folder.

    for the newest Enfold (5.1.2) i placed that file in my pastebin.
    See: https://pastebin.com/2asu1gtk
    Download: https://pastebin.com/dl/2asu1gtk

    so just download it from there and upload that file to your child-theme/shortcodes folder.
    Or do you only work with the parent theme? Then you can overwrite that file in the parent theme original folder – but on every update this is lost.
    So my recommendation is to use always a child-theme.

    If you got that child-theme you can go over your dashboard – Appearance – Theme file editor : klick on “Theme Functions” – and if you have used the premade child-theme of enfold : Link this is at the beginning nearly empty.
    preserve the starting line ( <?php ) and insert that snippet after that first line :

    function load_child_theme_headline_rotator_script() {
       wp_deregister_script( 'avia-module-rotator' );
       wp_enqueue_script( 'avia-child-module-rotator', get_stylesheet_directory_uri().'/shortcodes/headline_rotator.js', array( 'avia-shortcodes' ), false, true );
    }
    add_action( 'wp_enqueue_scripts', 'load_child_theme_headline_rotator_script', 100 );

    if you look to that snippet you see that the first instruction unloads the parent script – and the next line will load the child script instead.

    This will not be lost on enfold updates – only if there are big changings to that element – we had to redo the procedure.

    #1364933

    Hi Guenni007,

    thank you very much for your quick reply.

    I just downloaded the file from your pastebin.
    So please let me know where to find the child-theme/shortcodes folder to upload it there (sorry for my clumsiness).

    I do using a child theme and I already have some entries in the theme functions field (so I´ll place that snippet at the very end!?).

    Thanks a lot in advance for another reply.

    Best regards,
    fkm

    #1364946

    if you got ftp access – you can create your own shortcodes folder inside the child-theme folder – it is not a default folder.
    then place that snippet in the child-theme functions.php :

    ( i think we don’t need that snippet for that – but it is a basic snippet to replace parent theme alb elements )

    function avia_include_shortcode_template($paths){
      $template_url = get_stylesheet_directory();
          array_unshift($paths, $template_url.'/shortcodes/');
      return $paths;
    }
    add_filter('avia_load_shortcodes', 'avia_include_shortcode_template', 15, 1);

    If you copy an element from enfold>config-templatebuilder>avia-shortcodes to this folder it will replace the one in the parent and be used instead. You can also add new ones using the other shortcode elements as examples.

    and to be precise: if you put in a parent-theme ALB php file into that folder it replaces the parent theme file. ( the assets (css and js) files are loaded from the parent – because the path to load them are in the php files )

    because we only want to replace the script file from that ALB Element – i decided to go that way via another little snippet
    to unload parent script and load child-script ( i do not know if only uploading that js will work without doing this )

    function load_child_theme_headline_rotator_script() {
       wp_deregister_script( 'avia-module-rotator' );
       wp_enqueue_script( 'avia-child-module-rotator', get_stylesheet_directory_uri().'/shortcodes/headline_rotator.js', array( 'avia-shortcodes' ), false, true );
    }
    add_action( 'wp_enqueue_scripts', 'load_child_theme_headline_rotator_script', 100 );

    PS: refresh all cachings and delete expired CSS and JS files generated by the theme ( if you got merging on)

    #1365219

    Hi Guenni007,

    Thank you very much for the detailed instructions.
    Unfortunately, I don’t currently have FTP access for this website.
    But I’ll take care of it soon and try it then.

    Thanks a lot again.

    Best regards,
    fkm

    #1365962

    Hi @guenni007,

    please excuse the delay and thank you very much for your support again.

    I just tried to follow your instructions:

    1. I placed the following snippets in the child-themes function.php

    add_filter('avia_load_shortcodes', 'avia_include_shortcode_template', 15, 1);
    function avia_include_shortcode_template($paths)
    {
      $template_url = get_stylesheet_directory();
          array_unshift($paths, $template_url.'/shortcodes/');
    
      return $paths;
    }
    function load_child_theme_headline_rotator_script() {
       wp_deregister_script( 'avia-module-rotator' );
       wp_enqueue_script( 'avia-child-module-rotator', get_stylesheet_directory_uri().'/shortcodes/headline_rotator.js', array( 'avia-shortcodes' ), false, true );
    }
    add_action( 'wp_enqueue_scripts', 'load_child_theme_headline_rotator_script', 100 );

    2. I created a new folder named “shortcodes” and uploaded the file “headline_rotator.js” (which you had made available for me to download) into it.

    Now folder and file also shows up at the wordpress backend of my website.
    Unfortunately the headline rotator doesn´t seem to work anymore (it´s just static, no animation) instead of stopping the animation after the first run.
    Please let me know what I might have done wrong.

    Thank you very much in advance.

    Best regards,
    fkm

    #1366069

    Hi,

    Sorry for the late response. Where can we check the issue? Please provide the site URL and the login details in the private field for FTP and WordPress. We will check the modification once the credentials are available.

    Best regards,
    Ismael

    #1366119

    Hi Ismael,

    thank you very much for your reply.

    In the meantime I had removed the headline rotator and just reinserted it for demonstration purposes.
    But suddenly it works as it should and I have no idea what I did differently.
    Please excuse.

    As Guenni007 mentioned above in his PS, only non Typewriter headline rotators are influenced in this.
    The fading animation is currently set.
    Unfortunately, the typewriter effect would be way better for the message.
    So please let me know if there´s way to include the typewriter animation as well?

    Thanks a lot in advance.

    Best regards,
    fkm

    #1366122

    Sorry.
    Please see private content box.

    #1366166

    i edited the file on pastebin – since 128ff there are the changes for that typewriter case.
    see: https://pastebin.com/2asu1gtk
    download: https://pastebin.com/dl/2asu1gtk

    just replace it with the former file – and refresh all cachings and merged files

    see here working : https://enfold.webers-webdesign.de/rotator-typewriter/

    by the way – i recognised with light font color on dark background the animated letters with the blinking caret looks a bit strange.
    this comes not from my edited js file. i will see later what css might be responsible for it.

    EDIT: Now i changed the file once again :
    if you set to the headline rotator that custom class:

    once
    – it will stop after one cycle

    if not – then you have the default behavior

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.