Forum Replies Created

Viewing 30 posts - 1 through 30 (of 117 total)
  • Author
    Posts
  • in reply to: Videos are not loaded anymore #1316385

    Hi ,

    I had similar issue with both Vimeo and Youtube videos

    Enfold > Theme Options > Performance > Javascript file merging and compression
    Disable JS compression – Your videos will show
    Enable JS Compression – Your videos will not show

    I have also “Delete old CSS and JS files?” and updated
    flushed cache put Cloudflare into development mode.

    Video will not show with Enfold Enable JS Compression

    Enfold Video Not Showing Youtube and Vimeo

    Wordpress: 5.8
    Enfold: 4.8.6.1

    NOTE! This is also effecting display of some page content images and Post Feature images etc.

    Hi Ismael,

    Is this still valid for 2021 version of Enfolds 4.8.6

    I have implemented the code in the Child theme functions.php file
    Added custom field “product_video” to the product
    Pasted in Youtube Watch url
    Updated product
    Enfold Child > Theme Options > Shop Options > Product Gallery = Default enfold product gallery (and not the WooCommerce 3.0 product Gallery)

    A quick multi-file test search of enfolds theme does not reveal the use of the function woocommerce_single_product_image_html

    The Enfolds Gallery uses these two functions

    avia_woocommerce_thumbnail OR avia_woocommerce_gallery_first_thumbnail

    Hoping you can help update this code so that the filter works with Default enfold product gallery

    I’d also like the Video as the fist item in the product gallery.

    Yes I can achieve this using WooCommerce 3.0 product Gallery and a plugin – YITH WooCommerce Featured Audio and Video Content Premium

    However, I would really like to work out a solution using “Default enfold product gallery”

    Are their any specific hooks or filters to achieve this?

    in reply to: Inject category name into masonry element #1285077

    SOLVED

    For anyone else having the same problem – here is my final solution.

    add_filter( 'avf_masonry_loop_prepare', 'avf_masonry_loop_prepare_mod_cat', 10, 2 );
    function avf_masonry_loop_prepare_mod_cat( $key, $entries )
    { 
        // $categories = get_the_category($key['ID']);
       $categories = get_the_terms( $key['ID'], 'tax_category' );  //change 'tax_category' to suit your registered post type taxonomy
       // var_dump($categories);
        $separator = ' ';
        $output = '<div class="ww-masonry-cat">';
        if ( ! empty( $categories ) ) {
            foreach( $categories as $category ) {
                $output .= '<span alt="' . esc_attr( sprintf( __( 'View all posts in %s', 'textdomain' ), $category->name ) ) . '">' . esc_html( $category->name ) . '</span>' . $separator;
            }
        }
        $output .= '</div>';
    
        $key['text_before'] .= trim( $output, $separator );
        return $key;
    }
    
    // new script
    add_action('wp_footer', 'ava_new_custom_script_masonry');
    function ava_new_custom_script_masonry(){
    ?>
    <script type="text/javascript">
    (function($) {
        function a() {
            var masonry = $('.av-masonry-entry');
            if(!masonry.length) return;
            masonry.each(function() {
                var cat = $(this).find('.ww-masonry-cat');
                $(this).find('h3.av-masonry-entry-title').insertBefore(cat);
            });
        }
    
        a();
    
        $(window).on('debouncedresize av-height-change', function() {
            setTimeout( a(), 300 );
        });
    })(jQuery);
    </script>
    <?php
    }
    in reply to: Masonry gallery – title and excerpt below the image #1276842

    FEB 2021
    Masonry Gallery – Image caption “title” below the image element.
    We see 100% height of the image and the caption does not hide or overlay on the bottom of the image.

    Solution I have just implemented – thought I would share.

    Masonry Gallery – Caption – Display Title
    Default Display (at the bottom of the elements image)
    Always Display

    Column Responsiveness Set: 3 Column | 2 Columns | 1 Column | 1 Column

    Then add the following to the Quick CSS

    #top .av-inner-masonry {overflow:visible;}
    
    .av-large-gap.av-fixed-size .av-masonry-entry .av-inner-masonry { bottom:100px;}
    
    .av-fixed-size .av-masonry-entry .av-inner-masonry-content, .av-masonry-entry.av-masonry-item-with-image .av-inner-masonry-content {bottom:-50px;}
    
    .av-masonry-entry .av-inner-masonry-content {padding:10px 20px; height:50px;}
    
     .responsive #top #wrap_all .all_colors h3.av-masonry-entry-title {font-size:26px; } 
    
    .main_color .av-inner-masonry-content.site-background {background:transparent;}

    To resize the h3 title responsively use responsive css media styles – add the following at the top of your QUICK CSS

    @media screen and  (max-width: 460px) {
    .responsive #top #wrap_all .all_colors h3.av-masonry-entry-title {font-size: 14px !important;}
    }
    
    @media only screen and (min-width: 768px) and (max-width: 988px) {
    .responsive #top #wrap_all .all_colors h3.av-masonry-entry-title {font-size: 18px !important;}
    }

    3 column font size = 26px
    2 column font size = 18px
    1 column font size = 26px
    1 column (viewport width smaller than 460px wide) font size = 14px

    height, bottom negative margin should be the same value.
    Css – vary height, bottom negative margin and font size according to your longest headline.

    I hope this helps someone else.

    Cheers : )

    in reply to: Can't change visibility on pages #1275987
    This reply has been marked as private.
    in reply to: Can't change visibility on pages #1275983

    “No Plugins Active.”
    I am using Child Theme.
    Sorry I did not try with just the Enfold parent theme active to take any custom code in the Enfold child theme out of the equation.

    The original page was created with a different theme and page layout builder . The page may have had left over meta data from the previous builder.

    Over 10 years on WP development and I have never seen this error before and I don’t think I can replicate or re-create it.

    With ALB disabled, updating page status and deleting was restored.

    Anyway this fixed my specific need to delete one page.

    just hope it helps someone else in the future if they come across this issue.

    As always, great theme great service

    Cheers : )

    in reply to: Can't change visibility on pages #1275792

    Wow 2 years later – it’s now Jan 2021 and I have just had the same issue.

    A page was set to Private. With all plugins disabled I could not change Status to Public and/or move it to Trash. The status change just would not save.

    The solution was to temporarily switch theme from Enfold to a standard WP theme – Change the page to public and/or trash – then reactivate Enfold.

    Hope it works for you.

    in reply to: Fatal error trying to customize Enfold #1259811

    I can confirm I had similar fatal error – after tying to access Appearance > Customise using Kriesi Enfold 4.5.7

    /wp-content/themes/enfold/config-gutenberg/class-avia-gutenberg.php on line 529

    Before finding this post – I was able to get around the error by accessing Enfold > Theme Options and Changing the <Select your Editor> to Use Block Editor.

    I can confirm Upgrading Enfold Parent Theme from 4.5.7 to 4.7.6.4 fixed the issue.

    in reply to: Remove woocommerce catalog ordering #1249850

    try this in your efond-child functions.php file

    add_action( 'before_woocommerce_init', function() {
    remove_action( 'woocommerce_before_shop_loop', 'avia_woocommerce_frontend_search_params', 20 );
    } );
    in reply to: Layerslider video background not working on Chrome #1076015

    Hi Ismael,
    The Site ready has SSL Certificate with HTTPS://

    I have force HTTPS in WordPress config file – this previously did not make a difference.
    i’ll try the suggested plugin to see if that removes the js warning.

    The issue for me ATM is not the JS warning – but that I can’t stream two Youtube Videos on the one page. i.e WP Layerslider video Background and ALB Colour section background video.

    Since you can reproduce this locally can you upgrade the WP Layerslider to 6.8.1 version on the local version to see if this fixes the issue.
    The Change Log seems to suggest this may have been fixed.

    in reply to: Displaying HTML Entities as a code snippet #1075341

    Hi Gunter,

    I was considering ditching ABL altogether and writing the blog articles in WP classic editor – as pasted HTML entities ARE NOT decoded.

    I tested several plugins for embedding code snippets.

    1. PastaCode – decoded the html entities and displayed the email address. – so that didn’t work

    2. oEmbed Gist – h t t p s : / /wordpress.org/plugins/oembed-gist/
    On the other hand, oEmbed Gist showed the GIST snippet as encoded html entities – So that’s my work around solution 2

    My final work around Solution 1
    STEP 1 – Install your plugin – h t t p s : / / kriesi.at/documentation/enfold/intro-to-layout-builder/#using-special-characters
    STEP 2 – Edit the Array

    $this->translate = array(
    				                '#amp;#'          => '&#',
    						'#lt#'		=> '<',
    						'#gt#'		=> '>',
    						'#amp#'		=> '&',
    						'#91#'		=> '&lsqb;',
    						'#93#'		=> '&rsqb;',
    						'#quot#'		=> '&quot;',
    						'#34#'		=> "&apos;",
    						'#br#'		=> '<br/>',
    						'#p#'		=> "<<p>>",
    						
    );

    STEP 3 – Encode the html entity using – h t t p : / /ctrlq.org/encode/
    STEP 4 – Copy Paste Text and do a FIND => ‘&#’ and REPLACE =>’#amp;#’
    STEP 5 – Copy Paste the new string into the content editor and wrap in < pre > < / pre > tags
    STEP 6 – Update post and re-updated post does not decode html entities – Great!
    STEP 7 – On the front end the plugin Avia Special Character Converter Plugin translates this unique string #amp;# to &#

    As the translate filter is global( i.e it will effect all content ), I wanted to restrict this translate functions to specific elements – hence the unique string that would not normally appear in general content.

    Another thought would be to extend the plugin at a later time – to check for a class on the dom object before translating.
    That way you could have different array translations based on object class. In ALB just add the appropriate Custom Class to the Text Block.

    This solves the issue for now and I can get back to writing my blog article with inline html entity code snippets.

    in reply to: Displaying HTML Entities as a code snippet #1074961

    (Response Private – screen cast video)

    As shown without ALB html entities show fine on the post, even after editing and re publishing.

    However, once you activate ALB – html entities are converted back to readably characters.
    I want to maintain the encoded html characters as a code snippet in the post.

    The only way this works – is to paste the encoded html entities in the visual editor with < pre >
    and update only once – > html entities display fine
    However, If you edit/update the post again – >html entities are converted back to readably characters.

    Not very practical.

    This solution was the only work around in 2015
    h t t p s : / /kriesi.at/support/topic/just-for-info-html-character-entities-get-changed-on-saving/#post-529743
    We are aware of the issue and it is currently under investigation. For the mean time, as a temporary workaround, please add the html entity code once you’re totally done with the page. It is only converted to the actual symbols once you re-update the page. Sorry for the inconvenience.

    I can’t believe 4 years later – this is still the case – there is not a better solution.

    I am hoping you can come back with a working method – where html entities are not decoded back to visual characters in ALB after post re-update.

    in reply to: Displaying HTML Entities as a code snippet #1074786

    Hi yes of course I know about text mode in the editor.

    I am writing a blog article comparing different obfuscation methods.

    I need to show the code so I can explain pros and cons.

    1. In content editor switch to text mode
    2. paste the html encode entities
    3. switch back to visual
    4. Update the post
    5. everything displays as it should
    6. Edit the post and the html entities are converted back to html characters.

    this is the issue

    Not the obfuscation plugin

    Hi,

    FIXED!

    All this was caused by the new WordPress Gutenberg Editor

    I gather ENFOLD is still not fully compatible after reading a few post on the subject

    For other people – the solution is to install Classic Editor by WordPress Contributors
    open each page/post and update!

    Kriesi, may be you could include a ENFOLD notification to users that the classic editor plugin is required until you resolve your compatibility issues

    cheers : )

    in reply to: Layerslider video background not working on Chrome #1073483

    Hi Ismael,

    Ok this has taken 4 hours to narrow down.

    I have upgrade the SERVER DEV site
    WP 5.1
    PHP 7.2
    ENFOLD 4.5.4

    enfold-child is deactivated with enfold parent theme active
    No plugins
    No custom Quick css

    Open a fresh incognito window
    On first load the WP LayerSlider [HOME YOUTUBE] video background is visible
    Scroll to the bottom of the home page the HOW TO GUIDES – VIEW DIY VIDEOS colour section (Youtube) background does not play
    Stay at the bottom of the home page and do a hard refresh of the browser a couple of times.
    Now the HOW TO GUIDES colour section background video plays
    Now Scroll to the top of the page
    The WP LayerSlider [HOME YOUTUBE] video Background – nothing visible accept spinning loading icon.

    I can consistently reproduce this in Chrome and Firefox on a Mac Min and Mac Book Pro

    If I change the WP Layerslider at the top of the home page to [HOME LOCAL VIDEO]

    Both WP LayerSlider [HOME LOCAL VIDEO] video background && HOW TO GUIDES colour section background videos BOTH PLAY!

    There must be some kind of conflict or precedence to which background video is streamed from Youtube.

    To double check this, I have created a fresh install test environment. (Response Private)

    /test-youtube/
    WP LayerSlider Youtube Background Video –> Video Does Not Play
    +
    ENFOLD ALB Colour section Youtube Background Video –> Video Plays

    /test-youtube-2/
    ENFOLD ALB Colour section Youtube Background Video –> Video Plays
    +
    ENFOLD ALB Colour section Youtube Background Video –> Video Plays

    So specifically this narrows the issue to conflict of having both of the following on one page
    WP LayerSlider Youtube Background Video && ENFOLD ALB Colour section Youtube Background Video

    Let me know if you can reproduce this bug locally

    in reply to: Layerslider video background not working on Chrome #1071611

    Hi Ismael,

    Still have not resolved this issue.
    WP 5.0.3 or WP 5.1

    Just installed a new .local version to do presentation with client on my laptop. And now both Youtube and Self Hosted Videos don’t play in WP LayerSlider.

    Also noted – When Editing LayerSlider on the new local layer slider background <divs> are empty.
    <div class="ls-background-videos"></div>
    <div class="ls-slide-backgrounds"></div>
    LayerSlider is saving changes – however the output does not update – cleared cache and incognito.

    I have delete all other SLIDES and now only have the one slide with self hosted background video – NO YOUTUBE!
    Console Log is still showing error
    The target origin provided (‘https //www.youtube.com’) does not match the recipient window’s origin

    https://codecanyon.net/item/layerslider-responsive-wordpress-slider-plugin/1362246/comments?page=482&filter=all#comment_20665285

    AND

    https://kreatura.ticksy.com//ticket/1807958/

    NOTE!

    WP LayerSlider is at version 6.8.1, However the latest version of Enfold 4.5.4 only has WP LayerSlider 6.7.6

    Hoping you can release a version of Enfolds with the latest WP LayerSlider

    in reply to: Layerslider video background not working on Chrome #1054681

    Hi Ismael,

    I am having the same issues with MAC Chrome.

    As Layerslider WP is bundled with Enfolds – this is my only option for support

    Google seems to think this issue is resolved with previous chrome update.
    https://bugs.chromium.org/p/chromium/issues/detail?id=807304

    I am running
    WordPress 5.0.3
    Enfold – You are running the latest version! (4.5.2)
    Chrome – Version 71.0.3578.98 (Official Build) (64-bit)
    LayerSlider WP – 6.7.6

    On the home page I have a Layerslider with a background video. ( The Video shows in the Layerslider Editor and auto plays) However, on the live site the video does not load. I just get a spinning Ajax wheel of death.

    Console log show error:

    www-widgetapi.js:100 Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://www.youtube.com') does not match the recipient window's origin ('http://www.domain.com').
    h.B @ www-widgetapi.js:100

    On the same page I have Video the opens in a modal video and auto plays.
    And
    a Colour Section Video Background that also loads and auto plays.

    It seems related just to the Video Background on the LayerSlider WP – as all other video elements play just fine.

    There is no audio in the Video and Yes volume is set to Zero and &mute=1; parameter is added to the <iframe src=

    Trouble shooting…
    I have disabled all plugins
    Used Parent Theme Enfolds instead of my customised Child Theme.

    Error still persists.

    I have tried all methods of adding the youtube hosted video – youtube watch url URL / youtu.be URL / Youtube Share <embed> code
    On pasting the youtube embed code into the layer slider I have tried multiple combinations of youtube embed parameters.
    I even copied the html source <iframe code from the page source containing an Advance layout Builder Colour Section background video – with all the parameters – then changing the video Play ID accordingly.

    During trouble shooting I noticed the following:
    Safari (Version 10.1.2) and Firefox Developer (65.0b11 (64-bit)
    The Layerslider Background video loaded fine the first time – but after refreshing the page the video did not play.
    On the same page the Advanced Layout Builder Colour Section Background Video – Did not play.

    After changing the LayerSlider WP background video to self hosted – everything is working as expected.

    <video width="640" height="360" preload="metadata" autoplay>
    	<source src="/wp-content/uploads/2019/01/video-file.mp4" type="video/mp4">
    </video>

    Code Examples:
    Layerslide code from URL

    
    <iframe width="560" height="315" src="https://www.youtube.com/embed/youtubevideoid" frameborder="0" allowfullscreen></iframe>
    

    LayerSlider WP background video – DOES NOT WORK IN ANY MAC BROWSER

    Youtube Video Embed Code

    
    <iframe width="560" height="315" src="https://www.youtube.com/embed/youtubevideoid?controls=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    

    LayerSlider WP background video – WORKS IN SAFARI ONLY

    Youtube Video Embed Code – added &autoplay=1&mute=1

    
    <iframe width="560" height="315" src="https://www.youtube.com/embed/youtubevideoid?controls=0&autoplay=1&mute=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    

    LayerSlider WP background video – DOES NOT WORK IN ANY MAC BROWSER

    Extended Parameters

    
    <iframe height="1600" width="900" data-autoplay="1" data-volume="0" data-mute="1" data-videoid="youtubevideoid" data-hd="1" data-rel="0" data-wmode="opaque" data-loop="0" data-version="3" data-autohide="1" data-color="white" data-controls="0" data-showinfo="0" data-iv_load_policy="3" data-original_url="https://www.youtube.com/watch?v=youtubevideoid" frameborder="0" allowfullscreen="1" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" title="YouTube video player" src="https://www.youtube.com/embed/youtubevideoid?original_url=https://www.youtube.com/watch%3Fv=youtubevideoid&iv_load_policy=3&showinfo=0&controls=0&color=white&autohide=1&version=3&loop=0&wmode=opaque&rel=0&hd=1&videoid=d5QNoIwmKHk&autoplay=1&html5=1&mute=1&enablejsapi=1&origin=http://www.domainexample.com&widgetid=1&volume=0"></iframe>
    

    LayerSlider WP background video – WORKS ON FIRST LOAD – SAFARI and FIREFOX
    On same page Colour Section Video Background did not load/auto play
    ON REFRESH/RELOAD of the PAGE – LayerSlider WP background video PLAYBACK FAILED
    On same page Colour Section Video Background now auto playing

    CHROME sometime plays and some time does not play the Layerslider video background.
    I cannot work out a stable reason why this happens.

    There is some information here about loading of the DOM elements out of order which may be the ultimate cause of a delay problem
    https://github.com/gsu-library/sirenia/issues/116
    also an old thread on the same issue
    https://groups.google.com/forum/#!topic/youtube-api-gdata/XqaUDWkQXcw

    Related ENFOLD support threads

    I hope I’m not alone and support can work with LAYERSLDER WP to resolve this issue

    FYI – yes I also tried varying Chrome browser settings :: chrome://flags/#autoplay-policy

    in reply to: Image hotspot Tooltips with click – again – again 2018 #1047985

    The Final Interim Solution.

    Copy avia.js from the Parent Theme enfold > js > avia.js to the Child Theme enfold-child > js > avia.js

    Then in the child theme functions.php file enqueue avia.js to load from the new location

    
    function wp_change_aviajs() {
       wp_dequeue_script( 'avia-default' );
       wp_enqueue_script( 'avia-default-child', get_stylesheet_directory_uri().'/js/avia.js', array('jquery'), 2, true );
    }
    add_action( 'wp_enqueue_scripts', 'wp_change_aviajs', 100 );
    

    enfold-child open and edit the avia.js file

    At the top of the file replace/add the following:

    
    (function($)
    {	
        "use strict";
        
        // EXTENSION ----------------------------------------------------------------
    	// KEEP IN OUTER SCOPE i.e. not in doc ready
        var active_hotspot = null;
        var active_hotspot_previous = null;
    
        function guidGenerator() {
            function s4() {
                return Math.floor((1 + Math.random()) * 0x10000)
                    .toString(16)
                    .substring(1);
            }
            return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
        }
    
        $('body').on('mouseover', 'div.av-image-hotspot.av-display-hotspot', function (e) {
            var guid = guidGenerator();
    
            if (active_hotspot && active_hotspot !== $(this).attr('data-guid') )  {
                active_hotspot_previous = active_hotspot;
            }
            active_hotspot = guid;
            $(this).attr('data-guid', guid);
    
        });
    
        $('body').on('mouseleave', 'div.av-image-hotspot.av-display-hotspot', function (e) {
            if ( $(this).attr('data-guid') === active_hotspot ) {
                e.preventDefault();
                e.stopImmediatePropagation();
                return false;
            }
        });
        // EXTENSION ----------------------------------------------------------------
    
        $(document).ready(function()

    Scroll down to the following Function line 1645

            display_tooltip: function(e)
            {
    

    add this replace/add this code:

          display_tooltip: function(e)
            {
            	// EXTENSION ----------------------------------------------------------------
                if ( active_hotspot_previous !== $(e.currentTarget).attr('data-guid') ) {
                    $('[data-guid]').trigger('mouseleave');
                }
    
                if ( $(e.currentTarget).hasClass('open') ) {
                    return false;
                }
    
                $('[data-guid]').removeClass('open');
                $(e.currentTarget).addClass('open');
                // EXTENSION ----------------------------------------------------------------        	
                var _self		= this,
    

    Avia Layout Builder set the Image Hot Spot to Show Tooltips – On Mouse Hover

    The hotspot tooltip will show on mouse hover and remain visible, allowing the user to interact with hotspot content buttons, links etc.
    Only one hot spot tooltip will remain visible. When you hover a second hotspot the first hotspot tooltip will hide and the new hotspot tooltip will be visible.

    Hi Ismael,

    Thanks for picking that up.
    I gather the closing curly bracket was left over from other @media only screen and everything after that stopped loading.
    Makes me look like a complete novice for missing that!
    My Bad.

    Works from enfold-child/style.css

    All good!

    Thanks for the continued Support.

    in reply to: Image hotspot Tooltips with click – again – again 2018 #1032384

    HI blafoley,
    Thanks for sharing your solution.

    I disabled all my customisations for this and implemented your code in functions.php – Set Hotspots to ‘always show’, However the widow ready function did not hide the tooltips on the page load. I had to click each hotspot to closed the open tooltip. Once closed the click function worked well. I also tried loading this via ‘wp_header` with out effect.

    Overriding the functionality via jQuery has given me some ideas though. Thanks ; )
    I have my PHP Guy looking into options and will report back once we have a solution.

    Hi details provided

    in reply to: Google font Flash of Unstyled Text (FOUT) issue #1025755

    Hi Victoria,

    This was solved by activating Siteground’s SuperCache solution with Cloud flare.

    That, said, it still should not occur.

    Put this one on the back burner to investigate with the next release.

    thanks ; )

    in reply to: Image hotspot Tooltips with click – again – again 2018 #1025216

    I have had a hack at the JS in avia.js from within the child theme and achieved 90% of the functionality. example provide privately.
    LINE 2219

    
            bind_events: function()
            {
    	        var click_tooltips		= '.av-click-tooltip [data-'+this.options.data+']';
    			this.scope.on(this.options.event + ' mouseenter', click_tooltips, $.proxy( this.start_countdown, this) );
    			   if(this.options.event != 'click')
    				{
    					this.scope.on('mousedown', click_tooltips, $.proxy( this.hide_tooltip, this) );
    				}
    				else
    				{
    					this.body.on('mouseleave', click_tooltips, $.proxy( this.hide_tooltip, this) );
    				}
      },
    

    mouseenter the hotspot number = tool tip is shown
    mouseleave the hotspot number= tool tip remains open
    mouseenter the hotspot number = tool tip is shown again with a re animated flicker
    Click the hotspot number = tool tip is closed

    This allows for interaction of elements within the tool tip. Not Ideal but it’s a quick hack to show the client.
    I could not work out how to activate the tooltip on ‘click’ as avia-tooltips.js is very similar to avia.js (lines 1565 – 1824 ) have very similar functions. with default event: ‘mouseenter’

    Q1. Please advise which js overrides the other for the image hot spot ‘mouseenter’

    Q2. avia.js line 1570 delayHide: 0, this variable is not used in the js – at all. in avia.js or avia-tooltips.js
    It would be fair to assume that by including the variable delayHide (set at a high value) on the mouseleave event – the tool tip would remain open for a set amount of time. Again allowing for interaction of the html elements in the tooltip.

    Q3. Ultimately I’d like to remove the flicker on the second mouseenter by changing this to a click event to open and close the tool tip. and only have one tooltip open at one time. i.e if another hotspot was clicked the current open tooltip would close and the new tooltip would open.

    Coding Suggestions greatly appreciated

    in reply to: Google font Flash of Unstyled Text (FOUT) issue #1024653

    Hi Victoria,

    I’m sure id know if it was my internet connection. Any way speed test results shared privately.

    As I was very specific with my browser versions and operating system – I should ask you what is your test environment? As I have proven that it exists in 2 OSX operating systems on Chrome and Firefox.

    I added the preconnect to the <head> in the child theme head.php

    <link type="text/css" rel="preconnect" href="//fonts.gstatic.com/css?family=Lato:300,400,700%7COpen+Sans:400,600" id="avia-google-webfont" crossorigin="anonymous">
    

    However, this had no effect on the FOUT.

    I also edited the parent theme ENFOLD > framework > php > class-style-generator.php
    Lines 495 – 498 to the following:

    
    f.type 	= 'text/css';
    f.rel 	= 'preconnect';
    f.href 	= '//fonts.googleapis.com/css?family=".apply_filters('avf_google_fontlist', $this->google_fontlist)."';
    f.id 	= 'avia-google-webfont';
    f.crossOrigin = 'anonymous';
    

    However, this did not work either, as the rel=stylesheet was not declared on the font <a href and the theme did not change the fonts.

    I also downloaded the fonts from google to host locally. Importing the fonts into Enfold ( https://kriesi.at/documentation/enfold/typography/#how-to-upload-custom-fonts ) however, again this had no effect on the FOUT in Chrome and Firefox.

    Interesting enough, the FOUT does not occur in any Safari browser. regardless of load speed (throttled)

    I have also provided a link to an additional video of the FOUT in FIREFOX

    FYI

    https://developers.google.com/fonts/docs/technical_considerations

    Technical Considerations
    Google Chrome
    Chrome renders the rest of the page, but until the font has loaded, it displays a blank space in place of the text that uses the font.

    Mozilla Firefox
    Firefox first displays the text in the default font, and then re-renders text in the font once it has loaded. This behavior is known as a “flash of unstyled text.”

    Apple Safari
    Safari renders the rest of the page, but until the font has loaded, it displays a blank space in place of the text that uses the font.

    in reply to: Google font Flash of Unstyled Text (FOUT) issue #1023924
    This reply has been marked as private.

    Hi Lennone,

    Things have obviously changed in the past 2 years since this post.

    You can remove this by editing your (.htaccess file) HTTP headers to set expiry times for certain types of files.

    Read more here:
    https:// gtmetrix (dot) com / leverage-browser-caching.html

    in reply to: Open Gallery from a link or sigle image #1004257

    Hi Bridster,

    The original Manual workaround at the beginning of the thread still works.

    If you do the following without STEP 1 – The text block HTML will still work, However, you won’t be able to see or re-edit the HTML after you have published. So do Step 1 First. That way you can re-edit the HTML in the Debug Window below the Layout Builder.

    STEP 1
    Add AVAI LAYOUT BUILDER DEBUG MODE code to you CHILD THEME functions.php file.

    /*-------------------------------------------------------------------------------
    Avia builder debug mode
    -------------------------------------------------------------------------------*/
    add_action( 'avia_builder_mode', "builder_set_debug" );
    function builder_set_debug() {
    	return "debug";
    }
    

    STEP 2
    On the page with the gallery add a mannual list of links to images in your media gallery.
    Add an Avia Layout Builder TEXT BLOCK Element. Change from Visual to Text mode.
    The trick here is to add rel=”prettyPhoto[gal2]” to the <a href
    The First Image is outside of the hidden <div>

    <a rel="prettyPhoto[gal2]" title="photo 1 title" href="http://enfolds.huxburyquinn.com.au/wp-content/uploads/2012/04/2.jpg">test lightbox text link</a>
    <div style="display:hidden;">
    <a rel="prettyPhoto[gal2]" title="photo 2 title" href="http://enfolds.huxburyquinn.com.au/wp-content/uploads/2012/04/014.jpg"></a>
    <a rel="prettyPhoto[gal2]" title="photo 3 title" href="http://enfolds.huxburyquinn.com.au/wp-content/uploads/2012/04/013.jpg"></a>
    <a rel="prettyPhoto[gal2]" title="photo 4 title" href="http://enfolds.huxburyquinn.com.au/wp-content/uploads/2012/04/1.jpg"></a>
    </div>

    TESTED HERE:
    enfolds (dot) huxburyquinn (dot) com (dot) au (/) lightbox-text-link

    in reply to: Open Gallery from a link or sigle image #1003843

    Hi Bridster,

    Q1. Popup content page – It will be a page with the gallery and then you will have to click again to open the gallery.

    Q2. The Shortcode is entered not in a code block but just as text. switch from visual mode to text mode in the text editor.
    see my tutorial here:

    enfolds (dot) huxburyquinn (dot) com (dot) au (/) 2018 (/) 02 (/) 28 (/) enfolds-content-pop-up

    in reply to: Open Gallery from a link or sigle image #1003170

    Hi Birdster,

    Looks like Enfolds have changed the way the associated gallery data-rel works.

    Try this solution here:
    https://kriesi.at/support/topic/triggering-lightbox-gallery-with-link/

    Or see if my popup content Shortcode is of any use

    https://kriesi.at/support/topic/code-snippet-inline-post-content-popup-magnific-popup-shortcode/

    Hi Basillis,

    Yep Enfolds 4.3 update fixed the issue with WooCommerce products. Thanks!

    Great job on the new Enfolds 4.3 release.

    I’ve been pushing for a performance improvement for some time now.

    Well done Kriesi team.
    I look forward to your continued support.

Viewing 30 posts - 1 through 30 (of 117 total)