YOOtheme Pro is here! The best WordPress and Joomla theme. Learn more

Avatar no64 asked

YOOtheme Pro - UIkit.scroll offset

It seems the "offset" function is not working anymore - YOOtheme Pro v. 1.10.8

usually I used this:

    /* smoothscroll with offset for menuitems */  
        jQuery('nav.uk-navbar a, .uk-navbar-item a').each(function() {  
            if (location.pathname == this.pathname) UIkit.scroll(this, {offset: 0});  
        });  

    /* smoothscroll with offset for mobile menuitems */  
        jQuery('ul.uk-nav a, div.social-mobile a').each(function(){  
            if (location.pathname == this.pathname) UIkit.scroll(this, {offset: 70});  
        });  

.. and I tried this:

    jQuery(' a.uk-button').attr('uk-scroll', 'offset: 100;');  
  • UIkit
  • YOOtheme Pro

Edited

6 Answers

0

Avatar thomas.p Support answered

well it doesn't work in the preview

But does it work on the actual site? This would indicate that there's only a problem with the preview, not with the code.

jQuery('.uk-button, a').each(function() {  
    UIkit.scroll(this).offset = 100;    
});

adding:
UIkit.scroll('.uk-button, a').offset = 100;
don't work anymore.

Please try the following instead. It seems to me that UIkit has a different behaviour with the selectors and for-each-loop than jQuery here, but that would be a question for the developers.

    jQuery('.uk-button, a').each(function() {  
        UIkit.scroll(this).offset = 100;    
    });

Note that you can also set a global default, if that's what you need.

UIkit.components.scroll.options.defaults.offset = 90;
0

Avatar thomas.p Support answered

Hi no64,

I cannot confirm that the offset wouldn't work in general. Can you please specifiy what exactly you are trying to achieve? Does only the second part (with the link) have problems with the offset or also the first part (smooth scroll navigation)?

For example, setting the attribute inline would work for me

<div>  
    <a href="#tome" uk-scroll="offset: 300">Scroll</a>  
</div>  
<div id="tome" style="margin-top: 500px;">  
    There  
</div>

and also initializing the scroll asynchronously would work for me

<div>  
    <a href="#tome" id="mylink">Scroll</a>  
</div>  
<div id="tome" style="margin-top: 500px;">  
    There  
</div>  
<script>  
    jQuery(function(){  
        UIkit.scroll('#mylink', {offset:400});  
    });  
</script>

Note that if the scroll attribute has already been initialized (e.g. this happens automatically when you are using the page builder and add a button element), you cannot overwrite the options by editing the attribute value in the DOM, but you have to set the option via JavaScript. Example:

<div>  
    <a href="#tome" uk-scroll id="mylink">Scroll</a>  
</div>  
<div id="tome" style="margin-top: 500px;">  
    There  
</div>  
<script>  
    jQuery(function(){  
        UIkit.scroll('#mylink').offset = 400;  
    });  
</script>

Kind regards
Thomas

Edited

0

Avatar no64 answered

Hi Thomas,

... yes, both parts are not working. I used to have that code example - it is one from you, i suppose - in the custom script section of YOOtheme Pro. but, it is not working with the current version of YOOtheme Pro.

0

Avatar thomas.p Support answered

The first code you provided works fine for me. It does not work in the preview, though. Do you have the problem on the actual site or only in the preview like me?

0

Avatar no64 answered

well it doesn't work in the preview

I tried your examples a little bit

if adding :

UIkit.scroll('.uk-button').offset = 100;  

it works,.. but
adding:

UIkit.scroll('.uk-button, a').offset = 100;  

don't work anymore.
I can't understand why.

0

Avatar no64 answered

it does not work on the actual site.... with my code
but if using yours

jQuery('.uk-button, a').each(function() {    
    UIkit.scroll(this).offset = 100;      
});

it woks... and the "global default" also.
Very strange to understand for me..

Know someone who can answer? Share a link to this question via email or twitter.