Page 6 – Support | Kriesi.at – Premium WordPress Themes

Hi,

Thank you for the inquiry.

The page should scroll automatically to the open toggle on load. This is declared in the config-templatebuilder/avia-shortcodes/toggles/toggles.js file > trigger_default_open function around line 160.

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

It is possible that a plugin is preventing the page from scrolling to the active toggle. Have you tried disabling the plugins temporarily?

You should also update the theme to version 4.9.2.1 as soon as possible.

Best regards,
Ismael

March 31, 2022 at 3:34 pm #1346755

Topic: Horizontal Gallery Improvements & Questions

in forum Enfold

THP Studio

Participant

Hey Gunter,

I was wondering if the Horizontal Gallery ALB element could get some attention soon.

Would really enhance the usefulness of this element if it had the following features:

– Autoscroll on/off
– Continuous scroll (eg: when it gets to the last slide it continues to the first one, rather than hitting a dead end) on/off
– Use either images or posts (exactly like the Accordion Slider, where you can select either Image based, or Entry based)
– Display of captions/text on/off

On this last point, we have some custom code to output the images title or ALT on the page (see private field), but can’t seem to work out how to get a Caption to display. When building the element and inserting the gallery, you can setup captions and an image link. But this caption never seems to get outputted in the page code anywhere? Could it be? That way at least we could use that as a title for the images, but without affecting the image title/ALT tags globally (as these images are in use in other areas of the site as well).

Finally, just a Q to do with adding image links via the gallery. I see that it adds any custom link to the media library’s data as well. So does this mean that if this image is used in other parts of the site as well, that this image will always link? Is there a way to add links to the images in the Horizontal Gallery that wouldn’t allow that?

I hope that all makes sense, and I can’t wait to see what you have in store for Enfold 5 :)

Thanks Gunter,

Tim.

March 10, 2022 at 1:27 pm #1343997

In reply to: Tab Section Scroll Down

freddyB

Hi, I found this script, but I’m facing the same issue: auto-scroll on page load (without any click).
I’ve also tried deactivating all plugins and other scripts. Same odd result.
I’ve also tried .on(‘click’) instead of .click()…same same

This is what I get in the console:
The service worker navigation preload request was cancelled before ‘preloadResponse’ settled. If you intend to use ‘preloadResponse’, use waitUntil() or respondWith() to wait for the promise to settle.

Any thoughts? Thanks!

February 28, 2022 at 12:37 pm #1342537

In reply to: sticky submenu in mobile

Yigit

Keymaster

Hi @spooniverse,

Yes, you would need to find following in menu.js file

					if( burger_menu.is(":visible") )
					{
						this.css({top: 'auto', position: 'absolute'}); fixed = false;
						return;
					}

and change it to following in your child theme

if( burger_menu.is(":visible") && (scrolled + modifier > top_pos) ){
	this.css({top: header.Height() , position: 'fixed !important'}); fixed = true;
}

Best regards,
Yigit

February 10, 2022 at 2:28 pm #1339988

In reply to: Ideal with for responsive color-section paralax

Hey Jak73,

Thank you for the inquiry.

To make it a bit simple, the width of the image should be close to that of the standard screen resolutions (1920x1080px, 1600x900px), and should have an aspect ratio of 16:9. The image should also exceed the height of the color section to get that subtle image delay when scrolling the document. But please note that the parallax script in the theme will handle the image resizing automatically based on the size of the color section, so you don’t really have to worry about the exact image size.

You can check the image in the private field to get an idea on how big the image should be in a parallax color section. The image is used in one of the demo with the parallax effect. And in case you didn’t know, you can also use the Layer Slider to create a parallax effect.

Best regards,
Ismael

February 10, 2022 at 6:16 am #1339899

In reply to: Accordion Toggle Not Working

ellamac

I removed the following code (Mike’s post) from functions.php and then replaced the shortcodes.js file with the latest from the Enfold download which has helped – I can open one toggle only but then any following toggles automatically scroll to the top of the page every time.

