Moodle
  1. Moodle
  2. MDL-33649

Prevent page from scrolling when activity chooser is open

    Details

    • Type: Improvement Improvement
    • Status: Closed
    • Priority: Minor Minor
    • Resolution: Fixed
    • Affects Version/s: 2.3
    • Fix Version/s: 2.3
    • Component/s: Course, Usability
    • Labels:
    • Testing Instructions:
      Hide

      In as many browsers as possible (at least IE and non-IE).

      • Open course page
        • Confirm that the page can be scrolled
      • Turn editing on
        • Confirm that the page can be scrolled
      • Open the activity chooser
        • Confirm that the page can no longer be scrolled
      • Close the activity chooser
        • Confirm that the page can be scrolled again
      • Move down the page a little
        • Confirm that the page can be scrolled
      • Open the activity chooser
        • Confirm that the page can no longer be scrolled
      • Close the activity chooser
        • Confirm that the page can be scrolled again

      We run the test a second time slightly further down the page to ensure that there are no weird effects if the page is not at the top.

      Show
      In as many browsers as possible (at least IE and non-IE). Open course page Confirm that the page can be scrolled Turn editing on Confirm that the page can be scrolled Open the activity chooser Confirm that the page can no longer be scrolled Close the activity chooser Confirm that the page can be scrolled again Move down the page a little Confirm that the page can be scrolled Open the activity chooser Confirm that the page can no longer be scrolled Close the activity chooser Confirm that the page can be scrolled again We run the test a second time slightly further down the page to ensure that there are no weird effects if the page is not at the top.
    • Affected Branches:
      MOODLE_23_STABLE
    • Fixed Branches:
      MOODLE_23_STABLE
    • Pull from Repository:
    • Pull Master Branch:
      MDL-33649-master-2
    • Rank:
      41640

      Description

      Eloy suggested that we should prevent the page from scrolling when the activity chooser is open, and I've just discovered how this can be done. For most browsers, it should be as simple as setting the body overflow to hidden whilst the viewer is open. IE is slightly more frustrating and needs the overflow changing to hidden for the HTML tag rather than the body tag and needs to be changed back to 'scroll' instead of 'visible'. Helpful.

      I have a patch for this, though I appreciate it's really a bit too late in the day to be integrating this for 2.3 (though it would really enhance usability if it were integrated).

        Issue Links

          Activity

          Hide
          Andrew Nicols added a comment -

          I've tested this so far in:

          • Chrome (19 on Mac)
          • Safari 5.1
          • Firefox

          Will confirm later using:

          • IE 9
          • Opera
          Show
          Andrew Nicols added a comment - I've tested this so far in: Chrome (19 on Mac) Safari 5.1 Firefox Will confirm later using: IE 9 Opera
          Hide
          Andrew Nicols added a comment -

          As usual, IE has to be different but have updated the patch and prevented scrolling there too.

          Now tested on:

          • Chrome
          • Safari
          • Firefox
          • Opera
          • IE9
          Show
          Andrew Nicols added a comment - As usual, IE has to be different but have updated the patch and prevented scrolling there too. Now tested on: Chrome Safari Firefox Opera IE9
          Hide
          Ruslan Kabalin added a comment -

          Looks good. Another option could be disabling scrolling via mouse wheel event (probably pgup pgdown buttons press as well).

          Show
          Ruslan Kabalin added a comment - Looks good. Another option could be disabling scrolling via mouse wheel event (probably pgup pgdown buttons press as well).
          Hide
          Andrew Nicols added a comment -

          Setting overflow to hidden does disable the mouse wheel, and keyboard events too.

          Show
          Andrew Nicols added a comment - Setting overflow to hidden does disable the mouse wheel, and keyboard events too.
          Hide
          Eloy Lafuente (stronk7) added a comment -

          I think this is exactly the expected behavior, so +1 to sending it to integration. Many thanks!

          Show
          Eloy Lafuente (stronk7) added a comment - I think this is exactly the expected behavior, so +1 to sending it to integration. Many thanks!
          Hide
          Ruslan Kabalin added a comment -

          Sounds good, ready for integration.

          Show
          Ruslan Kabalin added a comment - Sounds good, ready for integration.
          Hide
          Andrew Nicols added a comment -

          Applies to master only - the activity chooser and chooser dialogues are not available in prior versions.

          Show
          Andrew Nicols added a comment - Applies to master only - the activity chooser and chooser dialogues are not available in prior versions.
          Hide
          Dan Poltawski added a comment -

          Are you able to try this out on an iPad?

          We saw a problem today where it was it was half way down the page on ipad

          Show
          Dan Poltawski added a comment - Are you able to try this out on an iPad? We saw a problem today where it was it was half way down the page on ipad
          Hide
          Andrew Nicols added a comment -

          I've just tried on an iPad but all working as expected wrt to the file picker location with one caveat – if you open the chooser in portrait mode and switch to landscape, it doesn't re-center the picker. This is difficult to fix - suggestions on a postcard?

          Additionally, it seems that mobile safari doesn't stop the scrolling. I'm not sure how we can sort this one out though. I think that the usability enhancement given by this is still worth including it because desktop browsers respond to the mousewheel and start scrolling the background when trying to scroll the picker. This isn't so bad in mobile safari though.

          Show
          Andrew Nicols added a comment - I've just tried on an iPad but all working as expected wrt to the file picker location with one caveat – if you open the chooser in portrait mode and switch to landscape, it doesn't re-center the picker. This is difficult to fix - suggestions on a postcard? Additionally, it seems that mobile safari doesn't stop the scrolling. I'm not sure how we can sort this one out though. I think that the usability enhancement given by this is still worth including it because desktop browsers respond to the mousewheel and start scrolling the background when trying to scroll the picker. This isn't so bad in mobile safari though.
          Hide
          Andrew Nicols added a comment -

          I can't seem to find a way to prevent the scrolling on iOS. I've tried adding a listener to the touchmove event and preventing the default event, but that then prevents the list of activities and resources from being scrolled too.

          I think it's best to ignore iOS devices for the moment as the interaction with the chooser is pretty reasonable on an IOS device anyway.

          Show
          Andrew Nicols added a comment - I can't seem to find a way to prevent the scrolling on iOS. I've tried adding a listener to the touchmove event and preventing the default event, but that then prevents the list of activities and resources from being scrolled too. I think it's best to ignore iOS devices for the moment as the interaction with the chooser is pretty reasonable on an IOS device anyway.
          Hide
          Andrew Nicols added a comment -

          Found a minor issue with this:

          The chooser has been designed such that if you have a small screen, it will scale to fit. Below a certain size, it will convert to absolute position so that you can scroll the page to get to the button etc.

          We need to make the scroll disabling only work when the screen size matches the same criterion. This is pretty simple to do - I already have a patch.

          Show
          Andrew Nicols added a comment - Found a minor issue with this: The chooser has been designed such that if you have a small screen, it will scale to fit. Below a certain size, it will convert to absolute position so that you can scroll the page to get to the button etc. We need to make the scroll disabling only work when the screen size matches the same criterion. This is pretty simple to do - I already have a patch.
          Hide
          Andrew Nicols added a comment -

          Updated patch to fix window size issues.

          Show
          Andrew Nicols added a comment - Updated patch to fix window size issues.
          Hide
          Andrew Nicols added a comment -

          iOS orientation changes are addressed separately in MDL-33703

          Show
          Andrew Nicols added a comment - iOS orientation changes are addressed separately in MDL-33703
          Hide
          Andrew Nicols added a comment -

          We really should integrate MDL-33729 at the same time as this one as it causes issues for users using the [x] button when closing the chooser.

          Show
          Andrew Nicols added a comment - We really should integrate MDL-33729 at the same time as this one as it causes issues for users using the [x] button when closing the chooser.
          Hide
          Dan Poltawski added a comment -

          Looks risky to me.

          'Y.UA.ie' doesn't sound good to me.

          Show
          Dan Poltawski added a comment - Looks risky to me. 'Y.UA.ie' doesn't sound good to me.
          Hide
          Andrew Nicols added a comment -

          According to the docs (http://yuilibrary.com/yui/docs/yui/yui-ua.html) it's not intended for feature detection, but is suitable for browser.detection.

          IE behaves differently to other browsers and needs to be treated differently. Therefore we need to detect presence of IE. We're not deciding whether to use a feature based on the browser, but how to implement part of it.

          If at some point, IE fix this stupid brokenness, we can change the test to

          if (Y.UA.ie > 0 && Y.UA.ie < 10) {
          } else {
          }
          

          AFAIK, YUI doesn't abstract this kind of change away for us in any form of useful package - it would be quite an edge case to be fair.

          The worst case scenario with this change is that the background scrolling isn't disabled when opening the chooser.

          Show
          Andrew Nicols added a comment - According to the docs ( http://yuilibrary.com/yui/docs/yui/yui-ua.html ) it's not intended for feature detection, but is suitable for browser.detection. IE behaves differently to other browsers and needs to be treated differently. Therefore we need to detect presence of IE. We're not deciding whether to use a feature based on the browser, but how to implement part of it. If at some point, IE fix this stupid brokenness, we can change the test to if (Y.UA.ie > 0 && Y.UA.ie < 10) { } else { } AFAIK, YUI doesn't abstract this kind of change away for us in any form of useful package - it would be quite an edge case to be fair. The worst case scenario with this change is that the background scrolling isn't disabled when opening the chooser.
          Hide
          Aparup Banerjee added a comment -

          thanks, looks great, integrated into master now.

          Show
          Aparup Banerjee added a comment - thanks, looks great, integrated into master now.
          Hide
          Frédéric Massart added a comment -

          Works on FF, Chrome, Opera 12, IE9, but not IE8.

          While discovering that IE8 was still blocked after closing the chooser, I also noticed that Chrome would be blocked if I resized the window after closing the chooser. I believe that adding some content to the bottom of the page (through Ajax or so) would create the same issue: no scrolling, not accessible.

          Show
          Frédéric Massart added a comment - Works on FF, Chrome, Opera 12, IE9, but not IE8. While discovering that IE8 was still blocked after closing the chooser, I also noticed that Chrome would be blocked if I resized the window after closing the chooser. I believe that adding some content to the bottom of the page (through Ajax or so) would create the same issue: no scrolling, not accessible.
          Hide
          Andrew Nicols added a comment -

          Added linked issue for MDL-33891 which fixes this issue.
          The issue is not with the prevention, but that the on resize handler isn't cancelled correctly when closing the dialogue.
          In IE8, when you close the chooser the browser also triggers a window resize event which causes this to be exhibited in that browser.

          Show
          Andrew Nicols added a comment - Added linked issue for MDL-33891 which fixes this issue. The issue is not with the prevention, but that the on resize handler isn't cancelled correctly when closing the dialogue. In IE8, when you close the chooser the browser also triggers a window resize event which causes this to be exhibited in that browser.
          Hide
          Frédéric Massart added a comment -

          All good, passing!

          Show
          Frédéric Massart added a comment - All good, passing!
          Hide
          Eloy Lafuente (stronk7) added a comment -

          And this has been incorporated to all the weekly builds and also, to Moodle 2.3 Release Candidate 1, yay!

          Many, many thanks for your hard work!

          Ciao

          Show
          Eloy Lafuente (stronk7) added a comment - And this has been incorporated to all the weekly builds and also, to Moodle 2.3 Release Candidate 1, yay! Many, many thanks for your hard work! Ciao
          Hide
          miki Alliel added a comment -

          Hello all,
          I was wondering why would you like to prevent scrollbar when opening the activity chooser?
          I hope I understand it correctly, but when the activity chooser is open and there is a long list of activities to choose from, there is no way to understand (no indication) that the list s long and you can scroll down to see more.
          I think teachers ( some of them) won't figure it out right away. so a scrollbar or link like "see more" is important.
          Thanks

          Show
          miki Alliel added a comment - Hello all, I was wondering why would you like to prevent scrollbar when opening the activity chooser? I hope I understand it correctly, but when the activity chooser is open and there is a long list of activities to choose from, there is no way to understand (no indication) that the list s long and you can scroll down to see more. I think teachers ( some of them) won't figure it out right away. so a scrollbar or link like "see more" is important. Thanks
          Hide
          Andrew Nicols added a comment -

          Hi Miki,

          This issue actually refers to the scrollbar on the main page in the background and, in my experience, significantly enhances usability. Any scrollbars in the chooser itself remain and are unaffected.

          By removing the scrollbar, when a user uses the mouse wheel to scroll down the list of activities, or the description of an activity, the page in the background is not forcibly scrolled too, but kept still which produces a less distracting view for the end user.

          You can try this out on http://qa.moodle.net with the teacher:test username and password.

          Hope that this clarifies things,

          Andrew

          Show
          Andrew Nicols added a comment - Hi Miki, This issue actually refers to the scrollbar on the main page in the background and, in my experience, significantly enhances usability. Any scrollbars in the chooser itself remain and are unaffected. By removing the scrollbar, when a user uses the mouse wheel to scroll down the list of activities, or the description of an activity, the page in the background is not forcibly scrolled too, but kept still which produces a less distracting view for the end user. You can try this out on http://qa.moodle.net with the teacher:test username and password. Hope that this clarifies things, Andrew

            People

            • Votes:
              0 Vote for this issue
              Watchers:
              1 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved: