4 panels horisontally - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: docking, footer, horizontal, jqxDocking, layout, panel, responsive, window

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

Viewing 6 posts - 1 through 6 (of 6 total)

Author

4 panels horisontally Posts

December 19, 2013 at 6:44 am 4 panels horisontally #46758

Participant

Hi
I am a jqwidgets newbie – I am trying to acheive a docking windo with at least 4 panels accross horizintally – I have set the width of the docking window to 1200 and need four panels across (240px) and three panels vertically i.e 12 per view. The demo seems to default to 50 per cent of the window width per panel.

Any direction gratefully received.

Regards

Tony Ayling
Brisbane Australia

December 19, 2013 at 8:43 am 4 panels horisontally #46765

Dimitar

Participant

Hello Tony Ayling,

Please take a look at the following example. We hope it is helpful to you:

<!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/jqxdocking.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // Create jqxDocking
            $("#docking").jqxDocking({ width: 1200, theme: 'classic', orientation: 'horizontal', mode: "docked" });
        });
    </script>
</head>
<body class='default'>
    <div id="docking">
        <div>
            <div id="window1">
                <div>
                    Header 1</div>
                <div>
                    Content 1</div>
            </div>
            <div id="window5">
                <div>
                    Header 5</div>
                <div>
                    Content 5</div>
            </div>
            <div id="window9">
                <div>
                    Header 9</div>
                <div>
                    Content 9</div>
            </div>
        </div>
        <div>
            <div id="window2">
                <div>
                    Header 2</div>
                <div>
                    Content 2</div>
            </div>
            <div id="window6">
                <div>
                    Header 6</div>
                <div>
                    Content 6</div>
            </div>
            <div id="window10">
                <div>
                    Header 10</div>
                <div>
                    Content 10</div>
            </div>
        </div>
        <div>
            <div id="window3">
                <div>
                    Header 3</div>
                <div>
                    Content 3</div>
            </div>
            <div id="window7">
                <div>
                    Header 7</div>
                <div>
                    Content 7</div>
            </div>
            <div id="window11">
                <div>
                    Header 11</div>
                <div>
                    Content 11</div>
            </div>
        </div>
        <div>
            <div id="window4">
                <div>
                    Header 4</div>
                <div>
                    Content 4</div>
            </div>
            <div id="window8">
                <div>
                    Header 8</div>
                <div>
                    Content 8</div>
            </div>
            <div id="window12">
                <div>
                    Header 12</div>
                <div>
                    Content 12</div>
            </div>
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

December 19, 2013 at 12:24 pm 4 panels horisontally #46772

tayling

Participant

Thanks Dimitar – just what I wanted. I have been trying to add an extra div on to be a footer – I am guessing that is not possible – so as to hav a shaded header and a shaded footer?

Thanks very much for your promt and very helpful reply.
Regards
Tony Ayling

December 20, 2013 at 7:18 am 4 panels horisontally #46800

Dimitar

Participant

Hello Tony Ayling,

The jqxWindow widget has a specific structure of two divs – header and content – which should not be changed. However, you may insert a footer in the content section and make it look like the header. 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" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.orange.css" type="text/css" />
    <style type="text/css">
        #content
        {
            position: relative;
            overflow: hidden;
            padding: 0;
        }
        #footer
        {
            position: absolute;
            bottom: 0;
            height: 15px;
            width: 100%;
            border-top-width: 1px;
            border-top-style: solid;
            border-bottom: none;
        }
    </style>
    <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/jqxwindow.js"></script>
</head>
<body>
    <div>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#jqxwindow ").jqxWindow({ height: 90, width: 150, theme: "orange" });
            });
        </script>
        <div id='jqxwindow'>
            <div>
                Header</div>
            <div id="content">
                <div>
                    Content
                </div>
                <div id="footer" class="jqx-window-header jqx-window-header-orange jqx-fill-state-normal jqx-fill-state-normal-orange">
                    Footer</div>
            </div>
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

January 8, 2014 at 12:25 am 4 panels horisontally #47501

tayling

Participant

Thanks Dimitar
Looking good – would you be able to suggest how I could make it responsive – as in if I have 4 x 3 – it shrinks to 2 x 6 if rotated or viewed on phone?
Heres hoping
Regards
Tony Ayling

January 8, 2014 at 7:11 am 4 panels horisontally #47515

Dimitar

Participant

Hi tayling,

We suggest you append the needed docking HTML structure dynamically before initializing the widget. Here is an example on how to achieve this. It remains to you to determine the conditions for the two layouts – 4×3 (a) and 2×6 (b).

<!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/jqxdocking.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var width;
            if (true == true) {
                $("#docking").append('<div> <div id="window1"> <div> Header 1</div> <div> Content 1</div> </div> <div id="window5"> <div> Header 5</div> <div> Content 5</div> </div> <div id="window9"> <div> Header 9</div> <div> Content 9</div> </div> </div> <div> <div id="window2"> <div> Header 2</div> <div> Content 2</div> </div> <div id="window6"> <div> Header 6</div> <div> Content 6</div> </div> <div id="window10"> <div> Header 10</div> <div> Content 10</div> </div> </div> <div> <div id="window3"> <div> Header 3</div> <div> Content 3</div> </div> <div id="window7"> <div> Header 7</div> <div> Content 7</div> </div> <div id="window11"> <div> Header 11</div> <div> Content 11</div> </div> </div> <div> <div id="window4"> <div> Header 4</div> <div> Content 4</div> </div> <div id="window8"> <div> Header 8</div> <div> Content 8</div> </div> <div id="window12"> <div> Header 12</div> <div> Content 12</div> </div> </div>');
                width = 1200;
            } else if (true == true) {
                $("#docking").append(' <div> <div id="window1"> <div> Header 1</div> <div> Content 1</div> </div> <div id="window3"> <div> Header 3</div> <div> Content 3</div> </div> <div id="window5"> <div> Header 5</div> <div> Content 5</div> </div> <div id="window7"> <div> Header 7</div> <div> Content 7</div> </div> <div id="window9"> <div> Header 9</div> <div> Content 9</div> </div> <div id="window11"> <div> Header 11</div> <div> Content 11</div> </div> </div> <div> <div id="window2"> <div> Header 2</div> <div> Content 2</div> </div> <div id="window4"> <div> Header 4</div> <div> Content 4</div> </div> <div id="window6"> <div> Header 6</div> <div> Content 6</div> </div> <div id="window8"> <div> Header 8</div> <div> Content 8</div> </div> <div id="window10"> <div> Header 10</div> <div> Content 10</div> </div> <div id="window12"> <div> Header 12</div> <div> Content 12</div> </div> </div>');
                width = 600;
            };

            // Create jqxDocking
            $("#docking").jqxDocking({ width: width, theme: 'classic', orientation: 'horizontal', mode: "docked" });
        });
    </script>
</head>
<body class='default'>
    <div id="docking">
    </div>
</body>
</html>

Best Regards,
Dimitar

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

Author

Posts

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.