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

You are here: Reference > JavaScript > client-side > style handling > properties > browser specific extensions > MozBoxOrdinalGroup

MozBoxOrdinalGroup style property | webkitBoxOrdinalGroup style property

Browser support:

MozBoxOrdinalGroup

webkitBoxOrdinalGroup

Sets or retrieves the display order in which objects appear within a box.

Elements with a higher value are displayed after those with a lower value. The display order of the elements with the same group values depend on their source order.

Only works for elements in a box object. An element is a box object if the display property of the element has the value of -moz-box (-webkit-box) or -moz-inline-box (-webkit-inline-box).

You can get the same functionality with reordering the elements in your source code within the box.

Syntax:

object.MozBoxOrdinalGroup;
object.webkitBoxOrdinalGroup;

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

MozBoxOrdinalGroup:	This property is read/write.
webkitBoxOrdinalGroup:	This property is read/write.

CSS page for this property: -moz-box-ordinal-group

Possible values:

The type of this property is string.

One of the following values:

group (non-negative integer)

Integer, that indicates the ordinal group the element belongs to.

inherit

Takes the value of this property from the computed style of the parent element.

Default: 1.

Example HTML code 1:

This example illustrates the use of the -moz-box-ordinal-group and the -webkit-box-ordinal-group properties:

<head>
    <style>
        .box {
            display: -moz-inline-box;
            display: -webkit-inline-box;
            border: 5px solid red;
        }
        .ordinal1 {
            margin: 5px;
            -moz-box-ordinal-group: 1;
            -webkit-box-ordinal-group: 1;
        }
        .ordinal2 {
            margin: 5px;
            -moz-box-ordinal-group: 2;
            -webkit-box-ordinal-group: 2;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="ordinal2">first in source with ordinal 2</div>
        <div class="ordinal1">second in source with ordinal 1</div>
    </div>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the MozBoxOrdinalGroup property in JavaScript:

<head>
    <style>
        .example {
            display: -moz-inline-box;
            width: 250px;
            border: 5px solid red;
        }
        #myBold {
            font-weight:bold;
            -moz-box-ordinal-group: 2;
            background: green;
        }
        .italic {
            font-style:italic;
            -moz-box-ordinal-group: 1;
            background: cyan;
        }
    </style>

    <script type="text/javascript">
        function ChangeBoxOrdinalGroup (selectTag) {
            // Returns the index of the selected option
            var whichSelected = selectTag.selectedIndex;

            // Returns the selected option's text
            var boxOrdinalGroup = selectTag.options[whichSelected].text;

            var bold = document.getElementById ("myBold");
            bold.style.MozBoxOrdinalGroup = boxOrdinalGroup;
            
            // solve refresh problems
            var div = document.getElementById ("myDiv");
            div.className = "";
            div.focus ();
            div.className = "example";
        }
    </script>
</head>
<body>
    Change the order of the BOLD and the ITALIC tag.
    Use the SELECT field to change the BOLD element's MozBoxOrdinalGroup property (initially 1) 
    higher than, equal to or lower than the ITALIC element's MozBoxOrdinalGroup property, which is set to 1.
    <div class="example" id="myDiv">
        <div id="myBold">bold</div>
        <div class="italic">italic</div>
    </div>
    <select onchange="ChangeBoxOrdinalGroup (this);" size="3">
        <option />1
        <option selected="selected" />2
        <option />3
    </select>
</body>