Skip to main content

Web Developer @ MAJ Digital

Contact me at hey@peterbouda.eu

www.majdigital.ch

twitter.com/legocoder

linkedin.com/in/peterbouda

github.com/pbouda

Peter Bouda

Making an Angular UI Bootstrap accordion scrolling to top when opening #angularjs

2 min read

I am using the [UI Bootstrap Angular directives](https://angular-ui.github.io/bootstrap/),
specifically the accordion directive, within one of our projects at MAJ Digital.
Now I was looking for a way to scroll to the top of the accordion content,
when it is too large to fit on a screen. By default, the directive will be opened
at the middle of the content, so the user does not see the top and bottom of the
panel. A compact solution requires jQuery, for example in a directive like
the following:

```javascript
( function() {
'use strict';

/**
* Makes the `uib-accordion-group` element scroll to top on the
* `shown.bs.collapse` event. We use it in bootstrap accordions, when the
* user opens one of the accordion items this directive will scroll the
* item to the top of the screen.
*/
angular.module( 'app.shared' )
.directive( 'scrollTop', scrollTop );

function scrollTop() {
return {
restrict: 'A',
link: link
};
}

function link( scope, element ) {
scope.collapsing = false;
var jqElement = $( element) ;
scope.$watch( function() {
return jqElement.find( '.panel-collapse' ).hasClass( 'collapsing' );
}, function( status ) {
if ( scope.collapsing && !status ) {
if ( jqElement.hasClass( 'panel-open' ) ) {
$( 'html,body' ).animate({
scrollTop: jqElement.offset().top - 20
}, 500 );
}
}
scope.collapsing = status;
} );
}

} )();
```

You can then use the `scroll-top` directive on the `uib-accordion-group`, just like this:


...

Peter Bouda

Talk about Angular at AngularJS Portugal #lisbon #angularjs

1 min read

![Angular logo](https://cloud.peterbouda.eu/index.php/s/ppol6Io9rSYC8sj/download)

Next week I will be giving a talk at the AngularJS Portugal Meetup, about porting an app from Angular 1 to Angular 2. Hope to meet you there!

http://www.meetup.com/AngularJS-Portugal/events/230723687/

Peter Bouda

Peter Bouda

The current state of #Javascript ecosystem

2 min read

There is currently a lot of talk about the problems of the current JavaScript ecosystem, only sometimes there are also solutions mentioned. In general it seems there is a consensus that tooling, libraries and frameworks are changing very rapidly and it's hard to keep track with the changes and choose a future-proof solution for your next project. Here are two links with a good summary of the situation:

[Javascript Fatigue](https://medium.com/@ericclemmons/javascript-fatigue-48d4011b6fc4#.6kwb84p07)

[The Deep Roots of Javascript Fatigue](https://segment.com/blog/the-deep-roots-of-js-fatigue/)

When you read the first post carefully I think it mentions one of the sources of the problem: that there was not much going on for a while. The situation was kind of stuck due to problems in the specification process, so now everybody is trying to catch up. And of course it is kind of a trend in general to always choose the latest technology whether you really know it makes sense or not. You do an online search for the best JS framework and then go with React, so React will get popular. That creates a snowball effect on its own. But the posts also have an outlook that is often mention: 2016 will be the year of consolidation, so in a few month we will have a better picture. I agree to that. Whatever happens, things will stay interesting!

Peter Bouda

Peter Bouda

Peter Bouda

Peter Bouda

We proudly present: The IndieHosters Freedom Bundles https://blog.indie.host/2016/we-proudly-present-the-indiehosters-freedom-bundles

Peter Bouda

You need SaaS for RocketChat/Rocket.Chat: Have your own Slack like online chat, built with Meteor. https://github.com/RocketChat/Rocket.Chat It is now possible with us! https://blog.indie.host/2016/you-need-saas-for-rocketchatrocketchat-have-your-own-slack-like

Peter Bouda