Adapt Learning Community: Trickle extension

The course I'm currently working on has blocks that have a bit of a 'jagged' background treatment between them. The background is moved upwards just a bit to overlap the previous block. However, it looks a little weird with Trickle when you can't see the new background until you click the Continue button, and then the jagged background from the next block instantly shows up overlapped.

I was hoping there was a way to use Trickle to also fade in new blocks before it scrolls instead of just visibly displaying them. I've been combing through the JS files but can't seem to find the right event handler or place to put in what would be a simple jQuery call. Any ideas?

Thanks!

https://github.com/adaptlearning/adapt-contrib-trickle/blob/master/js/trickleView.js#L83

https://github.com/adaptlearning/adapt-contrib-trickle/blob/master/js/pageView.js#L237

https://github.com/adaptlearning/adapt-contrib-trickle/blob/master/js/adapt-contrib-trickle.js#L103

^ one of these is probably the line you need

You can either listen to an event:

Adapt.on("trickle:steplock", function (view) {

view.$el.addClass("fade-in");

});

And make yourself up a nice CSS transition for the class or do a jquery fadein directly.

Let me know what works.

Ollie.

Show parent | Reply

Thanks Oliver! That spot in trickleView.js ended up being what I needed. For a quick solution to start, I added the fadeIn directly above the Adapt trigger as follows:

$(this.$el).next().hide().fadeIn('slow');

Of note was that this.$el was pointing to the current block, not the block that needed the fading, so I used next() to get the next sibling. Then I just hid and applied a quick fadeIn call to the proper element.

I'll have to do some more testing to ensure there aren't any issues but this is very promising. Thanks so much!

Keith

Show parent | Reply