Web application with adaptive user interface
Methods and systems are disclosed for dynamically and automatically modifying a user interface (UI) of an application based on the UI capabilities of a computer device running the application, in particular whether the computer device is touch-enabled or not.
1. A computer-implemented method to modify an application user interface (UI), the computer-implemented method comprising:
determining whether the application UI on a user computer device is touch-enabled or not touch-enabled;
determining whether a container on a screen of the application UI comprises an HTML scroll bar and is configured for adaptive scroll bar functionality;
removing, in response to determining the application UI on the computer device is touch-enabled, built-in HTML scroll bars and replacing them with touch-enabled scroll bars, wherein the touch-enabled scroll bars become visible when a user attempts to do a drag action; and
modifying, in response to determining the application UI on the computer device is not touch enabled, the application UI by rendering the touch-enabled scroll bars invisible or hidden and restoring default HTML scroll bars instead.
2. The computer-implemented method of claim 1 , further comprising:
adjusting a size of the container based on whether the user computer device is touch-enabled or not touch-enabled.
3. The computer-implemented method of claim 1 , further comprising:
determining, for each container of a plurality of containers on the screen of the application UI, whether the container comprises an HTML scroll bar and is configured for adaptive scroll bar functionality; and
removing, for each container of the plurality of containers on the screen of the application UI, built-in HTML scroll bars and replacing them with touch-screen enabled scroll bars.
4. The computer-implemented method of claim 1 , further comprising:
performing size detection for target elements and showing only vertical scrollbars and/or horizontal scrollbars.
5. The computer-implemented method of claim 1 , further comprising:
determining if the container is scrollable by inspecting existence and value of scrollable and scrollable scroller properties of the container.
6. The computer-implemented method of claim 5 , further comprising:
disabling a scrolling feature by setting a disabled property to true for a container's scroller object in response to determining when a container is scrollable or able to be made scrollable.
7. The computer-implemented method of claim 6 , further comprising:
locating in a document object model (DOM) of the container any sub-panel containers the container has.
8. The computer-implemented method of claim 7 , further comprising:
issuing an event to allow the container to further optimize their appearance and behavior by enabling the sub-panel containers of the container to individually determine whether to display scroll bars.
9. The computer-implemented method of claim 1 , further comprising:
allowing the container to display scrollbars for some children and/or disable scrollbars for other children.
10. The computer-implemented method of claim 1 , wherein a size of visual panels are adjusted based on whether the application UI is running on a desktop browser or a mobile device.
11. A system comprising:
at least one processor;
a display; and
memory associated with the at least one processor, wherein the memory stores instructions that when executed by the at least one processor cause the at least one processor to perform operations including:
determining whether an application user interface (UI) on a user computer device is touch-enabled or not touch-enabled;
determining whether a container on a screen of the application UI comprises an HTML scroll bar and is configured for adaptive scroll bar functionality;
removing, in response to determining the application UI on the computer device is touch-enabled, built-in HTML scroll bars and replacing them with touch-enabled scroll bars, wherein the touch-enabled scroll bars become visible when a user attempts to do a drag action; and
modifying, in response to determining the application UI on the computer device is not touch enabled, the application UI by rendering the touch-enabled scroll bars invisible or hidden and restoring default HTML scroll bars instead.
12. The system of claim 11 , wherein the operations further include:
adjusting a size of the container based on whether the user computer device is touch-enabled or not touch-enabled.
13. The system of claim 11 , wherein the operations further include:
determining, for each container of a plurality of containers on the screen of the application UI, whether the container comprises an HTML scroll bar and is configured for adaptive scroll bar functionality; and
removing, for each container of the plurality of containers on the screen of the application UI, built-in HTML scroll bars and replacing them with touch-screen enabled scroll bars.
14. The system of claim 11 , wherein the operations further include:
performing size detection for target elements and showing only vertical scrollbars and/or horizontal scrollbars.
15. The system of claim 11 , wherein the operations further include:
determining if the container is scrollable by inspecting existence and value of scrollable and scrollable scroller properties of the container.
16. The system of claim 11 , wherein the operations further include:
allowing the container to display scrollbars for some children and/or disable scrollbars for other children.
17. The system of claim 11 , wherein a size of visual panels are adjusted based on whether the application UI is running on a desktop browser or a mobile device.