Before you ask please READ THIS

Reload issue Rife Pro (based on Chillout II)

in Rife Posts: 293
Hi Air

An weird error is happening when using tabs in your theme. I can relaod site as often as I want to - no problem. Unless is have clicked a tab (resulting in an URL ending with "/#Xyz" and then reload >then tabs will stop working and all content that had been stretched before is now boxed. You can check out the issue with https://test.laqueria.ch

Thanks Pascal

Comments

  • AirAir
    Posts: 10,970
    Hey :-)

    It seems this is creating JavaScript error, that is why not everything is styled after reload.

    I think it is caused by the usage of non English chars in your anchors, like in "#pediküre" it results in "#pedik%c3%bcre".

    Try changing these anchors to English chars only, so "#pedikure"

    With kind regards.
  • Posts: 293
    Air!

    If I ever make it to Poland I owe you lots of beer :)
    Great.. I didn't put any anhors in myself and it seems the module in that case uses the tab title as anchor. setting specific anchors without weird letter solves the javascript issue!
    BUT I still have a weird scrolling behavior when clicking the tabs (instead of going to top of the content it randomly scroll somewhere)
    Does Master have any idea why this could be?

    Thanks a ton! Pascal
  • AirAir
    edited August 2018 Posts: 10,970
    FLYART said: If I ever make it to Poland I owe you lots of beer
    Haha ;-)
    Don't worry about this. I am here to help with all those conflicts.


    FLYART said: BUT I still have a weird scrolling behavior when clicking the tabs (instead of going to top of the content it randomly scroll somewhere)
    Didn't notice this previously, but sure I know where is it coming from. It is probably our scroll to anchor mechanism. It tries to scroll to the hidden section(tab in this case) and it can not count its proper position as it doesn't exist yet. So I could say it is the theme issue.

    For WPBakery we had an exception for their tabs, to not scroll to them. I think I should add same for these Elementor tabs.

    However there will always be new elements that use anchors, so maybe a good idea would be to add bonus protection.
    I think it could be solved if we would add a small delay in this scroll to anchor.

    Please try such a change:
    -file rife\js\script.js, line ~2135
    				var move = function(target, href){
    						//noinspection JSCheckFunctionSignatures
    						$('html,body').animate({
    								scrollTop: Math.round(target.offset().top)
    							}, 1000,
    change to
    				var move = function(target, href){
    						//noinspection JSCheckFunctionSignatures
    						$('html,body').delay(100).animate({
    								scrollTop: Math.round(target.offset().top)
    							}, 1000,
    You can experiment with this part delay(100) - it is number of miliseconds to delay animation. Increase its value if it still doesn't work properly.

    If you need, I can also prepare for you exception code for this tabs, same as you see in line ~2152 of this file. If will disable scrolling at all for tabs.

    With kind regards.
    Post edited by Air on
  • Posts: 293
    Hi Air

    Thanks a lot. But this is slightely over my top ;)
    But hell.. as long as it works I don't really have to understand the plan? (As long as my anchors I use for onePage navigation will keep on working the way they should?) But a hint on how this help is always appreciated :)

    I tried to look for that file but didn't find the folder fatmoon in "themes/rife/" and in rife/js/script.js the code doesn't look the same?

    Well...
    Thanks,Pascal
  • AirAir
    Posts: 10,970
    FLYART said: I tried to look for that file but didn't find the folder fatmoon in "themes/rife/" and in rife/js/script.js the code doesn't look the same?
    O shit ;-) I corrected my typo, should be without "fatmoon".

    The file should look the same, however, I can not be sure it will be an exact same line. Search for //noinspection JSCheckFunctionSignatures in that file - there are 2 occurrences of it, and one is near code we are interested in :-)

    There just add .delay(100) part in proper place, like explained in previous post.
  • Posts: 293
    Found it! Changed the code... but it doesn't appear to change the behavior.. tried delays from 100 to 500 ....
  • AirAir
    edited August 2018 Posts: 10,970
    Then, in this case, it will not be the solution probably. Let's try with an exception instead.

    In the same file, few lines lower(~2148), you will find:
    contentAnchorsFilter = function(){
    	//we don't do script on VC pagination elements
    	var item = $(this);
    
    	return !(item.parent().hasClass('vc_pagination-item') || item.parents('li.vc_tta-tab').length || item.parents('h4.vc_tta-panel-title').length);
    };
    change it to:
    	contentAnchorsFilter = function(){
    	//we don't do script on VC pagination elements
    	var item = $(this);
    
    	return !(item.parent().hasClass('vc_pagination-item') || item.parents('li.vc_tta-tab').length || item.parents('h4.vc_tta-panel-title').length || item.hasClass('lae-tab-label'));
    };
    Should turn off scrolling for this tabs.
    I will think of a different general solution.

    These tabs come from some plugin, not Elementor, right?

    With kind regards.
    Post edited by Air on
  • Posts: 293
    Hi Air

    Sorry for the late reply.. too much work and only two hands!
    But.. you're once more my hero! This did the trick just right!

    Thanks a lot
    Pascal
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

In this Discussion