function wp_change_shortcodesjs() {
wp_dequeue_script( ‘avia-shortcodes’ );
wp_enqueue_script( ‘avia-shortcodes-child’, get_stylesheet_directory_uri().’/js/shortcodes.js’, array(‘jquery’), 2, true );
}
add_action( ‘wp_print_scripts’, ‘wp_change_shortcodesjs’, 100 );

Any further suggestions?
PS– there is second Accordion element on the home page that shows exactly the same behaviour.

This reply was modified 4 years ago by ellamac.

February 7, 2022 at 5:41 pm #1339411

In reply to: Scroll postion one page mobile

niclasg

Hi Ismael,

Looks ok for now. Thanks.
Can you re.open the topic:
https://kriesi.at/support/topic/fixed-sticky-header-on-mobile-iphone/

Due to this code, Yigit shared with me, the scroll function is on mobile has a defect. After I clicked on a menu point and I wish up and down, it automatically changes the position.

February 2, 2022 at 5:49 am #1338369

In reply to: Theme Shows »fbq('track', 'ViewContent');« above Navigation / Navigation Problem

Arne_brikz_2020

This reply has been marked as private.

January 21, 2022 at 7:39 am #1336484

In reply to: Cookiefenster ist bei mobiler Ansicht abgeschnitten

Hi,

We cannot reproduce the issue on our end. The popup container scrolls down to the very bottom and we are able to access the very last tab or toggler without any issue. We provided a screenshot in the private field.

If you want, we can adjust the height of the popup container to make the privacy tabs more accessible. Please add this code in the Quick CSS field.

.av-inline-modal {
    max-height: 95vh;
    overflow: auto;
}

Please make sure to toggle or temporarily disable the Enfold > Performance > File Compression settings after adding the css.

Best regards,
Ismael

January 18, 2022 at 11:42 am #1336005

Topic: easyslider doesn't display first image and automatic scrolling is not working

in forum Enfold

alainbruant

Participant

Dear support,

I am running Enfold 4.8.8.1 and WordPress 5.8.3
Since 6 months approx, the first image on “easyslider” object in my pages is not displayed when the page is loaded.
I tried to disable all plugins : no change
I changed “easyslider” Advanced settings to “Do not use lazyloading” : no change
I changed automating scrolling with a duration of 3 sec : no scrolling, blank image
In any case, if I use the left or right arrow to change the slide and, after that, images are displayed.

You can see the problem at link #1:
below “Cursus AB inter NET work” and below ” Cursus Belden” there are 2 “easyslider” in the big space between these titles and the fixed images (the orange Cursus Ab inter net work” and the blue fixed image ‘cursus Belden”

Another page : link #2
Easyslider is used to display a full sized intro image (only one slide) which is never displayed.
On the previous link, to avoid this problem, I used “Advanced LayerSlider” with only one slide and the image is correctly displayed.

It was working fine in the past (at least, in march last year) but I discovered that after an upgrade (don’t know if it was WP or Enfold – as I upgrade them automatically). Was hoping this to be solved in a future release of Enfold, but new versions are coming and my bug is still there.

Can you help solve this issue ?
best regards

Alain

January 15, 2022 at 7:36 pm #1335711

In reply to: Scroll blocked

inliner68

This reply has been marked as private.

January 12, 2022 at 7:23 am #1335194

In reply to: Option to make Elements a "sticky header"

Hi,

It sounds like the block editor is currently enabled. Have you tried reverting back to the classic editor? Because when the classic editor is active, it is possible to set the Advance Layout Builder to full screen, which will automatically set the elements panel to be fixed or make it stick to the top of the builder while scrolling. Please check the screenshot in the private field.

Thank you for your patience.

Best regards,
Ismael

December 3, 2021 at 3:34 am #1331371

In reply to: Using Magnific Popup modal make page scrolls up

Hey Kyle,
Thanks for the link to your site but the login didn’t work for me, nonetheless try this function in your functions.php instead:

function popup_inline_with_no_scroll() { ?>
<script>
(function($) {
  $(window).on('load', function(){
    $('.open-popup-link').addClass('no-scroll');
    $('.open-popup-link').magnificPopup({
      type:'inline',
      midClick: true,
      callbacks: {
        beforeOpen: function () {
          $('body').css("overflow-y", "hidden");
        },
        close: function() {
          $('body').css("overflow-y", "auto");
        },
      },
    });
  });
})(jQuery);
</script>
<?php }
add_action("wp_head", "popup_inline_with_no_scroll");

Then clear your browser cache and any cache plugin, and check.

Best regards,
Mike

December 1, 2021 at 3:54 pm #1331181

Topic: anchors strange behaviour – scrolling to anchor not precise

in forum Enfold

GePu

Participant

dear Kriesi-Team!

I have some issues with anchors but didn´t find the correct solution yet.

I use anchors as individual links in a submenu of the main navigation so that the visitor of the site can scroll through the page or he can jump (from anywhere) to the correct position of the site.

Well it works only when I am allready on the subsite wich uses the anchor. Then it scrolls automatically to the correct position using the anchor BUT when the visitor was on the main page and uses the main navigation to jump to the anchor the position is not correct.

I tried to use the anchor-URL without the last Slash for the individual link in the main navigation (www.website.com/subsite#anchor) > then the issue is the other way arround, meaning it will work via the main navigation but WONT WORK when the visitor is allready on the subsite with the anchor (then it scrolls not far enough).

Really strange, especially when it works fine with all the other anchors on the website only one is causing the issue.

So if you wanna test it:
this is the faulty anchor: https://www.schmiedeamravelsbach.at/impressionen/#inspirationen
…test it by first surfing to: https://www.schmiedeamravelsbach.at and then click on IMPRESSIONEN and in the submenu on INSPIRATIONEN > scrolls not far enough
when you then go to BILDERGALERIE (scrolls up) and then again on INSPIRATIONEN > scrolls down to correct position of the anchor

Help is appreciated :-)

funfact: it occurs when using firefox or safari but not when using edge….????

This topic was modified 4 years, 2 months ago by GePu.

November 30, 2021 at 4:41 am #1330911

In reply to: Not the same view on the IPad-pro

Nikko

Inactive Moderator

Hi Angèle,

Thanks for giving us admin access.
We have modified the CSS code with this one:

@media only screen and (max-width: 1366px) {
    .flex_cell.avia-full-contain {
        background-size: auto 70% !important;
        background-attachment: scroll !important;
        background-position: 0 50% !important;
    }
}

@media only screen and (max-width: 980px) {
    .flex_cell.avia-full-contain {
        background-size: auto 60% !important;
    }
}

Please review your site.

Best regards,
Nikko

November 26, 2021 at 8:00 am #1330551

In reply to: Adding a "login/logout" icon on menu

Hi,

Thank you for the update.

Try to remove the image from the menu item temporarily, then use this css code to insert an icon font inside the login menu item. The icon font should automatically switch color when the header changes or when scrolling down or up.

#menu-item-8683 a:before {
    font-family: 'entypo-fontello';
    content: "";
    font-size: 26px;
}

#menu-item-8683 .avia-menu-text {
    display: none;
}

Best regards,
Ismael

November 24, 2021 at 6:42 pm #1330357

Topic: scrolling down automatically

in forum Enfold

covert spain

Participant

HI, in a few urls, suddenly… when visiting the page, automatically …. scrolls to the bottom of the page without clicking anywhere, srolls down to the end of the page… footer.

Can you pls help?
in almost all pages except the home page

everything is up to date and start happening automatically….
many thanks

Ricardo

November 21, 2021 at 9:31 am #1329830

In reply to: Sucherweiterung anpassen

Guenni007

And because of event.which is deprecated ( i erased that function above ) use better:
( on child-theme functions.php )

function disable_enter_key(){
?>
<script type="text/javascript"> 
(function($) {
	$(document).on('keypress keydown keyup', '#searchform', function(e) {
	  if(e.keyCode == 13) {
		e.preventDefault();
		return false;
	  }
	});
})(jQuery);	
</script>
<?php
}
add_action('wp_footer', 'disable_enter_key');

by the way: on small screens ( mobile devices ) the ajax response list maybe too big for the screen. On default – it is not scrollable that window:

#top #searchform .ajax_search_response {
    max-height: calc(100vh - 200px);  /* test it with fitting settings */
    overflow-y: auto;
    height: auto;
}

