Abstract:
Systems and methods for positioning display elements are disclosed. One aspect of the disclosed embodiments is a method of positioning a set of display elements on a display. The method includes obtaining a hierarchy of nested wrapper elements, each display element in the set of display elements located within one of the nested wrapper elements, identifying visible and hidden subsets of display elements, and positioning the visible subset of display elements adjacent to each other by translating the wrapper elements of display elements in at least one of the hidden subset of display elements or the visible subset of display elements by a pre-determined distance so that each display element in the hidden subset of display elements becomes positioned at least one of behind one or more display elements in the visible subset of display elements or outside of a visible area of the display.

Description:
TECHNICAL FIELD 
     The present invention relates in general to a graphical user interface and in particular to positioning of display elements. 
     BACKGROUND 
     The Internet is a global system of interconnected computer networks. The Internet carries various information resources and services, including the World Wide Web (WWW). The WWW is a client-server model that includes web servers that provide access to documents via Hypertext Transfer Protocol (HTTP). Documents on the web servers are identified using Uniform Resource Locations (URLs). The documents and other content provided by web servers can be accessed by clients by way of a web browser application. 
     The documents and other content can include web pages or web applications created using Hyper Text Markup Language (HTML) or other markup languages. Some web browsers are capable of rendering web pages or web applications in a certain way using one or more Cascading Style Sheets (CSS) referenced by the web pages or web applications. 
     SUMMARY 
     Disclosed herein are embodiments of methods and systems for positioning of display elements. 
     One aspect of the disclosed embodiments is a method of positioning a visible subset of display elements selected from a set of display elements on a display. The method includes obtaining a hierarchy of nested wrapper elements, each display element in the set of display elements located within one of the nested wrapper elements, and at least some of the wrapper elements having a parent wrapper element. The method further includes identifying a visible subset of display elements selected from the set of display elements and a hidden subset of display elements selected from the set of display elements and positioning the visible subset of display elements adjacent to each other using a processor by translating the wrapper elements of display elements in at least one of the hidden subset of display elements or the visible subset of display elements by a pre-determined distance so that each translated display element in the hidden subset of display elements becomes positioned at least one of behind one or more display elements in the visible subset of display elements or outside of a visible area of the display. 
     Another aspect of the disclosed embodiments is a method of generating a web document enabling a client to position a visible set of display elements selected from a total set of display elements on a display. The method includes creating a hierarchy of nested wrapper elements using a processor, at least some of the wrapper elements having a parent wrapper element, locating each display element in the total set of display elements within one of the nested wrapper elements, and configuring each wrapper element having a parent wrapper element so that the wrapper element&#39;s display element will be hidden behind its parent wrapper&#39;s display element if both display elements occupy a same position. 
     Another aspect of the disclosed embodiments is a computing system for positioning a visible subset of display elements selected from a set of display elements on a display. The computing system includes at least one memory and at least one processor configured to execute instructions stored in the at least one memory to obtain a hierarchy of nested wrapper elements, each display element in the set of display elements located within one of the nested wrapper elements, and at least some of the wrapper elements having a parent wrapper element. The at least one processor is further configured to identify a visible subset of display elements selected from the set of display elements and a hidden subset of display elements selected from the set of display elements and position the visible subset of display elements adjacent to each other by translating the wrapper element of display elements in at least one of the hidden subset of display elements or the visible subset of display elements by a pre-determined distance so that each display element in the hidden subset of display elements becomes positioned at least one of behind one or more display elements in the visible subset of display elements or outside of a visible area of the display. 
     These and other embodiments will be described in additional detail hereafter. 
    
    
     
       BRIEF DESCRIPTION OF THE DRAWINGS 
       The description herein makes reference to the accompanying drawings wherein like reference numerals refer to like parts throughout the several views, and wherein: 
         FIG. 1  is a diagram of a client-server computing scheme according to embodiments of the disclosed subject matter; 
         FIG. 2  is a block diagram of a web-based system implemented within the client-server computing scheme of  FIG. 1  according to embodiments of the disclosed subject matter; 
         FIG. 3  is a block diagram of a container having nested wrapper elements and display elements within the web-based system of  FIG. 2  according to embodiments of the disclosed subject matter; 
         FIG. 4A  is a z-index schematic of the container of  FIG. 3  with all display elements visible according to embodiments of the disclosed subject matter; 
         FIG. 4B  is a diagram of an application window portion of a web browser application window showing the display elements as configured in  FIG. 4A  according to embodiments of the disclosed subject matter; 
         FIG. 5A  is a z-index schematic of the container of  FIG. 3  with some display elements visible and other display elements hidden according to embodiments of the disclosed subject matter; 
         FIG. 5B  is a diagram of an application window portion of a web browser application window showing the display elements as configured in  FIG. 5A  according to embodiments of the disclosed subject matter; 
         FIG. 6A  is a z-index schematic of the container of  FIG. 3  with some display elements visible and other display elements hidden according to embodiments of the disclosed subject matter; 
         FIG. 6B  is a diagram of an application window portion of a web browser application window showing the display elements as configured in  FIG. 6A  according to embodiments of the disclosed subject matter; 
         FIG. 7A  is a z-index schematic of the container of  FIG. 3  with all display elements hidden according to embodiments of the disclosed subject matter; 
         FIG. 7B  is a diagram of an application window portion of a web browser application window with all display elements not visible as configured in  FIG. 7A  according to embodiments of the disclosed subject matter; and 
         FIG. 8  includes exemplary Hyper Text Markup Language and Cascading Style Sheets illustrative of one implementation of the container of  FIG. 3  according to embodiments of the disclosed subject matter. 
     
    
    
     DETAILED DESCRIPTION 
       FIG. 1  is a diagram of a client-server system  10 . Server  12  can be, for example, a computer having an internal configuration of hardware including a processor such as a central processing unit (CPU)  14  and a memory  16 . CPU  14  can be a controller for controlling the operations of server  12 . The CPU  14  is connected to memory  16  by, for example, a memory bus. Memory  16  can include random access memory (RAM) or any other suitable memory device. Memory  16  can store data and program instructions which are used by the CPU  14 . Other suitable implementations of server  12  are possible. 
     The server  12  can be the only server or can be one of a group of servers  17  that includes additional servers  18 . The group of servers  17  can be implemented as a computing cluster wherein the server  12  and additional servers  18  share resources, such as storage memory, and load-balance the processing of requests to the group of servers  17 . The group of servers  17  can alternatively be a cloud computing service. For example, a cloud computing service can include hundreds or thousands of servers configured to provide scalable computing resources. In a cloud computing service, computing tasks can be performed on one or more servers or other computing devices included within the cloud computing service. 
     The above are only exemplary implementations of the group of servers  17 , and any distributed computing system can be used in their place. As used herein and in the claims, the term “server” is understood to include any combination or implementation of servers, server groups, or any other configuration of computing devices or systems of any kind. 
     A network  28  connects the group of servers  17  to a client  30  and any additional clients  40  in a group of clients  39 . Network  28  is, for example, the Internet. Network  28  can also be a local area network (LAN), wide area network (WAN), virtual private network (VPN), or any other means of transferring data between the group of servers  17  and group of clients  39 . 
     The client  30 , in one example, can be a desktop computer having an internal configuration of hardware including a processor such as a central processing unit (CPU)  32  and a memory  34 . CPU  32  is a controller for controlling the operations of client  30 . CPU  32  can be connected to memory  34  by, for example, a memory bus. Memory  34  may be RAM or any other suitable memory device. Memory  34  stores data and program instructions which are used by CPU  32 . Other suitable implementations of client  30  are possible, including handheld computing devices, laptops, or mobile telephones. 
     A display  36  configured to display a graphical user interface can be connected to client  30 . Display  36  may be implemented in various ways, including by a liquid crystal display (LCD) or a cathode-ray tube (CRT). Alternatively, the display can be virtual, for example, as implemented in a remote desktop application system. The display  36  can be configured to display application windows including a web browser application window  38  on client  30 . 
     Other implementations of the client-server system  10  are possible. For example, one implementation can omit the group of servers  17  and additional servers  18  and include only a single server  12 . In another implementation, there may only be one client  30  instead of the group of clients  39  and additional clients  40 . In another implementation, additional components may be added to the client-server system  10 . 
       FIG. 2  is a block diagram of a web-based system implemented within the client-server computing scheme of  FIG. 1 . The web-based system includes a web server  50  implemented on server  12 . Web server  50  includes a web page generator  52  and a web service  54 . The web-based system also includes a web browser  60  implemented on client  30 . Web browser  60  includes a web page requestor  62  and a web page renderer  64 . The web page renderer  64  includes a hypertext processor  66  and a script engine  68 . 
     Web page requester  62  is configured to make a page request  70  to web page generator  52  for a web application. The web page generator  52  generates the web application and returns it to web page requester  62  via a response  72 . Web page generator  52  can access the web application from a disk on server  12 . Alternatively, web page generator  52  can generate some or all of the web application based on page request  70  and/or a database or other data source in server  12  or group of servers  17 . In one example, the web application can be a mobile webmail application for providing access to e-mail on a client that is a mobile device. 
     Once the web application is received by web page requester  62  it is passed to a web page renderer  64 . Hypertext processor  66  is used to process hypertext included in the web application so that it can be rendered to display  36  via web browser application window  38 . Script engine  68  is used by web page renderer  64  to process instructions included in the web application, such as JavaScript code or CSS. 
     In one example, the instructions in the web application can include making a background request  74  to web service  54  on web server  50 . Web service  54  can process the background request  74  to generate a background response  76 . The background response  76  can be utilized by the web application to alter what is displayed on web browser application window  38 . Alternatively, the background response  76  can alter the operation of the web application. 
     In one implementation, the web application can include a hierarchy of nested wrapper elements and display elements. The display elements can include, for example, a network status display element, selection status display element, and a menu display element. Depending on the state of the web application, some, none, or all of these display elements can be visible at any given time in the web browser application window  38  and some, none, or all of display elements can be hidden. Depending on the implementation, any number of display elements may be utilized. 
     For example, as used in a mobile webmail application, the display elements can be used to display status information to a user. In such an implementation, the network status display element can display whether the mobile webmail application is in an offline status or an online status. The selection status display element can display, for example, a number of e-mail messages that are selected. The menu display element can include buttons for performing actions on the e-mail messages that are selected. The mobile webmail application can be configured to display only active status information. For example, if the mobile webmail application is in the online state, the network status display element can be hidden. In another example, if no e-mail messages are selected, the selection status display element can be hidden. In some circumstances, there may be a delay incorporated before a display element is hidden. 
       FIG. 3  is a block diagram of a container  90  having nested wrapper elements  92   a - c  and display elements  94   a - c  within the web-based system of  FIG. 2 . Container  90  includes three display elements  94   a - c  and three associated nested wrapper elements  92   a - c . Wrapper element  2   92   c  is located at the highest level of the nesting hierarchy. Wrapper element  2   92   c  includes display element  2   94   c . Wrapper element  1   92   b  is nested within wrapper element  2   92   c , and includes display element  1   94   b . Wrapper element  0   92   a  is nested within wrapper element  1   92   b , and includes display element  0   94   a.    
     Within the above nesting structure, the z-index of the display elements is decreased for each level of the nesting hierarchy. The z-index refers to the stack order of the various display elements. The z-index of the wrapper elements controls what display element will be visible if multiple display elements occupy the same space in web browser application window  38  (i.e. when display elements overlap). In this example, a display element having a lower z-index will be hidden behind another display element having a higher z-index. 
     This nesting structure can be utilized to hide any display element simply by translating its associated wrapper element by the height of that display element. In this example, the heights of all display elements are the same. When a wrapper element is translated, the display element included within that wrapper element and all display elements included in wrapper elements nested within that wrapper element are translated by the height of the display element. Because the z-index of the translated display element is less than the z-indices of the display elements outside of the translated wrapper element, the display element in the translated wrapper element will be hidden behind any display elements outside of the translated wrapper element that the display element in the translated wrapper element overlaps with. Because a translation is used to hide the display element, if there is a group of visible display elements, hiding one of them results in the remaining visible display elements being visibly adjacent to each other without an additional gap left by the hidden display element. 
     In an alternative example, the heights of the display elements can be different. In the case of a display element that is smaller than a visible display element below it, the smaller display element is hidden completely behind the visible display element. In the case of a display element that is larger than a visible display element below it, a portion of the larger display element is hidden behind the smaller visible display element. The remainder of the larger display element is hidden behind one or more additional visible display elements below the smaller visible display element or is hidden by being outside of the visible area of the application window. 
     The translation can be done by way of a CSS transform. On some client devices, a CSS transform can be performed more quickly than other methods of CSS positioning by using hardware acceleration functionality. For example, absolute positioning of HTML elements may be less efficient than a CSS transform if the absolute positioning is not hardware accelerated. Alternatively, the translation can be done using JavaScript code—however, such an implementation could be more complex and could require additional maintenance as compared to the CSS transform. 
     The positioning and hiding of display elements within the above nesting structure is described further in the examples shown in  FIGS. 4-7 .  FIG. 4A  is a z-index schematic  100   a  of the container  90  of  FIG. 3  with all display elements  94   a - c  visible. The display elements  94   a - c  and wrapper elements  92   a - c  are shown with respect to a z-axis  104  (representing relative z-index values of the display elements) and an application window portion  106  of web browser application window  38 . In this example, all of the display elements  94   a - c  are visible because none of the display elements  94   a - c  overlap from the vantage point of application window portion  106 . 
     The display elements  94   a - c  and wrapper elements  92   a - c  are not drawn to scale and are intended to convey the relationships between the elements. For example, in some implementations, the wrapper elements  92   a - c  may not extend beyond their contents (i.e. display elements  94   a - c ). 
       FIG. 4B  is a diagram  102   a  of an application window portion  106  of web browser application window  38  showing the display elements  94   a - c  as configured in  FIG. 4A . In this example, each of the display elements  94   a - c  are visible because there is no overlap of display elements  94   a - c  with respect to application window portion  106 . In other words, none of the wrapper elements  92   a - c  have been translated to hide any of the display elements  94   a - c.    
       FIG. 5A  is a z-index schematic  100   b  of the container  90  of  FIG. 3  with some display elements  94   b - c  visible and other display elements  94   a  hidden. In this example, wrapper element  92   a  has been translated down by the height of display element  94   a . The translation has moved the display element  94   a  behind display element  94   b  with respect to z-axis  104 . Thus, display element  94   a  becomes hidden with respect to application window portion  106 . 
       FIG. 5B  is a diagram  102   b  of an application window portion  106  of web browser application window  38  showing the display elements  94   a - c  as configured in  FIG. 5A . In this example, display elements  94   b - c  are visible and display element  94   a  is hidden. As shown in z-index schematic  100   b , display element  94   a  is positioned behind display element  94   b , hiding it with respect to application window portion  106 . 
       FIG. 6A  is a z-index schematic  100   c  of the container  90  of  FIG. 3  with some display elements  94   b  visible and other display elements  94   a,c  hidden. As compared to z-index schematic  100   b , wrapper element  92   c  has been translated down by the height of display element  94   c . The translation of wrapper element  92   c  moves all elements included within wrapper element  92   c  because of the nested relationship. Therefore, wrapper elements  92   a - c  and display elements  94   a - c  are moved. In this case, display element  94   c  is moved outside of the viewing area of application window portion  106 , hiding it with respect to display  36 . 
     The concurrent movement of the other display elements  94   a - b  and wrapper elements  92   a - b  prevent gaps from forming between the remaining visible display element  94   b  and the bottom of application window portion  106 . This example illustrates that in addition to hiding a display element by translation, the nested structure of container  90  also prevents any gaps between display elements when one display element is hidden by translation. 
       FIG. 6B  is a diagram  102   c  of an application window portion  106  of web browser application window  38  showing the display element  94   a - c  as configured in  FIG. 6A . In this example, display element  94   b  is visible and display elements  94   a,c  are hidden. As shown in z-index schematic  100   c , display element  94   a  is positioned behind display element  94   b  and display element  94   c  is positioned outside of the viewable area of application window portion  106 , hiding these display elements with respect to application window portion  106 . 
       FIG. 7A  is a z-index schematic  100   d  of the container  90  of  FIG. 3  with all display elements  94   a - c  hidden. As compared to z-index schematic  100   c , wrapper element  92   b  has been translated down by the height of display element  94   b . The translation of wrapper element  92   b  moves all elements included within wrapper element  92   b . Therefore, wrapper elements  92   a - b  and display elements  94   a - c  are moved. In this case, display elements  94   a - b  are moved outside of the viewing area of application window portion  106 , hiding them with respect to display  36 . 
       FIG. 7B  is a diagram  102   d  of an application window portion  106  of web browser application window  38  with all display elements  94   a - c  hidden as configured in  FIG. 7A . In this example, display elements  94   a - c  are hidden. As shown in z-index schematic  100   d , display elements  94   a - c  are positioned outside of the viewable area of application window portion  106 , hiding these display elements with respect to application window portion  106 . 
     Alternative implementations, including variations of the above described nested wrapper element structure, are contemplated. In one alternative implementation, the wrapper elements and display elements can be restructured such that the display elements corresponding with the visible subset of display elements are moved in front of the display elements corresponding to the hidden subset of display elements to hide the display elements in the hidden subset of display elements. 
       FIG. 8  includes exemplary Hyper Text Markup Language (HTML) and Cascading Style Sheets (CSS) illustrative of one implementation of the container of  FIG. 3 . HTML listing  120  includes portions of HTML code implementing a nested layout of wrapper elements. The nested layout is contained within a container HTML element  122 . Container HTML element  122  includes a CSS class of “MENU.” This class can be used to apply CSS styles to the container HTML element. 
     Container HTML element  122  includes nested layers of wrapper HTML elements  124   a - c . Also included within each wrapper HTML element  124   a - c  is a display HTML element  126   a - c . In this implementation, the display HTML elements  126   a - c  are located after any nested wrapper HTML elements within wrapper HTML elements. For example, display HTML element  126   a  is located after wrapper HTML element  124   b  within wrapper HTML element  124   a . In this implementation, each of the wrapper HTML elements  124   a - c  and display HTML elements  126   a - c  include an individualized CSS class name for each element. However, in an alternative implementation, the wrapper elements or the display elements may share a common CSS class name. For example, the wrapper elements can be controlled by CSS using a unique element identifier instead of a unique CSS class name. 
     The HTML tags used for container HTML element  122  and wrapper HTML elements  124   a - c  are “DIV” tags. “DIV” tags are constructed using an opening tag (i.e. &lt;DIV&gt;) and a closing tag (i.e. “&lt;/DIV&gt;”). Content and HTML tags between the opening tag and closing tag of an HTML element are included within the HTML element. This structure allows for the nested layers of HTML elements to be constructed. The display HTML elements  126   a - c  can include content such as text, buttons, images, or other types of content within their opening and closing tags. While “DIV” tags are used in this example, other HTML tags can be alternatively used. Also, other markup languages can also be used, such as eXtensible Markup Language (XML). 
     CSS listing  130  includes portions of CSS code implementing aspects of the implementation of the wrapper elements and display elements. Controlling a user&#39;s ability to click on the container, wrapper elements, and display elements can be necessary, since a CSS transform operation can allow for a portion of some or all of the wrapper elements or display elements to be clickable within the web application window  38  even if the included display elements are not visible. As such, menu style  132  is used to disable the user&#39;s ability to generate a click event on anything within container HTML element  122  via the “MENU” class. A user&#39;s ability to click on visible display HTML elements  126   a - c  is restored using display style  134 . Display HTML elements that are hidden can be removed from the CSS code included in display style  134  to disable a user&#39;s ability to click on the hidden HTML elements. 
     HTML listing  120  and CSS listing  130  include provisions for three wrapper elements and three display elements. However, any number of wrapper elements and display elements can be utilized. For example, additional wrapper elements and display elements can be inserted at the points indicated by the ellipses included in HTML listing  120  and CSS listing  130 . Additionally, some of the wrapper elements and display elements shown may also be omitted. 
     The embodiments of server  12  and/or client  30  (and the algorithms, methods, instructions etc. stored thereon and/or executed thereby) can be realized in hardware including, for example, intellectual property (IP) cores, application-specific integrated circuits (ASICs), programmable logic arrays, optical processors, programmable logic controllers, microcode, firmware, microcontrollers, servers, microprocessors, digital signal processors or any other suitable circuit. In the claims, the term “processor” should be understood as encompassing any the foregoing, either singly or in combination. The terms “signal” and “data” are used interchangeably. Further, portions of server  12  and client  30  do not necessarily have to be implemented in the same manner. 
     Further, in one example, server  12  or client  30  can be implemented using a general purpose computer/processor with a computer program that, when executed, carries out any of the respective methods, algorithms and/or instructions described herein. In addition or alternatively, for example, a special purpose computer/processor can be utilized which can contain specialized hardware for carrying out any of the methods, algorithms, or instructions described herein. 
     Server  12  and client  30  can, for example, be implemented on computers in a webmail system. Client  30  can be implemented on a device such as a mobile device (i.e. a cell phone). In this instance, server  12  can exchange HTTP communications with the communications device. Other suitable server  12  and client  30  implementation schemes are available. For example, client  30  can be a personal computer rather than a portable communications device. 
     Implementations or portions of implementations of the above disclosures can take the form of a computer program product accessible from, for example, a computer-usable or computer-readable medium. A computer-usable or computer-readable medium can be any tangible device that can, for example, contain, store, communicate, or transport the program for use by or in connection with any processor. The medium can be, for example, an electronic, magnetic, optical, electromagnetic, or a semiconductor device. Other suitable mediums are also available. Such computer-usable or computer-readable media can be referred to as non-transitory media, and may include RAM or other volatile memory or storage devices that may change over time. 
     The exemplary approaches herein have been described in order to allow easy understanding of the present invention and do not limit the present invention. On the contrary, the invention is intended to cover various modifications and equivalent arrangements included within the scope of the appended claims, which scope is to be accorded the broadest interpretation so as to encompass all such modifications and equivalent structure as is permitted under the law.