Resizing an editable area in a web page

• US 8,171,401 B2
• Filed: 06/19/2009
• Issued: 05/01/2012
• Est. Priority Date: 06/19/2009
• Status: Active Grant

• Current Assignee: Microsoft Technology Licensing LLC (Microsoft Corporation)
• Original Assignee: Microsoft Corporation
• Inventors: Sun, Jimmy Y.
• Primary Examiner(s): HUYNH, CONG LAC T
• Application Number:
  US12/487,859
• Publication Number:
  US 20100325529A1
• Time in Patent Office: 1,047 Days
• Field of Search: 715/205, 715/251, 715/252, 715/200
• US Class Current: 715/252
• CPC Class Codes: G06F 16/9577 Optimising the visualization of content, e.g. distillation of HTML documents
• CPC Class Codes: G06F 3/04845 for image manipulation, e.g. dragging, rotation, expansion or change of colour

Abstract

Embodiments of the present invention provide for vertically and/or horizontally resizing a zone or DIV element of a Web page via a browser-based Web authoring tool, while preserving a DIV element'"'"'s ability to dynamically size to its Web content. Drag and drop vertical resizing of a DIV element is accomplished by creating two hidden DIV elements that are set to the specific left/top anchor, width, and altered HTML content of the DIV element to be resized. The two hidden DIV elements provide specific top and bottom pixel height limits to determine when a line break should be appended or decremented to the original DIV element'"'"'s HTML content. By utilizing line breaks to vertically resize, a DIV element maintains its capability of sizing to dynamic Web content.

Claims

1. A method for resizing an editable Web page zone of a Web page, the method comprising:

receiving an editable Web page zone of a Web page, the editable Web page zone comprising a first HTML DIV element;

providing along a lower border of the editable Web page zone a lower resize marker for vertically resizing the editable Web page zone;

receiving an indication of a selection of the lower resize marker for vertically resizing the editable Web page zone;

in response to receiving an indication of a selection of the lower resize marker for vertically resizing the editable Web page zone disposing a top hidden DIV element and a bottom hidden DIV element onto the Web page zone;

replicating an HTML content contained in the first HTML DIV element into the top hidden DIV element;

if an HTML line break tag is at the end of the HTML content replicated to the top hidden DIV element, removing a line break tag from the end of the replicated HTML content in the top hidden DIV element;

if an HTML line break tag is not at the end of the HTML content replicated to the top hidden DIV element, removing all HTML content from the top hidden DIV element;

replicating the HTML content contained in the first HTML DIV element into the bottom hidden DIV element, and adding an HTML line break tag to the end of the HTML content replicated into the bottom hidden DIV element;

continually monitoring a vertical position of the lower resize marker; and

,

if the vertical position of the lower resize marker crosses a lower boundary of the top hidden DIV element, removing one or more HTML line break tags from the end of the HTML content contained in the first HTML DIV element;

if the vertical position of the lower resize marker crosses a lower boundary of the bottom hidden DIV element, appending one or more HTML line break tags to the end of the HTML content contained in the first HTML DIV element.

2. The method of claim 1, wherein resizing an editable Web page zone of a Web page is executed within a Web browser application.

3. The method of claim 1, wherein a positioning of the lower resize marker is controlled via a mouse-activated drag and drop operation.

4. The method of claim 1, wherein a positioning of the lower resize marker is controlled via a keystroke operation.

5. The method of claim 1, further comprising resetting the hidden DIV elements upon a completion of a vertical resizing of the first HTML DIV element.

6. The method of claim 1, further comprising:

providing along an upper border of the editable Web page zone an upper resize marker for vertically resizing the editable Web page zone;

receiving an indication of a selection of the upper resize marker for vertically resizing the editable Web page zone;

in response to receiving an indication of a selection of the upper resize marker for vertically resizing the editable Web page zone, disposing a padded DIV element above the first HTML DIV element, and;

if a vertical position of the upper resize marker is moved downward a distance equivalent to a distance between the lower boundary of the top hidden DIV element and a lower boundary of the first HTML DIV element,

