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

      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).

        Gliffy Diagrams

          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: