Hey Guenter,

Thank you for the inquiry.

You can try to override the entire avia_sc_toggle with your own modifications. In the modified code below, we adjusted the duration from 200 to 10000.

function ava_custom_script_toggles()
{
    ?>
    <script>
        (function ($)
        {
            $(document).ready(function ()
            {
                if ($.fn.avia_sc_toggle)
                {
                    $.fn.avia_sc_toggle = function (options)
                    {
                        var defaults =
                        {
                            single: '.single_toggle',
                            heading: '.toggler',
                            content: '.toggle_wrap',
                            sortContainer: '.taglist'
                        };

                        var win = $(window),
                            options = $.extend(defaults, options);

                        return this.each(function ()
                        {
                            var container = $(this).addClass('enable_toggles'),
                                toggles = $(options.single, container),
                                heading = $(options.heading, container),
                                allContent = $(options.content, container),
                                sortLinks = $(options.sortContainer + " a", container),
                                preview = $('#av-admin-preview');

                            //	needed to avoid scroll to top when opening and closing toggles - can be removed when other solution found (readded @since 4.8.4.1)
                            var activeStyle = '',
                                headingStyle = '';

                            heading.each(function (i)
                            {
                                var thisheading = $(this),
                                    content = thisheading.next(options.content, container);

                                function scroll_to_viewport()
                                {
                                    //check if toggle title is in viewport. if not scroll up
                                    var el_offset = content.offset().top,
                                        scoll_target = el_offset - 50 - parseInt($('html').css('margin-top'), 10);

                                    if (win.scrollTop() > el_offset)
                                    {
                                        $('html:not(:animated),body:not(:animated)').animate({ scrollTop: scoll_target }, 200);
                                    }
                                }

                                if (content.css('visibility') != "hidden")
                                {
                                    thisheading.addClass('activeTitle').attr('style', activeStyle);
                                }

                                thisheading.on('keydown', function (objEvent)
                                {
                                    if (objEvent.keyCode === 13)  // if user presses 'enter'
                                    {
                                        thisheading.trigger('click');
                                    }
                                });

                                thisheading.on('click', function ()
                                {
                                    if (content.css('visibility') != "hidden")
                                    {
                                        content.slideUp(10000, function ()
                                        {
                                            content.removeClass('active_tc').attr({ style: '' });
                                            win.trigger('av-height-change');
                                            win.trigger('av-content-el-height-changed', this);

                                            if (preview.length == 0)
                                            {
                                                location.replace(thisheading.data('fake-id') + "-closed");
                                            }
                                        });

                                        thisheading.removeClass('activeTitle').attr('style', headingStyle);

                                    }
                                    else
                                    {
                                        if (container.is('.toggle_close_all'))
                                        {
                                            allContent.not(content).slideUp(200, function ()
                                            {
                                                $(this).removeClass('active_tc').attr({ style: '' });
                                                scroll_to_viewport();
                                            });

                                            heading.removeClass('activeTitle').attr('style', headingStyle);
                                        }

                                        content.addClass('active_tc');

                                        setTimeout(function ()
                                        {
                                            content.slideDown(200, function ()
                                            {
                                                if (!container.is('.toggle_close_all'))
                                                {
                                                    scroll_to_viewport();
                                                }

                                                win.trigger('av-height-change');
                                                win.trigger('av-content-el-height-changed', this);
                                            });

                                        }, 1);

                                        thisheading.addClass('activeTitle').attr('style', activeStyle);

                                        if (preview.length == 0)
                                        {
                                            location.replace(thisheading.data('fake-id'));
                                        }
                                    }
                                });
                            });

                            sortLinks.on('click', function (e)
                            {
                                e.preventDefault();

                                var show = toggles.filter('[data-tags~="' + $(this).data('tag') + '"]'),
                                    hide = toggles.not('[data-tags~="' + $(this).data('tag') + '"]');

                                sortLinks.removeClass('activeFilter');
                                $(this).addClass('activeFilter');
                                heading.filter('.activeTitle').trigger('click');
                                show.slideDown();
                                hide.slideUp();
                            });

                            function trigger_default_open(hash)
                            {
                                if (!hash && window.location.hash)
                                {
                                    hash = window.location.hash;
                                }

                                if (!hash)
                                {
                                    return;
                                }

                                var open = heading.filter('[data-fake-id="' + hash + '"]');

                                if (open.length)
                                {
                                    if (!open.is('.activeTitle'))
                                    {
                                        open.trigger('click');
                                    }

                                    window.scrollTo(0, container.offset().top - 70);
                                }
                            }

                            trigger_default_open(false);

                            $('a').on('click', function ()
                            {
                                var hash = $(this).attr('href');
                                if (typeof hash != "undefined" && hash)
                                {
                                    hash = hash.replace(/^.*?#/, '');
                                    trigger_default_open('#' + hash);
                                }
                            });

                        });
                    };
                }
            });
        })(jQuery);
    </script>
    <?php
}
add_action('wp_footer', 'ava_custom_script_toggles');

Best regards,
Ismael

Hi,

Why does this only work with autoplay enabled? Is there a way to change that?

The theme only adds the playsinline attribute when autoplay is enabled. This attribute (playsinline) allows the video to play directly on the page without going into fullscreen. If you want to alter this behavior, keep the autoplay option enabled, then add this code in the functions.php file:

add_filter('avf_html5_autoplay_mobile', function($play, $video, $attributes) {
    return "playsinline";
}, 10, 3);

Please note that this will be applied to every video, so you may need to add a few conditions, such as checking for the video URL.

Best regards,
Ismael

Hi,
Unfortunately pseudo-elements can not be links so we will need to start over, so remove the other css. I couldn’t login so try to follow these steps.
If you are not using a child theme you could use the WP Code plugin then add a new snippet, in the top right corner use the PHP snippet as the code type:

and ensure that it is activated, then add this code and save.

function custom_floatingBadge_script() { ?>
  <script>
document.addEventListener('DOMContentLoaded', function() {
    var badge = document.createElement('div');
    badge.id = 'floatingBadge';
    badge.className = 'floating-badge';
    document.body.appendChild(badge);

    badge.addEventListener('click', function() {
        window.open('https://www.example.com', '_blank'); // Replace with your desired URL
    });
});
</script>
  <?php
}
add_action( 'wp_footer', 'custom_floatingBadge_script', 99 );

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted, and then change the link to suit.
Then add this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

.floating-badge {
    position: fixed;
    right: 10px;
    bottom: 10px;
    width: 170px;
    height: 100px;
    background-image: url(https://www.idea-innovation-consulting.com/wp-content/uploads/2024/05/ISO_9001_farbe_de.png);
    z-index: 99;
    background-size: contain;
    background-repeat: no-repeat;
    cursor: pointer;
}

Best regards,
Mike

Hey birte5,
Thanks for your patience, with I check your video “Roar”, linked below, on Android mobile the video will play in screen with the fullscreen button, this video is not autoplay:



I don’t have a iPhone so I don’t know if it is different. Please check this page and see if this is the same for you.

Best regards,
Mike

Hey Julie,
Thank you for the link to your site, first I added the custom class click-to-close to your flipbox

Then I added this code to the end of your child theme functions.php file in Appearance ▸ Editor:

function custom_click_to_close_flipbox_script() { ?>
  <script>
jQuery(document).ready(function($) {
    $('.click-to-close .avia-icongrid-flipbox .av-icon-cell-item').hover(
        function() {
            var $flipback = $(this).find('.avia-icongrid-flipback');
            // Check if the transform is rotateY(0deg)
            if ($flipback.css('transform') == 'matrix(1, 0, 0, 1, 0, 0)') {
                $(this).addClass('avia-hover');
                console.log('avia-hover class added');
            }
        }
    );

    // Function to handle clicks outside the element
    $(document).on('click', function(event) {
        if (!$(event.target).closest('.click-to-close .avia-icongrid-flipbox .av-icon-cell-item').length) {
            $('.click-to-close .avia-icongrid-flipbox .av-icon-cell-item').removeClass('avia-hover');
            console.log('avia-hover class removed');
        }
    });

    // Prevent clicks inside the element from triggering the document click handler
    $('.click-to-close .avia-icongrid-flipbox .av-icon-cell-item').on('click', function(event) {
        event.stopPropagation();
    });
});
</script>
  <?php
}
add_action( 'wp_footer', 'custom_click_to_close_flipbox_script', 99 );

Now when you hover over the flipbox and it flips the class avia-hover is added to it so that it won’t flip back, until you click outside of the element, in which the class is removed.
please clear your browser cache and check.

Best regards,
Mike

Hi,
When I check your site on my Android the Contact & Schedule mobile menu link works for me, it also works on my desktop emulating as a mobile device.

Best regards,
Mike

Hi,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field, it will make the icon larger and center vertically:

.iconbox_left .iconbox_content {  
	display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: 1fr;
  grid-auto-columns: auto 1fr;
  gap: 0px 0px;
  grid-auto-flow: column;
  align-items: center;
  justify-content: center;
}
.iconbox_left .iconbox_content .entry-content-header .iconbox_icon {
    height: 60px;
    width: 60px;
    font-size: 40px;
    top: 0;
    left: 0;
    align-content: center;
}
.iconbox_left .iconbox_content .entry-content-header {
  justify-self: center;
}
.iconbox_left .iconbox_content .iconbox_content_container p {
	margin-top: 0;
}

Best regards,
Mike

Hi,

Great, I’m glad that you got it working. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard

Hi,

Thanks for the update. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard

Hi,

Thanks for the update. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard

Hi,

Thanks for the update. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard

Hi,

Thanks for the update. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard

Hi,

Thanks for the kind words :-)

Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard

• This reply was modified 1 year, 10 months ago by Rikard.