jQuery UI Widgets › Forums › Layouts › Docking › Very simple but it doest not work

Tagged: , , ,

This topic contains 2 replies, has 2 voices, and was last updated by  Franck 10 years, 9 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Very simple but it doest not work Posts
  • August 24, 2012 at 3:52 pm Very simple but it doest not work #7105

    Franck
    Participant

    Hi

    I’d like a docking for the header of my page, a menu on the left, on content on the right of the menu and a bottom space .

    This is what I do but it does not work. I tryed a lot of combinaison but no solution.

    ok for part 1, 2 and 3 but part 4, the bottom does never appear

    <script type=”text/javascript”>
    $(document).ready(function () {
    // Create jqxDockPanel
    var theme = $.data(document.body, ‘theme’);
    if (theme == null || theme == undefined) theme = ”;
    $(“#jqxDockPanel”).jqxDockPanel({ width: 800 , height: 600 , theme: theme });
    $(“#jqxDockPanel div”).css(‘color’, ‘white’);
    $(‘#jqxDockPanel’).jqxDockPanel(‘render’);

    });
    </script>
    </head>
    <body class=’default’>
    <div id=’jqxWidget’ style=”width: 800px; height: 600px; font-size: 13px; font-family: Verdana;”>
    <div id=’jqxDockPanel’>
    <div id=’first’ dock=’top’ style=’height: 150px ;background: #486974;’>
    <span>Frist</span>
    </div>
    <div id=’second’ dock=’left’ style=’width:200px ; background: #368ba7;’>
    <span>Second</span>
    </div>

    <div id=’third’ dock=’left’ style=’width:600px ; background:  #df7169;’>
    <span>Third</span>
    </div>

    <div id=’fourth’ dock=’bottom’ style=’height:150px ; background: #0000FF;’>
    <span>Fourth</span>
    </div>
    </div>
    </div>
    </body>
    </htm>

    August 27, 2012 at 6:24 am Very simple but it doest not work #7160

    Dimitar
    Participant

    Hello franck,

    You just have to do a slight reorder of your divs to make your layout show properly. Here is how:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <link rel="Stylesheet" href="../jqwidgets/styles/jqx.base.css" />
        <script type="text/javascript" src="../scripts/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../jqwidgets/jqxdockpanel.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                // Create jqxDockPanel
                var theme = $.data(document.body, 'theme');
                if (theme == null || theme == undefined) theme = 'classic';
                $("#jqxDockPanel").jqxDockPanel({ width: 800, height: 600, theme: theme, lastchildfill: false });
                $("#jqxDockPanel div").css('color', 'white');
                $("#jqxDockPanel").jqxDockPanel('render');
            });
        </script>
    </head>
    <body class='default'>
        <div id="jqxWidget" style="width: 800px; height: 600px; font-size: 13px; font-family: Verdana;">
            <div id='jqxDockPanel'>
                <div id='first' dock='top' style='height: 150px; background: #486974;'>
                    <span>Frist</span>
                </div>
                <div id='fourth' dock='bottom' style='height: 150px; background: #0000FF;'>
                    <span>Fourth</span>
                </div>
                <div id='second' dock='left' style='width: 200px; background: #368ba7;'>
                    <span>Second</span>
                </div>
                <div id='third' dock='right' style='width: 600px; background: #df7169;'>
                    <span>Third</span>
                </div>
            </div>
        </div>
    </body>
    </html>

    Best Regards,
    Dimitar

    jqWidgets team
    http://www.jqwidgets.com/

    August 27, 2012 at 1:18 pm Very simple but it doest not work #7167

    Franck
    Participant

    Hello Dimitra,

    That works now. I have not thought of this solution. Many thank.
    I can now continue testing jqwidgets tools for my website.

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

You must be logged in to reply to this topic.