disadvantage: maybe you do only hamper enter key on desktop devices ! because on my mobile the text input will be closed by enter key ;)
so maybe that line above to replace by:
$(document).on('keypress keydown keyup', 'html:not(.avia_mobile) #searchform', function(e) {

November 13, 2021 at 1:17 pm #1328866

In reply to: Where to put a code behind button

Hi,
Glad to hear this helped, to prevent the popup scroll try adding this code to the end of your functions.php file in Appearance ▸ Editor:

function prevent_popup_scroll() { ?>
    <script>
(function($) {
  $(window).on('load', function(){
    $('.open-popup-link').addClass('no-scroll');
    $('.open-popup-link').magnificPopup({
      type:'inline',
      midClick: true,
      callbacks: {
        beforeOpen: function () {
          $('body').css("overflow-y", "hidden");
        },
        close: function() {
          $('body').css("overflow-y", "auto");
        },
      },
    });
  });
})(jQuery);
</script>
    <?php
}
add_action('wp_footer', 'prevent_popup_scroll');

Best regards,
Mike

October 27, 2021 at 3:22 pm #1326713

Topic: Header Widget / Widget Header / responsiv ?

in forum Enfold

Jui

Participant

Hi,

wir haben ein Header Widget wie in Ihrer Beschreibung umgesetzt, es funktioniert auch.
Jetzt soll es responsiv werden, 50% Verkleinerung oder in Pixel.
Wie setzen wir das um?

we have implemented a header widget as in your description, it works too.
Now it should be responsive, 50% reduction or in pixels.
How do we do that?

Hier der CSS Code des Widget.

/************************************

Widget header

*************************************/

#header .widget {
	position:absolute!important;
	left:5%!important;
	top:0px!important;
}

#header.header-scrolled .widget {
	position:absolute!important;
	left:5%!important;
	top:-30px!important;	
}

#header.responsive .widget  {
width:50px;
height:auto;
}

#header.header-scrolled .widget img {
width:30px;
height:auto;
}

null

October 26, 2021 at 8:58 am #1326451

In reply to: Avia pop-up / magnific pop-up on mobile pops up below the fold

Hey domchocolate,

Thank you for the inquiry.

We have checked the lightbox on a browser device emulation and it seems to be working correctly. If you need to prevent the document from scrolling and make sure that the container appears at the center of the document, please try to replace the script with the following code.

