Cool, cheers! I
You know, I can see several really interesting plugin concepts, thinking on this. It'll be interesting to see how that takes off 🙂
Beans is a plateform and then number of plugins that can be easily built is incredible. I think the future of Beans is an entire ecosystem built the Beans fashion 😉
Imagine every single plugin built using the Beans markup and UIkit, how easy it would be for everybody, devs and users!
Time will tell 😉
Digging this up... I'm really liking the logic of Beans... Using this method I was able to add smooth scrolling to a one page test I'm building.
But I have to use per item coding, like
beans_add_attribute('beans_menu_item_link[_13]','data-uk-smooth-scroll','offset:90');which is not ideal considering the menu entries will change.
I assume "data-uk-scrollspy-nav" would be the best option, but for some reason the:
beans_add_attribute("beans_menu[_navbar]","data-uk-scrollspy-nav","{closest:'li',smoothscroll:{offset:90}}");or even
beans_add_attribute("beans_menu[_navbar]","data-uk-scrollspy-nav","{closest:'li'}"); Does not seem to work at all. Which is funny because the markup seem to be appearing correctly in this page http://healthnmoney.com/david/davidncatia/beans-new/
<ul id="menu-one-page-menu" class="uk-visible-large uk-navbar-nav" data-uk-scrollspy-nav="{closest:'li'}" data-markup-id="beans_menu[_navbar]">
Can anyone spot the problem with this 'data-uk-scrollspy-nav'? Thank you so much
Hey David,
You are missing two things if you want to use the scrollspy. First you have to enqueue the UIkit component as it is used on top of the smooth-scroll, then if you want the smooth scroll with the scrollspy you have to declare it in your params. So your components enqueue code are:
beans_uikit_enqueue_components( array( 'smooth-scroll', 'scrollspy' ) );and you line to add it the attribute to your nav is:
beans_add_attribute( 'beans_menu[_navbar]', 'data-uk-scrollspy-nav', '{closest:\'li\', smoothscroll: true}' );Happy coding,
Hi Thierry,
That was brilliantly simple. I'm sorry for such an obvious question, but I'm just starting to get my mind around "the Beans way". So far I can see how this can be a great platform for Theme development.
By the way, this would be a question for a UIkit forum, but, although http://getuikit.com/docs/smooth-scroll.html only shows offset parameter, has anyone explored managing the speed and "type" of scrolling performed by smoothscroll?
Cheers
@ David,
a question, if I may 🙂 How did you insert the anchors for those jump links? Code view manual insert, or auto-generated filtering the beans_post_content?
Hi Meijers,
For now, I'm cheating yes. I've mannually added the anchors in the heading elements. And all the content is inside one sigle WP page.
It's on my to-do-list to actually have each section be on a separate WP page, where a loop inside of the main page template would fetch all other published pages that have similar slug to the items in the menus and contruct the whole thing. At that moment, to each heading will be added the anchor, corresponding to its page slug... But I haven't gone around that just yet...
Thierry, does it sound like a good approach to contruct a one page theme from Beans?
Cheers
That sounds interesting, but why maintain each section on a seperate WP page? Curious. My own "cheat" was making use of TOC+, unfortunately the widget appears incompatible with Beans. So I'm looking at this, with probably a regular function to add a menu to the page in question.
J.C. Meijers,
That's also a smart idea, and it works just fine. I'll strongly consider this approach. Thank you.
In my mind I'm picturing a Beans plugin which reads page content headers, adds uikit article markup, adds anchor link ID's and inserts a jump link enabled content menu 🙂
Hey David,
Regarding the speed parameter, it is not in their doc but I looked in the code and it turns out they is a parameter 🙂
The parameter is called duration and is set to 1000 by default. So instead of setting smoothscroll: true in your parameters, you may set smoothscroll: {duration: 2000} to make it slower or a lower number to make it faster.
Happy coding,
Hi Thierry,
Again, brilliant. I have to admit I did find it unlikely for a developper to leave out such relevant and present variable in Jquery.
It's shame that they left out the "transition" variable and only have
easeOutExpo=function(t,o,i,n,s){return o==s?i+n:n*(-Math.pow(2,-10*o/s)+1)+i}Would there be any decent way to change this equation, withouth having the changes lost after a Beans/UIkit update?
Thank you again
Hey David,
Sorry for the late reply, it slipt down the discussion and I missed it. It seems like the function is wrapped in if (!UI.$.easing.easeOutExpo) so you should be able to overright it 🙂
Have fun,