In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > HTML DOM > properties > cols (frameset)

cols property (frameset)

Browser support:

Sets or retrieves the widths of the columns within a frameset element. All frame elements in the same column has the same width as the column.

The cols property not only specifies the width of the columns, but also specifies the count of the columns in the frameset. The count of the comma-separated items in the value of the cols property defines the count of the columns.

The rows property is similar to the cols property, but it defines the height and the count of the rows in the frameset.

The order of the frames is left-to-right, and top-to-bottom.

Syntax:

object.cols;

You can find the related objects in the Supported by objects section below.

This property is read/write.

HTML page for this property: cols

Possible values:

A comma-separated list that specifies or retrieves the width of the columns in the current frameset.

The width can be one of the following values:

width in pixels

Integer with or without a px (pixel) designator.

percentage

Integer higher or equal to 0 , with a % designator. The value is a percentage of the width of the frameset.

width*

Integer, followed by a '*' sign. Defines the width as a relative value. If only the '*' sign is defined, it is equivalent to the value of '1*'. After the pixel and percentage values are calculated, the rest of the space is divided among the relative values. For example, if there are two relative values: (2*, 3*) and the remaining space is 250px, than the value of '2*' represents a 100px width column, the value of '3*' represents a 150px width column.

Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the cols attribute:

Code

topFrame.htm

mainFrame.htm

<frameset rows="*" cols="200, *" border="10px" bordercolor="red">
    <frame src="topFrame.htm" name="topFrame" scrolling="No"/>
    <frame src="mainFrame.htm" name="mainFrame"/>
</frameset>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <h1>Contents of the top frame</h1>
    May contain menu items or a logo.
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <script type="text/javascript">
        function AddRow (statTable, element, attr, attrValue) {
            if (attrValue == null)
                attrValue = element.getAttribute (attr);

            var row = document.createElement ("tr");
            var nameCell = document.createElement ("td");
            var valueCell = document.createElement ("td");
            nameCell.innerHTML = attr;
            valueCell.innerHTML = attrValue;

            row.appendChild (nameCell);
            row.appendChild (valueCell);
            statTable.appendChild (row);
        }

        function CreateFramesetStat () {
            var statTable = document.getElementById ("frameset_stat");
            var frameSet = window.frameElement.parentNode;

            AddRow (statTable, frameSet, "border");
            AddRow (statTable, frameSet, "borderColor");
            AddRow (statTable, frameSet, "frameBorder");
            AddRow (statTable, frameSet, "frameSpacing");
            AddRow (statTable, frameSet, "cols");
            AddRow (statTable, frameSet, "rows");
        }

        function CreateTopFrameStat () {
            var statTable = document.getElementById ("topframe_stat");
            var frame = parent.frames['topFrame'].frameElement;

            AddRow (statTable, frame, "noResize", frame.noResize);
            AddRow (statTable, frame, "scrolling");
        }

        function CreateMainFrameStat () {
            var statTable = document.getElementById ("mainframe_stat");
            var frame = window.frameElement;

            AddRow (statTable, frame, "noResize", frame.noResize);
            AddRow (statTable, frame, "scrolling");
        }

        function CreateStat () {
            CreateFramesetStat ();
            CreateTopFrameStat ();
            CreateMainFrameStat ();
        }

    </script>
</head>
<body onload="CreateStat ()">
    <table> 
        <thead>
            <tr>
                <th>Frameset</th>
                <th>Top frame</th>
                <th>Main frame</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td valign="top">
                    <table border="1px" cellspacing="2px">
                        <thead>
                            <tr>
                                <th>name</th>
                                <th>value</th>
                            </tr>
                        </thead>
                        <tbody id="frameset_stat">
                        </tbody>
                    </table>
                </td>
                <td valign="top">
                    <table border="1px" cellspacing="2px">
                        <thead>
                            <tr>
                                <th>name</th>
                                <th>value</th>
                            </tr>
                        </thead>
                        <tbody id="topframe_stat">
                        </tbody>
                    </table>
                </td>
                <td valign="top">
                    <table border="1px" cellspacing="2px">
                        <thead>
                            <tr>
                                <th>name</th>
                                <th>value</th>
                            </tr>
                        </thead>
                        <tbody id="mainframe_stat">
                        </tbody>
                    </table>
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

You can get the cols property of the frameset from one of its frames. The code below shows how to implement it.

<script type="text/javascript">
    function GetFramesetCols () {
        var frameSet = window.frameElement.parentNode;
        return frameSet.cols;
    }
</script>