function av_open_inline_popup(){
?>
<script type="text/javascript">
(function($) {
$(window).on('load', function(){
	$('.open-popup-link').addClass('no-scroll');
	$('.open-popup-link').magnificPopup({
		type:'inline',
		midClick: true,
		callbacks: {
			beforeOpen: function () {
				$('body').css("overflow-y", "hidden");
			},
			close: function() {
				$('body').css("overflow-y", "auto");
			},
		},
	});
});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'av_open_inline_popup');

Thread: https://kriesi.at/support/topic/lightbox-17/

Best regards,
Ismael

October 25, 2021 at 11:06 pm #1326400

In reply to: I can't see the full theme displayed when I instal my demo theme.

ainisk

This reply has been marked as private.

October 17, 2021 at 8:26 pm #1325321

In reply to: Background video options outside Color Section layout?

Hey WebDevDept,
Thank you for your patience, as I understand your situation you would like to have some 1/2 column background videos with text blocks next to them like in a checkerboard pattern, tested using a grid row element with text on one side and a code block on the other with an html code for a background video.
This is the backend view:

this is the frontend view:

the html is based on this codepen, and if you are using the Avia Layout Builder Debugger you can add my test page to your site to examine with this shortcode:

[av_heading heading='Below a grid row element is used' tag='h3' style='' subheading_active='' show_icon='' icon='ue800' font='entypo-fontello' size='' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' subheading_size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' icon_size='' av-medium-font-size-1='' av-small-font-size-1='' av-mini-font-size-1='' color='' custom_font='' subheading_color='' seperator_color='' icon_color='' margin='' margin_sync='true' padding='10' icon_padding='10' headline_padding='' headline_padding_sync='true' link='' link_target='' id='' custom_class='' template_class='' av_uid='av-kuvig2gc' sc_version='1.0' admin_preview_bg=''][/av_heading]

[av_layout_row border='' min_height_percent='' min_height_pc='25' min_height='0' color='main_color' mobile='av-flex-cells' mobile_breaking='' av-desktop-hide='' av-medium-hide='' av-small-hide='' av-mini-hide='' id='' custom_class='' template_class='' aria_label='' av_element_hidden_in_editor='0' av_uid='av-5o6ocv' sc_version='1.0']
[av_cell_one_half av_uid='av-4at75r']

[av_textblock size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' font_color='' color='' id='' custom_class='' template_class='' av_uid='av-kuvihovt' sc_version='1.0' admin_preview_bg='']
This is 1/2 of the grid row, the other half has a background video.
[/av_textblock]

[/av_cell_one_half][av_cell_one_half vertical_align='top' padding='0px' padding_sync='true' background='bg_color' background_color='' background_gradient_color1='' background_gradient_color2='' background_gradient_direction='vertical' src='' attachment='' attachment_size='' background_attachment='scroll' background_position='top left' background_repeat='no-repeat' link='' linktarget='' link_hover='' mobile_display='' custom_class='' template_class='' av_uid='av-2ohsgf' sc_version='1.0']

[av_codeblock wrapper_element='' wrapper_element_attributes='' codeblock_type='' alb_description='' id='' custom_class='' template_class='' av_uid='av-kuvijbtf' sc_version='1.0']
<style>
/* video background */
#background-video {
  height: 100%;
  width: 100%;
  object-fit: cover;
  z-index: -1;
}

/* page content */
p.text {
  color: #fff;
  font-weight: bold;
  text-align: center;
font-size:2em;
}
span.text {
    top: 30vh;
    position: absolute;
    z-index: 5;
    left: 30%;
    width: 50%;
}

@media (max-width: 750px) {
    #background-video { display: none; }
    body {
      background: url("https://assets.codepen.io/6093409/river.jpg") no-repeat;
      background-size: cover;
    }
}
</style>
<video id="background-video" autoplay loop muted poster="https://assets.codepen.io/6093409/river.jpg">
  <source src="https://assets.codepen.io/6093409/river.mp4" type="video/mp4">
</video>
<span class="text">
<p class="text">THIS IS A RIVER.</p>
<p class="text">How majestic.</p>
</span>
[/av_codeblock]

[/av_cell_one_half]
[/av_layout_row]

Hopefully this helps.

Best regards,
Mike

October 13, 2021 at 1:11 pm #1324741

In reply to: Fullwidth Submenu Active text Underlined

Hi,
Thank you for your patience and for the screencast, to add a menu item hover please try this css:

#sub_menu1 #menu-main-menu a:hover {
    display: inline-block;
    visibility: visible;
    border-bottom: 2px solid #fff;
    background: transparent !important;
    opacity: 1;
    padding-bottom: 6px;
}

I tested the scrolling issue and the jump occurs when the sub-menu position is changed from absolute to fixed, this is part of the script for the sticky sub-menu and this added script doesn’t programmatically affect this, it measures the height and distance of the element. I say “programmatically” but strange things can happen.
Anyways I stared at this for a long time scrolling up & down & reviewing your video, and I believe that this is based on the manual scroll speed. When I test with & without the script (on Chrome & Windows 10) if I scroll slowly the jump is almost not there and is the same with & without the script, but if I test quickly the jump really shows, but it seems to be the same with & without the script. I note that in your video the test without the script was slow, and the test with the script was fast.
So for me it was hard to be consistent manually scrolling, so I tested with this script which waits 2 seconds for the pages to load then scrolls down 1200px over 2 seconds, so it’s slow. I also adjusted the speed to 1 second so it was faster and 5 seconds so it was very slow. I did this with & without the script enabled, and in all cases the behavior was the same.
This was the test script if you would like to try in your your functions.php file:

function scroll_test_script() { ?>
    <script>
(function($) {
	setTimeout(function () {
	  $('html, body').animate({scrollTop: (1200)}, 2000);
}, 2000);
}(jQuery));
</script>
    <?php
}
add_action('wp_footer', 'scroll_test_script');

Please see the videos below.
So I guess I don’t really have a solution for you, but considering that the auto scroll test went so well perhaps there is a script to force a slower mouse wheel scroll, but perhaps that would just frustrate users?

Best regards,
Mike

September 27, 2021 at 8:38 pm #1322540

In reply to: Youtube video not blocked properly

Guenni007

Is it too complicated for you to implement?
maybe this is better – ( as mentioned above – the second button had to be not an anchor link leading to an id of a color-section or something like this )

function inline_popup_youtube_link() { 
?>
<script type="text/javascript">
(function($){
$(window).on('load', function () {  
	$('.custom-class').find('a[href^="#"]').addClass('no-scroll');
	$('.custom-class').magnificPopup({
		delegate: 'a[href^="#"]',
		type:'inline',
		midClick: true,
	});
 });   
})(jQuery);
</script>
<?php 
}
add_action('wp_footer', 'inline_popup_youtube_link', 9999);

Borlabs can block iframes – see : Borlabs – Content Blocker – Youtube :

This is the shorcode i put inside a div – and set for the div a class : mfp-hide
This class is the magnificPopup class that is set to display: none
With that code above – every anchor link that starts with “#” inside that custom-class ( you can have every other name for it ) will open in a lightbox. In this case it is that youtube film – blocked by borlabs cookie til you consent.
The button itself is linking to manual #youtube-film ( this had to correlate with the div ID that you like to open )

<div id="youtube-film" class="mfp-hide">[borlabs-cookie id="youtube" type="content-blocker"]<iframe width="100%" height="800" src="https://www.youtube-nocookie.com/embed/Uzjt3fvIlnY" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>[/borlabs-cookie]</div>

September 24, 2021 at 6:33 am #1322115

In reply to: Youtube video not blocked properly

Guenni007

well – borlabs offers an iframe option.

something like this placed on that page in a codeblock element:
<div id="youtube-film" class="mfp-hide">[borlabs-cookie id="youtube" type="content-blocker"]<iframe width="100%" height="800" src="https://www.youtube-nocookie.com/embed/Uzjt3fvIlnY" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>[/borlabs-cookie]</div>
The mfp-hide class will ensure that the div in the codeblock isn’t visible.
your button is linking to that ID: #youtube-film ( if you got more than one film – each got his own id ) for each a unique div with that id (could be in the same codeblock)
Give a custom-class to your button!
Then you had to make your own magnificPopup script to open that class in an inline popup ;)
the custom-class as trigger with midclick=true, type= 'inline', delegate: 'a', as option

