-
Search Results
-
Dear Enfold Support Team,
I hope this message finds you well. I am encountering an issue with the fullscreen button in the HTML5 video player of the Enfold theme on my website. I have compared the configuration with another website using the same theme and version, and it appears that there is a discrepancy.
Here are the details of the issue:
1. The fullscreen button does not appear in the video player controls, despite having the necessary settings and attributes enabled.
2. Upon inspecting the original avia.js file provided by Enfold, I noticed that there should be a class named av-html5-fullscreen-btn on the container element. However, in the frontend of my website, I do not see this class applied. On the compared website, I noticed the presence of some other classes as well.
3.While investigating the issue, I have reviewed my website’s setup and configuration. I haven’t identified any reasons why another plugin should be causing this issue. Therefore, I believe the problem may be specific to the Enfold theme or its integration on my website.Given these observations, it appears that there might be a bug or specific configuration issue related to my website’s implementation of the Enfold theme.
Could you kindly investigate this issue and provide guidance on how to resolve it? I would greatly appreciate any insights or suggestions you can offer to help me enable the fullscreen button in the Enfold theme’s HTML5 video player.
For your reference, here are some key details:
Website URL: See private message
Enfold Theme Version: 5.6.2
WordPress Version: Version 6.2.2Please let me know if you require any further information or if there are any specific steps I should take to assist in the resolution process. I look forward to your prompt response and assistance in resolving this issue.
Thank you for your attention and support.
Kind regards
Hello
I have created our company webpage with your valued support.Today when I went into WordPress and Enfold with the intention to add some content, WordPress stated that there is a newer version of the website “Es gibt eine automatische Speicherung dieses Beitrags, die aktueller ist als die unten stehende Version.”
I accepted this and since then – also after undoing the revision version – the site does not display correctly.Problems/ items not correctly displayed:
– header: used to be gradient from dark grey to transparent at the bottom (and background image to the top). Now there is a black bar on top
– Background image: used to be full page width. Now it is only in the width of the content block.
– Fullwidth buttons: used to be same height and with background reaching from top line to bottom line. Now the buttons are not of same heigth and background does not reach down to buttom line.I would very much appreciate your help, as I need to fix this urgently. And I don’t know where the problem.
Best Regards,
RetoTopic: Toggle hidden color section
Hey guys,
i love enfold. using it since 2015 and i am still impressed by every new version.
My problem:
i have a button with the class “.trigger1” and a section (that is hidden by default) named “#hide1”.
So whenever i´m hovering an element with that class, the hidden section fades in.
therefore i searched the forums and used this code in my child-theme´s function.php.
it works well on the test server but not on the new server even if the WordPress Versions and the enfold versions are exactly the same.here it´s working fine: http://www.silkeetex.de
/* hide/show sections */ function add_custom_cs(){ ?> <style> .trigger1, .trigger2, .trigger3, .trigger4, .trigger5, .trigger6, .trigger7 { cursor: pointer; /* Change cursor to hand */ } </style> <script> jQuery(window).load(function(){ jQuery("#hide1, #hide2, #hide3, #hide4, #hide5, #hide6, #hide7").hide(); jQuery(".trigger1").hover(function() { if (jQuery("#hide1").is(":visible")) { jQuery("#hide1").hide().removeClass("active"); } else { jQuery(".active").hide().removeClass("active"); jQuery("#hide1").show().addClass("active"); } }); jQuery(".trigger2").hover(function() { if (jQuery("#hide2").is(":visible")) { jQuery("#hide2").hide().removeClass("active"); } else { jQuery(".active").hide().removeClass("active"); jQuery("#hide2").show().addClass("active"); } }); jQuery(".trigger3").hover(function() { if (jQuery("#hide3").is(":visible")) { jQuery("#hide3").hide().removeClass("active"); } else { jQuery(".active").hide().removeClass("active"); jQuery("#hide3").show().addClass("active"); } }); jQuery(".trigger4").hover(function() { if (jQuery("#hide4").is(":visible")) { jQuery("#hide4").hide().removeClass("active"); } else { jQuery(".active").hide().removeClass("active"); jQuery("#hide4").show().addClass("active"); } }); jQuery(".trigger5").hover(function() { if (jQuery("#hide5").is(":visible")) { jQuery("#hide5").hide().removeClass("active"); } else { jQuery(".active").hide().removeClass("active"); jQuery("#hide5").show().addClass("active"); } }); jQuery(".trigger6").hover(function() { if (jQuery("#hide6").is(":visible")) { jQuery("#hide6").hide().removeClass("active"); } else { jQuery(".active").hide().removeClass("active"); jQuery("#hide6").show().addClass("active"); } }); jQuery(".trigger7").hover(function() { if (jQuery("#hide7").is(":visible")) { jQuery("#hide7").hide().removeClass("active"); } else { jQuery(".active").hide().removeClass("active"); jQuery("#hide7").show().addClass("active"); } }); }); </script> <?php } add_action('wp_footer', 'add_custom_cs'); /* avoid jumping up to header */ function add_custom_href_remove(){ ?> <script> jQuery(window).load(function(){ jQuery('.trigger1,.trigger2,.trigger3,.trigger4,.trigger5,.trigger6,.trigger7').removeAttr('href'); }); </script> <?php } add_action('wp_footer', 'add_custom_href_remove');Why is that? Can anyone please help?
Topic: Popup
Hi, i use this solution for a popup window from another post:
Hey axelfx07!
Thank you for using Enfold.
The Enfold uses MagnificPopup as default lightbox plugin. You can add this on functions.php:
function popup_inline() { ?>
<script type=”text/javascript”>
jQuery(window).load(function(){
jQuery(‘.open-popup-link’).magnificPopup({
type:’inline’,
midClick: true // Allow opening popup on middle mouse click. Always set it to true if you don’t provide alternative source in href.
});
});
</script>
<?php }add_action(‘wp_head’, ‘popup_inline’);
Then use this on a text block:<div id=”test-popup” class=”white-popup mfp-hide”>
<p>PLACE CONTENT HERE</p>
</div>Show inline popup
Add this on Quick CSS or custom.css:.white-popup {
position: relative;
background: #FFF;
padding: 20px;
width: auto;
max-width: 500px;
margin: 20px auto;
}
Remove browser cache then reload the page a few times.Cheers!
IsmaelIt works great, but on my mobile it scrolls automatically to the top on the page and the content of the popup doesn’t shown.
Script is on “360° Tour” button on the bottom of the sidebar. Link ist in private content.
May anybody have a solution to position it on the top of the mobile.
Thank you for helping!
Topic: Aweber Landing Page CSS
I closed an other topic on this, this but I’ve just noticed a couple other CSS issues I’m noticing on another landing page I’ve created using Aweber/ Enfold.
The links are below. The font is smaller when linked to enfold and the darkened overlay cuts off at the opt-in button. Do you have some suggestions for these two issues?
Thank you!
Hi,
i have a selfhosted mp4 which works well but the mute button does not appear on phones.
Cannot find a solution in Enfold 5.4.1Thanks, Woutski
Topic: Sticky flyout button
Hi Team
Please could somebody assist me with setting up a sticky flyout on the right-hand side of all my pages in enfold?. I don’t know if I have named the element correctly. You can go to http://www.defendoor.co.za and see what I am referring to – it is the “GET A QUOTE” sticky flyout on the right in green.
Thank you
Hi Enfold Team,
I’ve created a floating button on the front page, but the link does’nt work.
I’ve no Idea, hope you got one.
find enclosed the login data
thx in advance
warm regards AndrewDear Support Team:
As part of my responsive images work, I am trying to replace a banner-like image on my home page, that spans the entire browser window width, with a smaller image on smaller windows/screens. I have an Image inside a Color Section at the top of the home page (under the header) that I inserted from my Media Library (that includes the alt & title text). Initially I tried with CSS (couldn’t get it to include alt & title text on the images), and now with Javascript (can’t get it to work at all).
I’ve tried specifically in (i) Firefox in Windows 7, (ii) Safari, Firefox, & Chrome on a Mac desktop, and (iii) Safari on an iPhone: the smaller banner does not load (and the larger banner displays only because it’s in the Color Section).
So, as I wrote, initially I tried with CSS:
@media only screen and (min-width:965px) { .homeBannerIMG { content: url(https://...banner1.jpg); } .homeBannerIMG::before { /* For Firefox issues */ content: url(https://...banner1.jpg); } } @media only screen and (max-width:964px) { .homeBannerIMG { content: url(https://...banner2.jpg); /* Concatenating '/ "test alt"' to the end doesn't work */ } .homeBannerIMG::before{ content: url(https://...banner2.jpg); } /* Note: https://developer.mozilla.org/en-US/docs/Web/CSS/content says this works: content: url("http://www.example.com/test.png") / "This is the alt text"; BUT IT DOESN'T FOR ME!. Plus I want the image Title as well for the hover tooltip. */But I wasn’t able to maintain my alt & title text on the image. So I switched to Javascript (in my child functions.php file), first trying:
function displayHomeBanner() { if (window.matchMedia("(min-width: 965px)").matches) { document.getElementById("homeBannerIMG").src="https://...banner1.jpg"; } else { document.getElementById("homeBannerIMG").src="https://...banner2.jpg"; } }But that didn’t work: when I made my browser window below 965px wide, banner2 was not swapped in; it stayed as banner1. Then I tried:
document.getElementById("homeBannerIMG").getElementsByTagName('img')[0].src="https://...banner2.jpg";But that didn’t work. Then I tried:
document.getElementsByClassName("homeBannerIMG")[0].src="https://...banner2.jpg";Still no luck. I just can’t get banner2 to display.
Note that my full CURRENT code in my child function.php file is:
function windowSizeActions() { ?> <script> window.onresize = actOnWindowSize; window.onload = actOnWindowSize; function actOnWindowSize() { function displayWindowSize() { myWidth = window.innerWidth; myHeight = window.innerHeight; document.getElementById("dimensions").innerHTML = " >>> " + myWidth + " x " + myHeight; } function displayHomeBanner() { if (window.matchMedia("(min-width: 965px)").matches) { /*document.getElementById("homeBannerIMG").src="https://...banner1.jpg";*/ document.getElementsByClassName("homeBannerIMG")[0].src="https://...banner1.jpg"; } else { /*document.getElementById("homeBannerIMG").src="https://...banner2.jpg";*/ /*document.getElementById("homeBannerIMG").getElementsByTagName('img')[0].src="https://...banner2.jpg";*/ /* Based on https://kriesi.at/support/topic/using-javascript-to-set-image-src-using-developer-id/: document.getElementById(‘work_image’).getElementsByTagName(‘img’)[0].src = work_image; */ document.getElementsByClassName("homeBannerIMG")[0].src="https://...banner2.jpg"; } } displayWindowSize(); displayHomeBanner(); } </script> <?php } add_action( 'wp_enqueue_scripts', 'windowSizeActions' );First of all, as you can see, I’ve commented out my earlier attempts at loading the src, with just my last attempt with getElementsByClassName live.
Secondly, I have my displayHomeBanner function embedded in the function actOnWindowSize, and that in an overall function windowSizeActions, because I need debug code to display the window size, done by my displayWindowSize function (and another function elsewhere to set up the HTML). That function works: my window size is displayed at the top of my window constantly, and changes as I change the browser window size. So this also ensures that things are working, except displayHomeBanner is not working.
Also note that I have tried my code outside of WordPress/Enfold/Aria, using any w3schools.com‘s page’s Try it Yourself button:
<!DOCTYPE html> <html> <body> <div> <img id="homeBannerIMG" src="https://...banner1.jpg" alt="test alt" title="test title"> </div> <script> window.onresize = actOnWindowSize; window.onload = actOnWindowSize; function actOnWindowSize() { function displayWindowSize() { /* This of course won't work here, but it's irrevelent. */ myWidth = window.innerWidth; myHeight = window.innerHeight; document.getElementById("dimensions").innerHTML = " >>> " + myWidth + " x " + myHeight; } function displayHomeBanner() { if (window.matchMedia("(min-width: 965px)").matches) { document.getElementById("homeBannerIMG").src="https://...banner1.jpg"; } else { document.getElementById("homeBannerIMG").src="https://...banner2.jpg"; } } displayHomeBanner(); } </script> </body> </html>and
<!DOCTYPE html> <html> <body> <div> <img class="homeBannerIMG" src="https://...banner1.jpg" alt="test alt" title="test title"> </div> <script> window.onresize = actOnWindowSize; window.onload = actOnWindowSize; function actOnWindowSize() { function displayWindowSize() { /* This of course won't work here, but it's irrevelent. */ myWidth = window.innerWidth; myHeight = window.innerHeight; document.getElementById("dimensions").innerHTML = " >>> " + myWidth + " x " + myHeight; } function displayHomeBanner() { if (window.matchMedia("(min-width: 965px)").matches) { document.getElementsByClassName("homeBannerIMG")[0].src="https://...banner1.jpg"; } else { document.getElementsByClassName("homeBannerIMG")[0].src="https://...banner2.jpg"; } } displayHomeBanner(); } </script> </body> </html>In both, my displayHomeBanner function works: my banner2 displays on smaller window sizes (and the title tooltip works)!
Can you help me get it to work in WordPress please.
Thank you,
Gary5-16
Hi Enfold,
I have buttons but I would also like the opposing image to open the same lightbox blog page.
This works for Button and Image links but not for Column links.
/?iframe=true
The images on this page are background images. If I place them in this layout as a regular images I can make links but they do not resize correctly. (Covering the full space available).
Please advise.
Thanks,
Stephen