removing an HTML line break tag from the end of the HTML content contained in the first HTML DIV element; and

increasing a height of the padding DIV element by the distance equivalent to a distance between the lower boundary of the top hidden DIV element and a lower boundary of the first HTML DIV element; and

if a vertical position of the upper resize marker is moved upward a distance equivalent to the distance between the lower boundary of the bottom hidden DIV element and the first HTML DIV element;

appending an HTML line break tag to the end of the HTML content contained in the first HTML DIV element; and

decreasing a height of the padding DIV element by the distance equivalent to a distance between the lower boundary of the top hidden DIV element and a lower boundary of the first HTML DIV element.

7. The method of claim 1, further comprising:

disposing a horizontal resize marker along a right or left edge of the first HTML DIV element; and

wherein, in response to receiving a movement of the horizontal resize marker horizontally, expanding or decreasing a size of the first HTML DIV element horizontally in a direction of the movement of the horizontal resize marker.

8. The method of claim 1, further comprising:

disposing a corner resize marker along a corner of the first HTML DIV element; and

wherein, in response to receiving a movement of the corner resize marker diagonally, expanding or decreasing a size of the first HTML DIV element vertically and/or horizontally in a direction of the movement of the corner resize marker.

9. A computer readable medium containing computer executable instructions which when executed by a computer perform a method for resizing an editable Web page zone of a Web page, the method comprising:

receiving an editable Web page zone of a Web page, the editable Web page zone comprising a first HTML DIV element;

providing along a lower border of the editable Web page zone a lower resize marker for vertically resizing the editable Web page zone;

receiving an indication of a selection of the lower resize marker for vertically resizing the editable Web page zone;

in response to receiving an indication of a selection of the lower resize marker for vertically resizing the editable Web page zone disposing a top hidden DIV element and a bottom hidden DIV element onto the Web page zone;

replicating an HTML content contained in the first HTML DIV element into the top hidden DIV element;

if an HTML line break tag is at the end of the HTML content replicated to the top hidden DIV element, removing a line break tag from the end of the replicated HTML content in the top hidden DIV element;

if an HTML line break tag is not at the end of the HTML content replicated to the top hidden DIV element, removing all HTML content from the top hidden DIV element;

replicating the HTML content contained in the first HTML DIV element into the bottom hidden DIV element, and adding an HTML line break tag to the end of the HTML content replicated into the bottom hidden DIV element;

continually monitoring a vertical position of the lower resize marker; and

,

if the vertical position of the lower resize marker crosses a lower boundary of the top hidden DIV element, removing one or more HTML line break tags from the end of the HTML content contained in the first HTML DIV element;

if the vertical position of the lower resize marker crosses a lower boundary of the bottom hidden DIV element, appending one or more HTML line break tags to the end of the HTML content contained in the first HTML DIV element.

10. The computer readable medium of claim 9, wherein resizing an editable Web page zone of a Web page is executed within a Web browser application.

11. The computer readable medium of claim 9, wherein a positioning of the lower resize marker is controlled via a mouse-activated drag and drop operation.

12. The computer readable medium of claim 9, wherein a positioning of the lower resize marker is controlled via a keystroke operation.

13. The computer readable medium of claim 9, further comprising resetting the hidden DIV elements upon a completion of a vertical resizing of the first HTML DIV element.

14. The computer readable medium of claim 9, further comprising:

providing along an upper border of the editable Web page zone an upper resize marker for vertically resizing the editable Web page zone;

receiving an indication of a selection of the upper resize marker for vertically resizing the editable Web page zone;

in response to receiving an indication of a selection of the upper resize marker for vertically resizing the editable Web page zone, disposing a padded DIV element above the first HTML DIV element, and;

if a vertical position of the upper resize marker is moved downward a distance equivalent to a distance between the lower boundary of the top hidden DIV element and a lower boundary of the first HTML DIV element,

removing an HTML line break tag from the end of the HTML content contained in the first HTML DIV element; and

increasing a height of the padding DIV element by the distance equivalent to a distance between the lower boundary of the top hidden DIV element and a lower boundary of the first HTML DIV element; and

