AnsweredAssumed Answered

Linking to a Module and Repositioning

Question asked by cesbrandt on Sep 8, 2016
Latest reply on Sep 26, 2016 by cesbrandt

Alright, so this is a little tricky to title, so I'm just going to leave it at that and explain the situation.


We developed our own grid layout that we use as the Course Homepage and links to each module on the Modules page accordingly. This was all well and good until this last update. Now, while the links still work and are valid, the positioning is messed up. Testing in Google Chrome, Mozilla Firefox, Microsoft Internet Explorer, and Apple Safari all produced this result, so we proceeded with the determination that the issue is not browser-specific.


To be certain that the issue was not being caused by either our custom CSS or JavaScript, we removed it from the test environment and found the issue occurred without our manipulations. This led us to look at what Canvas is doing when it loads the page.


Here's a screen capture of one of the tests without our custom configurations in Google Chrome 52:


Here's what we found happens, step-by-step:


  1. User clicks on a grid block from homepage (/courses/109/modules/770)
  2. Canvas identifies the module and redirect the user to the Modules page with a named location appended to the URL (/courses/109/modules#module_770)
  3. Canvas JavaScript begins to run, asynchronously, allowing the page to register as loaded prior to completion of the script execution
  4. Browser renders the Modules page with the structure for Due Dates and Point Values included for every item (even content pages and external URLs, which can't have them)
  5. Browser scrolls to the correct module
  6. Canvas scripts finish executing, updating the "placeholders" with the corresponding information or removing them if no information is to be added for each item
  7. Browser re-renders the Modules page with the revised structure


That last bit results in a display that is shorter than was originally rendered due to the removal of "placeholders". The browser doesn't have any way to know to adjust, so the scroll stays positioned where it was, even though its content gets moved further up.


Sadly, because this JavaScript is entirely non-editable (it's in the context_modules JavaScript file) there is no way to "listen" for its completion. Nor is there anyway to identify if any particular item in the list would have this content added or not, thus we can't test for completion off the last entry to be updated as it may vary from course-to-course.


This leaves only using a timing function (setInterval or setTimeout) to re-execute the scroll at an arbitrary point of time. Not ideal due to varying load times and user response times. If may do as it's supposed to without impacting the user experience, or the user may start to scroll and the script jumps them back to where it was supposed to initially go, or the Canvas script takes too long to finish and the timed scroll becomes pointless.


Has anyone else encountered something similar to this? If so, do you have any suggestions on how we can address this in a more ideal manner than a timed event?