Unexpected FUN automated vertical scrolling when navigating modules by clicking on the left-hand side panel

When I click on a “Module” in the column on the left, this column raises too much and I can’t even see the first subsections nore the Title of the module itself. For example, when I am in “Introduction” and I click on “Module 1” in the left column, here are the screenshots of “what I get” vs “What I would like to see”

I have noticed similar weird things, here is something that reproduces for me:

  1. Go to the Quiz M1.02 in Module 1. (for some reason it seems like you need something which has a big vertical content so a quizz is good for this)

  2. Click on Module 3 Parameter Tuning on the left-hand-side

  3. Rather than focussing vertically on Module 3 it focuses on Module 5 and now I need to scroll-up to go to Module 3, which I just clicked on :cold_sweat:

1 Like

Yes, it is very annoying ! I will inform the FUN platform with a new ticket but I’am sure thay already know …

I seem to remember (not sure at all tough) that this was happening before the FUN recent version update as well.

To be fair even when the navigation seems to work, I would personally prefer that the scroll keeps the module I have clicked on visible. It seems to go to the first sequence instead and I don’t see the module I have clicked on anymore.

I think this vertical scroll when clicking on a module was already confusing before the last update.

Personally I think I would prefer it if clicking in the left navigation module would not try to scroll the navigation window at all and let the users scroll the way they want by them-selves.

1 Like

I opened a ticket in FUN, I don’t think this is likely to be fixed in FUN soon.

One possible solution would be to use some Javascript on our side to change the HTML once the page has been loaded.

For example the HTML for the module 3 block is this one

<a href="#module-3-hyperparameter-tuning-child" role="button" class="button-chapter chapter" id="module-3-hyperparameter-tuning-parent" aria-controls="module-3-hyperparameter-tuning-child" aria-expanded="false">
 <span class="group-heading" aria-label="Module 3. Hyperparameter tuning">
 <span class="icon fa fa-caret-right" aria-hidden="true"></span>
 Module 3. Hyperparameter tuning
 </span>
</a>

Replacing in the Firefox developer tools href="#module-3-hyperparameter-tuning-child" by href="#" seems to have the functionality we want, i.e. no scrolling when unfolding the module content.

Full disclosure: not an web expert so I don’t know how hacky or clean this is …

1 Like

+1 for implementing this with a JS overlay after the end of this session.

Fixed.

Great thanks a lot!

You seem to have kept the href so I am curious how you fixed it but this can wait for our next meeting :wink:.

By using devtools breakpoints, I found the jQuery event handler was the following :

$(document).on('click', 'a[href^=#]', () => {
   // scroll animation
});

There is a jQuery function to remove event handler off() so I removed it like so :

$(document).off('click', 'a[href^=#]')

Then I realised it was my own code… It was added a while back in another course to handle anchor navigation links inside course content but it had side effects on the menu.

Sorry for not noticing it sooner…

Depuis le temps que FUN nous dit à chaque fois qu’on leur signale un problème “c’est de votre faute, c’est à cause de votre JS”, on a fini par ne plus les écouter ! C’est pas bien …
En plus, on a le même javascript sur tous nos Moocs, ce qui explique qu’on avait l’impression que c’était un bug de FUN.
@lesteve tu as bien fait d’insister :wink: je penserai à toi maintenant à chaque fois que je cliquerai dans la barre de navigation !

Le truc bizarre, c’est que notre ami Cédric nous a dit qu’il avait vu le même problème sur d’autres MOOCs de FUN, du coup encore un autre truc incompréhensible mais qui est pas grave …

Let’s consider this fixed!