Methods and systems for applying responsive design to subframes on a web page

• US 10,120,848 B2
• Filed: 12/09/2014
• Issued: 11/06/2018
• Est. Priority Date: 12/09/2014
• Status: Active Grant

• Current Assignee: Salesforce.com, Inc.
• Original Assignee: Salesforce.com, Inc.
• Inventors: Wang, Michael, Huang, Enzhen, Ly-Gagnon, David, Snyder, Benjamin, Vasudev, Gautam
• Primary Examiner(s): Nguyen, Maikhanh
• Application Number:
  US14/564,719
• Publication Number:
  US 20160162448A1
• Time in Patent Office: 1,428 Days
• CPC Class Codes: G06F 40/106 Display of layout of documents; Previewing
• CPC Class Codes: G06F 40/154 Tree transformation for tree-structured or markup documents, e.g. XSLT, XSL-FO or stylesheets

Abstract

Methods and systems are provided for rearranging the content within a sub-region of a web page in response to resizing the sub-region, the content including a plurality of columns each having a respective width parameter, the system including a processor configured to implement the steps of: detecting a resizing event associated with the sub-region; determining a span value associated with the resized sub-region; determining a subset of the plurality of columns that fit within the span value based on the width parameters; and displaying the subset of columns within the resized sub-region.

Claims

1. A method of rearranging content within an existing displayed sub-region of a web page in response to resizing the sub-region, the content including a plurality of columns each having a respective width parameter, the method comprising:

detecting resizing of the existing displayed sub-region within the webpage, wherein the sub-region comprises a slidable border, and resizing of the sub-region comprises manual or automatic dragging of the slidable border;

determining a span value associated with the resized sub-region;

defining a minimum width beyond which the resized sub-region cannot be reduced;

determining a subset of the plurality of columns that fit within the span value based on the respective width parameters, wherein each respective width parameter comprises one of a fixed parameter and a dynamic parameter;

displaying the subset of columns within the resized existing displayed sub-region; and

simultaneously rearranging the contents of a second existing displayed sub-region in response to the resizing of the first existing displayed sub-region.

2. The method of claim 1, wherein the dynamic parameter comprises a predetermined percentage of the span value.

3. The method of claim 1, further comprising the step of assigning a respective priority parameter to each column.

4. The method of claim 3, wherein the priority parameter comprises one of an absolute and relative value.

5. The method of claim 1, further comprising the step of configuring a set of rules for determining the subset of columns.

6. The method of claim 5, wherein the set of rules is implemented in a cascading style sheet (CSS).

7. The method of claim 1, further comprising hiding a second subset of columns.

8. The method of claim 7, further comprising revealing the second subset of columns in response to a user request.

9. The method of claim 8, wherein the user request comprises hovering a cursor over a virtual button indicative of the hidden columns.

10. Computer code stored in a non-transient medium for rearranging content within an existing displayed sub-region of a web page in response to resizing the existing displayed sub-region, the content including a plurality of columns each having a respective width parameter, the computer code configured to implement the steps of:

detecting resizing of the existing displayed sub-region within the webpage, wherein the sub-region comprises a slidable border, and resizing of the sub-region comprises movement of the slidable border through one of manual or automatic dragging;

determining a span value associated with the resized existing displayed sub-region;

defining a minimum width beyond which the resized sub-region cannot be reduced;

determining a subset of the plurality of columns that fit within the span value based on the respective width parameters, wherein each respective width parameter comprises one of a fixed parameter and a dynamic parameter;

displaying the subset of columns within the resized existing displayed sub-region; and

simultaneously rearranging the contents of a second existing displayed sub-region in response to the resizing of the first existing displayed sub-region.

11. The computer code of claim 10, further configured to implement the step of assigning a respective priority parameter to each column, wherein the priority parameter comprises one of an absolute and relative value.

12. The computer code of claim 10, further configured to implement the step of configuring a set of rules for determining the subset of columns, wherein the set of rules is implemented in a cascading style sheet (CSS).

13. A computer system for rearranging the content within an existing displayed sub-region of a web page in response to resizing the existing displayed sub-region, the content including a plurality of columns each having a respective width parameter, the system including a processor configured to implement the steps of:

detecting resizing of the existing displayed sub-region within the webpage, wherein the sub-region comprises a slidable border, and resizing of the sub-region comprises movement of the slidable border through one of manual or automatic dragging;

determining a span value associated with the resized existing displayed sub-region;

defining a minimum width beyond which the resized sub-region cannot be reduced;

determining a subset of the plurality of columns that fit within the span value based on the respective width parameters, wherein each respective width parameter comprises one of a fixed parameter and a dynamic parameter;

displaying the subset of columns within the resized existing displayed sub-region; and

simultaneously rearranging the contents of a second existing displayed sub-region in response to the resizing of the first existing displayed sub-region.