Adapt Learning Community: Scroll clicked glossary item if decription disappears off the bottom of the screen

Hi all,

I've got quite a large glossary in something I'm working on, so the glossary needs to be scrolled to view the later items. Not a problem.

However, if you click a glossary item at the bottom of the browser window, the description expands downwards (invisibly - as it's beyond the bottom of the window - making it feel like nothing happened when you clicked on the item other than it becoming 'selected'). You then need to manually scroll further down the glossary to see the description.

Could someone far better than me at javascript offer a piece of code that auto-scrolls the glossary up to show the description if the description falls off the bottom of the window? I'm currently trying things with the showGlossaryItemDescription() function in adapt-contrib-glossaryItemView.js but nothing I try seems to work!

I'd really appreciate it. Chris

Yes, we had a similar problem with a recent project where we implemented links in the content that opened the definition in the glossary - so an even worse problem as the glossary term it opened was often not on screen at all!

This was the solution we came up with for that...

showGlossaryItemDescription: function() {
    var $glossaryItemTerm = this.$('.glossary-item-term');
    var $description = $glossaryItemTerm.addClass('selected').siblings('.glossary-item-description');

    $description.slideDown(400, _.bind(function() {
	this.$el.parents('.drawer').scrollTo($glossaryItemTerm);
	$description.a11y_focus();
    }, this));

    $glossaryItemTerm.attr('aria-expanded', false);
    this.model.set('_isDescriptionOpen', true);
}

Ideally you'd improve on this by first checking to see whether description is actually off screen or not before doing the scrollTo. Adapt includes a JQuery plugin called 'onscreen'* to help with this: calling $description.onscreen() will return a object with various properties that can help determine where that element is, I'd suggest that percentInviewVertical is probably a good one to use but have a look and see what you think.

* confusingly named inview.js - for legacy reasons I won't bore you with

Show parent | Reply

Thank you so much Matt.

The thing I'm working on also has links in the content so this was turning into a bit of a showstopper. This is perfect for now - I'll have a play with the 'fine tuning' suggestions when I can.

Show parent | Reply