Link
maybe you include in that script outside that magnificPopup function
$('.custom-class').find('a').addClass('no-scroll');

PS: it will work – but with two buttons on that slider we had to find better selectors ! otherwise the second button will be triggered too.

as mentioned above give a custom-class in this case to the slider


function inline_popup_youtube_link() { 
?>
<script type="text/javascript">
(function($){
$(window).on('load', function () {  
	$('.custom-class').find('a[href*="youtube"]').addClass('no-scroll');
	$('.custom-class').magnificPopup({
		delegate: 'a[href*="youtube"]',
		type:'inline',
		midClick: true,
	});
 });   
})(jQuery);
</script>
<?php 
}
add_action('wp_footer', 'inline_popup_youtube_link', 9999);

PPS: because the link isn’t really a youtube link ( remember the link goes to that div with ID: #youtube-film )
if you like to use it on other places – the ID must have a string with “youtube” maybe you can name them #youtube-1, #youtube-2 etc.

OR choose as selector: for the anchor : a[href^="#"] ( replace it on both lines ) – it means the link starts with #
But then the second button in the slider must not be an anchor link of the page. This would also fall into the trigger.
________
Das dort die Vorschaubilder von Youtube gezeigt werden in einer lokalen Version ( daher meine Frage oben ) – wird bei dir nicht der Fall sein !
Es wird das Standard Borlabs Preview image gezeigt werden.
Da habe ich ordentlich borlabs und youtube kenntnisse mit eingebracht und eigene Scripte geschrieben.

September 15, 2021 at 11:54 am #1321021

In reply to: Tab-Section: all tabs closed