jQWidgets Forums

jQuery UI Widgets › Forums › Layouts › Splitter › how to change the spliiter behaviour to toggle on its default side

Tagged: ,

This topic contains 1 reply, has 2 voices, and was last updated by  Peter Stoev 11 years ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    how to change the spliiter behaviour to toggle on its default side Posts
  • April 24, 2014 at 3:11 pm how to change the spliiter behaviour to toggle on its default side #53551

    faraz
    Participant

    I have design the splitter window having three main horizontal splitters top, center and bottom inside center i have three vertical splitters left,center and right i want to hide the right splitter in the right side but it gets to the left side hiding the center(main div), same problem with bottom and center horizontal
    Plz help me its urgent Thanks
    `<!DOCTYPE html>
    <html lang=”en”>
    <head>
    <link rel=”stylesheet” href=”../../jqwidgets/styles/jqx.base.css” type=”text/css” />
    <script type=”text/javascript” src=”../../scripts/jquery-1.10.2.min.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxcore.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxsplitter.js”></script>
    <script type=”text/javascript” src=”../../scripts/demos.js”></script>
    <script type=”text/javascript”>
    $(document).ready(function () {
    $(‘#layoutContainer’).jqxSplitter({ width: ‘100%’, height: ‘100%’, orientation: ‘horizontal’, panels: [{ size: ‘10%’ }, { size: ‘90%’}] });
    $(‘#container’).jqxSplitter({ width: ‘100%’, height: ‘100%’, orientation: ‘horizontal’, panels: [{ size: ‘85%’ }, { size: ‘15%’}] });
    // $(‘#nested3’).jqxSplitter({ orientation: ‘vertical’, panels: [{ size: 200 }, { size: 300}] });
    $(‘#nested’).jqxSplitter({ orientation: ‘vertical’, panels: [{ size: ‘15%’} , { size: ‘85%’}] });
    $(‘#nested1’).jqxSplitter({ orientation: ‘vertical’,panels: [{ size: ‘80%’} , { size: ‘20%’}] });
    });
    </script>
    <style type=”text/css”>
    html, body
    {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    }
    </style>
    </head>
    <body class=’default’>

    <div id=”layoutContainer”>
    <div>
    top
    </div>
    <div>
    <div id=”container”>
    <div>
    <div id=”nested”>
    <div>
    Left
    </div>
    <div>
    <div id=”nested1″>
    <div>
    Center
    </div>
    <div>
    Right
    </div>
    </div>
    </div>
    </div>
    </div>
    <div>
    Bottom
    </div>
    </div>
    </div>
    </div>
    </body>
    </html>
    ‘

    April 24, 2014 at 5:04 pm how to change the spliiter behaviour to toggle on its default side #53556

    Peter Stoev
    Keymaster

    Hi faraz,

    By setting collapsible: false of the first panel in the panels array, you will change the collapse order.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com/

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.