Resizing an editable area in a web page

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.

1 . A browser configured to operate with a processor to:
 use one or more resize markers for use in resizing one or more dimensions of an editable zone comprising a DIV element;   associate a first hidden DIV element and a second hidden DIV element with the editable zone comprising the DIV element in response to use of a resize marker;   replicate content contained in the DIV element into the first hidden DIV element including removing a line break tag from the end of the content replicated in the first hidden DIV element if a line break tag is at the end of the content or remove all content from the first hidden DIV element if a line break tag is not at the end of the content replicated in the first hidden DIV element;   replicate the content contained in the DIV element into the second hidden DIV element, and add a line break tag to the end of the content replicated into the second hidden DIV element;   remove one or more line break tags from the end of the content contained in the DIV element if the position of a resize marker crosses a boundary of the first hidden DIV element; and   append one or more line break tags to the end of the content contained in the DIV element if the position of the resize marker crosses a boundary of the second hidden DIV element.   
     
     
         2 . The browser of  claim 1 , further configured to control a positioning of the resize marker via a user input operation using an input type. 
     
     
         3 . The browser of  claim 1 , further configured to use a padded DIV element with the DIV element to achieve a padding effect. 
     
     
         4 . The browser of  claim 1 , further configured to reset one or more hidden DIV elements upon a completion of a vertical resizing of the DIV element. 
     
     
         5 . The browser of  claim 1 , further configured to:
 use an upper resize marker as part of an upper border of the editable zone for vertically resizing the editable zone;   receive an indication of a selection of the upper resize marker for vertically resizing the editable zone;   associate a padded DIV element with the DIV element in response to receiving an indication of a selection of the upper resize marker for vertically resizing the editable zone;   remove a line break tag from the end of the content contained in the DIV element and increase 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 DIV element 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 DIV element; and   append a line break tag to the end of the content contained in the DIV element and decrease 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 DIV element 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 DIV element.   
     
     
         6 . The browser of  claim 1 , further configured to use a horizontal resize marker along a right or left edge of the DIV element and one of expand or decrease a size of the DIV element horizontally in a direction of the movement of the horizontal resize marker. 
     
     
         7 . The browser of  claim 1 , further configured to use a corner resize marker associated with the DIV element and one of expand or decrease a size of the DIV element in a direction of the movement of the corner resize marker. 
     
     
         8 . The browser of  claim 1 , further configured as part of a computing device to provide browsing operations. 
     
     
         9 . The browser of  claim 1 , further configured to dynamically size to web content using a web authoring tool. 
     
     
         10 . The browser of  claim 1 , further configured to use a drag a drag-and-drop mechanism to resize DIV elements. 
     
     
         11 . The browser of  claim 1 , further configured to use touch and other input types to resize DIV elements. 
     
     
         12 . The browser of  claim 1 , further configured to use resizing operations to either increment or decrement line breaks in the DIV element content. 
     
     
         13 . The browser of  claim 1 , further configured to insert or remove a tag into or from an underlying document or a page as part of a resizing operation. 
     
     
         14 . The browser of  claim 1 , further configured to interact with a web server to using a distributed computer network. 
     
     
         15 . A system comprising:
 at least one processor and memory;   a browser component configured to:
 provide a number of resize markers for use in resizing operations associated with an editable zone; 
 associate a first hidden element and a second hidden element with the editable zone based on use of a resize marker; 
 replicate content contained in the editable zone into the first hidden element including one of removing a line break tag from the end of the replicated content in the first hidden element if an line break tag is at the end of the content or removing all content from the first hidden element if an line break tag is not at the end of the content replicated to the first hidden element; 
 replicate the content contained in the editable zone into the second hidden element including adding a line break tag to the end of the content replicated into the second hidden element; 
 remove one or more line break tags from the end of the content contained in the editable zone if the position of the resize marker crosses a boundary of the first hidden element; and 
 append one or more line break tags to the end of the content contained in the editable zone if the position of the resize marker crosses a boundary of the second hidden element. 
   
     
     
         16 . The system of  claim 15 , wherein the browser component is further configured to control a pixel height of the editable zone based on a resize marker operation. 
     
     
         17 . The system of  claim 15 , further configured to use to click-and-drag operations, key and tabbing operations, and touch or multi-touch operations to resize the editable zone. 
     
     
         18 . A user interface configured to:
 display one or more resize markers for use in resizing one or more dimensions of an editable zone;   use a first hidden DIV element and a second hidden DIV element with the editable zone when a resize marker is in use;   replicate content contained in the editable zone into the first hidden DIV element including removing a line break tag from the end of the replicated content in the first hidden DIV element if a line break tag is at the end of the content or removing all content from the first hidden DIV element if a line break tag is not at the end of the content replicated to the first hidden DIV element;   replicate the content contained in the editable zone into the second hidden DIV element, and adding a line break tag to the end of the content replicated into the second hidden DIV element;   remove one or more line break tags from the end of the content contained in the editable zone if the position of the resize marker crosses a boundary of the first hidden DIV element; and   append one or more line break tags to the end of the content contained in the editable zone if the position of the resize marker crosses a boundary of the second hidden DIV element.   
     
     
         19 . The user interface of  claim 19  further configured to use a padded DIV element with the editable zone to achieve a padding effect.