DHTMLX Docs & Samples Explorer

### Layout Effects

collapse effect | disabled |
resize effect | disabled |
highlight effect | enabled |

Source

    <link rel="stylesheet" type="text/css" href="../../codebase/dhtmlxlayout.css">
    <link rel="stylesheet" type="text/css" href="../../codebase/skins/dhtmlxlayout_dhx_skyblue.css">
    <script src="../../codebase/dhtmlxcommon.js"></script>
    <script src="../../codebase/dhtmlxlayout.js"></script>
    <script src="../../codebase/dhtmlxcontainer.js"></script>

    <div id="parentId" style="position: relative; top: 20px; left: 20px; width: 600px; height: 400px;"></div>
    <div style="margin: 40px 0px 0px 20px;">
        <table>
            <tr>
                <td width="120"><b>collapse effect</b></td>
                <td width="90"><span id="ef_collapse" style="color:#DD0000;">disabled</span></td>
                <td>
                    <input type="button" value="Enable" onclick="enable('collapse');">
                    <input type="button" value="Disable" onclick="disable('collapse');">
                    <input type="button" value="is Enabled?" onclick="getState('collapse');">
                </td>
            </tr>
            <tr>
                <td><b>resize effect</b></td>
                <td><span id="ef_resize" style="color:#DD0000;">disabled</span></td>
                <td>
                    <input type="button" value="Enable" onclick="enable('resize');">
                    <input type="button" value="Disable" onclick="disable('resize');">
                    <input type="button" value="is Enabled?" onclick="getState('resize');">
                </td>
            </tr>
            <tr>
                <td><b>highlight effect</b></td>
                <td><span id="ef_highlight" style="color:#009900;">enabled</span></td>
                <td>
                    <input type="button" value="Enable" onclick="enable('highlight');">
                    <input type="button" value="Disable" onclick="disable('highlight');">
                    <input type="button" value="is Enabled?" onclick="getState('highlight');">
                </td>
            </tr>
        </table>
    </div>
    <script>var dhxLayout;
    function doOnLoad() {
        dhxLayout = new dhtmlXLayoutObject("parentId", "5I");
    }
    function enable(effect) {
        dhxLayout.setEffect(effect, true);
        document.getElementById("ef_" + effect).innerHTML = "enabled";
        document.getElementById("ef_" + effect).style.color = "#009900";
    }
    function disable(effect) {
        dhxLayout.setEffect(effect, false);
        document.getElementById("ef_" + effect).innerHTML = "disabled";
        document.getElementById("ef_" + effect).style.color = "#DD0000";
    }
    function getState(effect) {
        alert(dhxLayout.getEffect(effect));
    }</script>