if a vertical position of the upper resize marker is moved upward a distance equivalent to the distance between the lower boundary of the bottom hidden DIV element and the first HTML DIV element;

appending an HTML line break tag to the end of the HTML content contained in the first HTML DIV element; and

decreasing a height of the padding DIV element by the distance equivalent to a distance between the lower boundary of the top hidden DIV element and a lower boundary of the first HTML DIV element.

15. A method for resizing an editable Web page zone of a Web page, the method comprising:

receiving an editable Web page zone of a Web page, the editable Web page zone comprising a first HTML DIV element;

providing along a lower border of the editable Web page zone a lower resize marker for vertically resizing the editable Web page zone;

receiving an indication of a selection of the lower resize marker for vertically resizing the editable Web page zone;

in response to receiving an indication of a selection of the lower resize marker for vertically resizing the editable Web page zone disposing a top hidden DIV element and a bottom hidden DIV element onto the Web page zone;

replicating an HTML content contained in the first HTML DIV element into the top hidden DIV element;

if an HTML line break tag is at the end of the HTML content replicated to the top hidden DIV element, removing a line break tag from the end of the replicated HTML content in the top hidden DIV element;

if an HTML line break tag is not at the end of the HTML content replicated to the top hidden DIV element, removing all HTML content from the top hidden DIV element;

replicating the HTML content contained in the first HTML DIV element into the bottom hidden DIV element, and adding an HTML line break tag to the end of the HTML content replicated into the bottom hidden DIV element;

continually monitoring a vertical position of the lower resize marker; and

,

if the vertical position of the lower resize marker crosses a lower boundary of the top hidden DIV element, removing one or more HTML line break tags from the end of the HTML content contained in the first HTML DIV element;

if the vertical position of the lower resize marker crosses a lower boundary of the bottom hidden DIV element, appending one or more HTML line break tags to the end of the HTML content contained in the first HTML DIV element;

providing along an upper border of the editable Web page zone an upper resize marker for vertically resizing the editable Web page zone;

receiving an indication of a selection of the upper resize marker for vertically resizing the editable Web page zone;

in response to receiving an indication of a selection of the upper resize marker for vertically resizing the editable Web page zone, disposing a padded DIV element above the first HTML DIV element, and;

if a vertical position of the upper resize marker is moved downward a distance equivalent to a distance between the lower boundary of the top hidden DIV element and a lower boundary of the first HTML DIV element,

removing an HTML line break tag from the end of the HTML content contained in the first HTML DIV element; and

increasing a height of the padding DIV element by the distance equivalent to a distance between the lower boundary of the top hidden DIV element and a lower boundary of the first HTML DIV element; and

if a vertical position of the upper resize marker is moved upward a distance equivalent to the distance between the lower boundary of the bottom hidden DIV element and the first HTML DIV element;

appending an HTML line break tag to the end of the HTML content contained in the first HTML DIV element; and

decreasing a height of the padding DIV element by the distance equivalent to a distance between the lower boundary of the top hidden DIV element and a lower boundary of the first HTML DIV element.

16. The method of claim 15, wherein resizing an editable Web page zone of a Web page is executed within a Web browser application.

17. The method of claim 15, wherein a positioning of the lower resize marker is controlled via a mouse-activated drag and drop operation.

18. The method of claim 15, wherein a positioning of the lower resize marker is controlled via a keystroke operation.

19. The method of claim 15, further comprising resetting the hidden DIV elements upon a completion of a vertical resizing of the first HTML DIV element.

20. The method of claim 15, further comprising:

disposing a horizontal resize marker along a right or left edge of the first HTML DIV element, wherein, in response to receiving a movement of the horizontal resize marker horizontally, expanding or decreasing a size of the first HTML DIV element horizontally in a direction of the movement of the horizontal resize marker; and

disposing a corner resize marker along a corner of the first HTML DIV element;

wherein, in response to receiving a movement of the corner resize marker diagonally, expanding or decreasing a size of the first HTML DIV element vertically and/or horizontally in a direction of the movement of the corner resize marker.