Browse Prior Art Database

DHTML Centering Script for DIV Tags Disclosure Number: IPCOM000014578D
Original Publication Date: 2001-May-01
Included in the Prior Art Database: 2003-Jun-19

Publishing Venue



Disclosed is a script designed to provide centering and relative positioning to multi layered DHTML (Dynamic Hypertext Transfer Protocol Language) designs produced with standard Divisions tags.One of the major advantages of designing web pages using DHTML is the ability to create overlapping layers with (

tags) that are compatible with both Microsoft Internet Explorer and Netscape Communicator. However the problem with using DIV tags is that they have no inherent centering ability, unlike most other HTML elements. To produce a useable interface, "absolute positioning" with DIV tags is required making it very difficult to create designs that work as intended in different browser window sizes and screens with unpredictable desktop area. In addition, in some versions of Netscape Communicator if the user resizes his browser window, the entire layout of the page is disrupted and rendered useless until the end user manually reloads the web page in view. This script corrects positioning problems with Division tags for the web page designer. By including this script in a web page that uses DIV tagging for over lapping layer creation, the designer may keep all of the DIV layers centered in the available height and width of the browser window. The script maintains the exact positions of each DIV layer in reference to each other thereby allowing the page to maintain its intended appearance despite browser window size. If the user resizes his browser window the script re-centers the DIV layers based on the currently available area of the browser window.The script is designed to work the same for both Netscape Communicator and Microsoft Internet Explorer versions 4.0 or higher. The script is designed to be conservative with its memory requirements and does not require the designer to edit or customize it in order for it to work with different web page designs. General Description:The script is based on the idea that the web designer requires all of the DIV layers to maintain their exact positions in reference to each other.The web designer must specify the required parameter "POINTOFREFERENCE" in their HTML file. (The parameter being the ID name of one of the DIV layers, preferably one used in the design as a background layer.)The web designer must specify the ID names of all of the DIV layers though the population of the "ids" array in the HTML file.The web must also specify the height and width values of the "POINTOFREFERENCE" DIV layer in the variables "POINTWIDTH" and "POINTHEIGHT" in the HTML file. When the page is loaded the "detect()" function is called. This is a general version detection function that allows the script to use the proper syntax for either Netscape or Internet Explorer to set the properties of DIV layers. This function also stores the currently available pixel height and width of the browser window for later use.The parameters specified in the HTML file are read by the script and the exact X, Y pixel positions of the "POINTOFREFERENCE" DIV layer are stored as class variables "X and Y" of the "set()" function.The "POINTWIDTH and POINTHEIGHT" values are used to calculate what the X, Y pixel positions of the "POINTOFREFERENCE" DIV layer should be to center it in the space currently available in the browser window. These new values are stored in the "Xref and Yref" variables of the "set()" function as class variables.The "start()" function is called beginning the process of building the necessary objects needed to manipulate the DIV layer positions. For every ID name specified in the "ids" array a new "divLayer()" function object is created. With each "divLayer" object a local "layerName" object is used to represent an actual DIV layer located in the HTML File. The difference of X and Y pixel position of each DIV layer to that of the "POINTOFREFERENCE" DIV layer is calculated.The results are added to the "Xref and Yref" class variables respectively. The X and Y pixel positions of the local "layerName" object are set to these sums moving the corresponding DIV layer to the correct position relative the center position of the 1 "POINTOFREFERENCE" DIV layer.Function Description:function detect(){This function detects browser name and version. It then stores the available height and width of the browser window in the recognized syntax used by either Netscape Communicator or Microsoft Internet Explorer into the global variables "availablewidth and availableheight" depending on which browser name is detected. This function sets the global variables "document_ and style_" to strings for other functions to use when manipulating DIV layers as required by the proper syntax used by either Netscape Communicator or Microsoft Internet Explorer. This function then calls the "start()" function.function fix(value){Netscape browsers can represent all pixel values numerically while Internet Explorer represents some pixel values alpha numerically. The "fix" function converts all strings passed in as the "value" variable to a string missing the ‘px’ Alfa portion of the string normally added by Internet Explorer. It returns the modified string.function set(){ This function builds the class variables "X, Y, Xref, and Yref" from the detected X and Y position of the "POINTOFREFERENCE" DIV layer and the calculations of the X and Y position required to center the "POINTOFREFERENCE" DIV layer. The centering calculation is the available height and width minus the specified height and width (given by the variables "POINTHEIGHT and POINTWIDTH") divided by 2. function divLayer(division) {This function provides the structure of the divLayer object.It creates a local "layerName" object to represent an actual DIV layer located in the HTML file with the ID name being passed through the "division" variable when the function is called.It then detects the X and Y position of the local "layerName" object and calculates the difference of the X and Y position from that of the "POINTOFREFERENCE" DIV layer X and Y position previously stored in the class variables "X and Y" from function "set()". The function adds the results to the "Xref and Yref" class variables and assigns these sums to the "layerName" object’s actual X and Y position, thus moving the DIV layer.function start(){This function is like a driver. It calls the function "set()" to build the class variables and runs a loop that creates a new "divLayer" object for every DIV ID stored in the "ids" array populated by the web designer in the HTML file. 2