-
AuthorPosts
-
March 29, 2021 at 11:41 am #1291071
Hello
There is a big issue after updating to to Enfold 481 and WP 5.7.When you click a button linked to an id (#) with open-popup-link-button a, the entire page scrolls to the top. So if you have the button on the top of the page you don’t face any problem. But if you have the button lower (let’s say in the middle or bottom of the page) the page scrolls to the top and the Modal Popup is not visible anymore until you manually scroll down.
There is obviously something missing in the code since in the previous versions it was not happening.
In another thread Yigit was suggesting to use the https://yourdomain.com/your-popup-page?iframe=true method, but this is not an option for me because the risult (a useless little lightbox window) is far away from what I need.
I’m expecting by updating a theme that the website should behave like in the previous version and not letting me down with problems that we hadn’t before.
In every Portfolio Page I have a button that opens a list of other Portfolio Pages. Shall I redesign all the Portfolio Pages or is there a way to change some script to have the same behavior of the previous version?Best Regards
ManuApril 1, 2021 at 7:01 am #1291686Hi Manu,
Could you post a link to where we can see the behaviour which you are referring to please?
Best regards,
RikardApril 1, 2021 at 11:05 am #1291744Hi
First of all I wanted to thank Yigit for having already answered me in another thread (https://kriesi.at/support/topic/popup-on-click/#post-1291561). He is always very kind and often finds solutions, like all the staff members. So thank you for the support you give to users. It is no coincidence that I have often advised my customers to buy Enfold.Said that, today I am in trouble with customers who cannot update the website due to various issues that Enfold has had since WordPress 5.6 was released.
Let’s get to the point: as Yigit also saw, there is a problem with scrolling on mobile phones.
Yigit: “WordPress 5.7 was the final stage of jQuery version update in WP core and in Enfold 4.8 we have updated deprecated jQuery functions so I am guessing one of those updates caused the scroll issue.”Dear Rikard I have prepared a subdomain for you (on my site I had to downgrade to be able to see the popup also on mobile phones): https://enfoldtest.fabiobaldanello.com/
Here you will find three buttons: FIRST TEST BUTTON, SECOND TEST BUTTON and THIRD TEST BUTTON.
FIRST TEST BUTTON is on top of the page so you won’t face any problem.
SECOND TEST BUTTON is Yigit solution with iframe. I tried it but is far away from what I need for many reasons that would be to long to explain.
THIRD TEST BUTTON is in the middle of the page (under SECOND TEST BUTTON before OUR STORY). Here you can see the weird behavior on mobiles. The page scrolls to the top and the Modal Popup is not visible anymore until you manually scroll down.I hope that the Enfold team will be able to solve the problem and restore the functions of the modal popup as in previous versions in a short time. For the next releases it would be usefull to have the possibility to set a modal popup directly from ALB.
Best Regards
ManuApril 5, 2021 at 3:04 am #1292390Hi,
Thank you for the info.
The solution by @Guenni007 in the following thread might help. It inserts additional callbacks and applies the “no-scroll” class name to the open-popup-link element.
// function no_background_scroll_on_lightbox_open(){ ?> <script type="text/javascript"> (function($) { jQuery(window).load(function(){ jQuery('.open-popup-link').addClass('no-scroll'); jQuery('.open-popup-link').magnificPopup({ type:'inline', midClick: true, callbacks: { beforeOpen: function () { jQuery('body').css("overflow-y", "hidden"); }, close: function() { jQuery('body').css("overflow-y", "auto"); }, }, }); }); })(jQuery); </script> <?php } add_action('wp_footer', 'no_background_scroll_on_lightbox_open');
Thread: https://kriesi.at/support/topic/lightbox-17/page/2/
Best regards,
IsmaelApril 7, 2021 at 3:17 pm #1293087Hi Ismael
I tried your code but it’s not working.
I was using the following code with WordPress 5.5 and it was working fine:
function popup_inline() { ?>
<script type=”text/javascript”>
jQuery(window).load(function(){
jQuery(‘.open-popup-link-button a, .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’);
I tried adding the code you provided (removing the two slashes to enable the function) but it didn’t change anything. I tried removing the first code and use only the code you provided but the modal popup was not loaded at all. I tried adding the class to the function popup_inline (jQuery(‘.open-popup-link’).addClass(‘no-scroll’);) without any result.
I also tried adding some CSS like
.mfp-content {
position: fixed !important;
top:10px;
left:0px;}
but in this way the modal popup is fixed on the top and you can’t read all the content if it’s longer than the phone screen. Using only top doesn’t affect anything.Help :)
Best Regards
ManuApril 9, 2021 at 8:03 am #1293434Hi,
Thank you for the update.
Did you add the “.open-popup-link-button a” selector to the updated code? You may need to add it on these lines.
jQuery('.open-popup-link').addClass('no-scroll'); jQuery('.open-popup-link').magnificPopup({
.. it should be.
jQuery('open-popup-link-button, .open-popup-link').addClass('no-scroll'); jQuery('open-popup-link-button, .open-popup-link').magnificPopup({
Please do not forge to purge the cache before every test. Or to make sure that you are not looking on a cached version of the page, just disable the minification and cache plugins temporarily.
Best regards,
IsmaelApril 9, 2021 at 1:54 pm #1293510Hi Ismael,
Thank you for the update, but it’s not working as expected.
Premise: no cache plugins, browser cache always empty, enfold minifications all disabled.
Added “a” to your code:
jQuery(‘open-popup-link-button a, .open-popup-link’).addClass(‘no-scroll’);
jQuery(‘open-popup-link-button a, .open-popup-link’).magnificPopup({The strange thing is that the code works every now and then. Let’s say once every 15/20 attempts. In another installation I have it never works.
My code now is:function popup_inline() { ?> <script type="text/javascript"> jQuery(window).load(function(){ jQuery('.open-popup-link-button a, .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'); function no_background_scroll_on_lightbox_open(){ ?> <script type="text/javascript"> (function($) { jQuery(window).load(function(){ jQuery('open-popup-link-button a, .open-popup-link').addClass('no-scroll'); jQuery('open-popup-link-button a, .open-popup-link').magnificPopup({ type:'inline', midClick: true, callbacks: { beforeOpen: function () { jQuery('body').css("overflow-y", "hidden"); }, close: function() { jQuery('body').css("overflow-y", "auto"); }, }, }); }); })(jQuery); </script> <?php } add_action('wp_footer', 'no_background_scroll_on_lightbox_open');
If you want to take a look, in private content you will find the credentials to enter the website.
Best Regards
ManuApril 12, 2021 at 12:07 pm #1293921Hi,
Thank you for the info.
a
We missed the dot in the selector “open-popup-link-button a”, it should be “.open-popup-link-button a”. Sorry about that. We edited the code and added the dot on these lines.jQuery('.open-popup-link-button a').addClass('no-scroll'); jQuery('.open-popup-link-button a').magnificPopup({
The page is not scrolling now after opening the lightbox. Please do not forget to purge the cache or do a hard refresh prior to checking the page.
Best regards,
IsmaelApril 12, 2021 at 12:45 pm #1293929Hi
Great. Thank you so much. How could I miss the dot too?!?
I’ve used several themes over the years, but none have a support like Enfold. I hope this thread will be of help to everyone who uses the modal popup (e.g. ginnywills). Before asking for assistance, I always look for a solution in the Forum and I often find it. Thanks again.Will the issue be fixed in the next release?
Best Regards
Manu- This reply was modified 3 years, 8 months ago by manurimini.
April 14, 2021 at 9:53 am #1294304Hi,
No problem! Glad to know that it is working, and thank you for the kind words.
Will the issue be fixed in the next release?
The theme does not actually allow opening of inline content in its default lightbox implementation, so this falls under custom modifications. Please keep the script in the functions.php file.
Best regards,
Ismael. -
AuthorPosts
- You must be logged in to reply to this topic.