Creating a new panel layout

[alastairwalkerParticipant]

Hi – I am trying to create a variant of the demos in demos/jqxpanel/dockpanel.htm.

As follows:
______________________________________________
| | |
|_______________________________| |
| | |
|_______________________________| |
| | |
|_______________________________| |
| | |
| | |
|_______________________________|_____________|

But I cannot work out the basic method from the documentation given as to how to create the above layout.

Any help on how to create the about layout will be really appreciated!

Alastair

[alastairwalkerParticipant]

Sorry – the layout got messed up.

Let’s try again.

______________________________________________
| | |
|_______________________________| |
| | |
|_______________________________| |
| | |
|_______________________________| |
| | |
|_______________________________|_____________|
`

(I would have attached an image – but there is no facility for attachments.)

But I cannot work out the basic method from the documentation given as to how to create the above layout.

Any help on how to create the about layout will be really appreciated!

Alastair

[alastairwalkerParticipant]

Sorry – gave up – found no way to format the layout.

Alastair

[alastairwalkerParticipant]

I must try again!

With reference to the demo on http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxpanel/index.htm#demos/jqxpanel/dockpanel.htm

referring to example 4 (2nd from the right), I am trying to add a column to the right of all the three horizontal columns.

Alternatively, looking at example three, take the leftmost column and divide it horizontally into three rows.

Can this be done?

Alastair

[VladimirParticipant]

Hello Alastair,

How the panel works is it that it gets the divs in the order specified in the dom tree declaration (in the example in the order #first, #second, #third, #fourth) and tries to place them inside the panel at their specified position. If width is specified it will be used when docking is left or right, and will take the full height. If docking is top or bottom it will use the specified height, and take the full remaining width.

So what you want to do is add your side panel first with docking right and specified width. And then add the 3 horizontal divs one under the other (with docking top).

For example something like this:

                        $("#jqxDockPanel > div > div").css({ height: '60px', width: '100px'});
                        $('#first').attr('dock', 'right');
                        $('#first').width('60px');
                        $('#second').attr('dock', 'top');
                        $('#third').attr('dock', 'top');
                        $('#fourth').attr('dock', 'top');

Note that the order of applying the attributes is irrelevant. What matters is the order of the elements in the DOM.

Best Regards,
Vladimir

jQWidgets Team
http://www.jqwidgets.com

[alastairwalkerParticipant]

OK – many thanks for the quick feedback! I will try this out!

Alastair

[alastairwalkerParticipant]

Hi – the provided example works fine!

But I have a question about notation.

The notation for the selector “#jqxDockPanel > div > div” is not familiar to me.

Can you indicate what part of the DOM model I should look at to understand this notation? (i.e. I usually understand the ‘>’ to be ‘greater than’). Is this implied in this selector definition?

Many thanks,

Alastair

[VladimirParticipant]

Hello Alastair,

You can read more about css selectors here.

element>element div > p Selects all <p> elements where the parent is a <div> element 2

Best Regards,
Vladimir

jQWidgets Team
http://www.jqwidgets.com

[alastairwalkerParticipant]

OK – that insight is helpful. I take it that CSS styling interpretation to mean in simple English ‘apply the defined styling to the division child(ren) and (grand)child(ren)’. Is this correct?

I have three further questions regarding the rules that apply to creating the panel layout:

a) I notice that all the examples use four divisions, yet in three instances (examples 3 – 5) not all the panels are visible, yet they have been ‘allocated’ in the panel formatting. Why for example, in example 3 (two horizontal rows) are #third and #fourth used in the DOM model – i.e. and not simply left out? Is it necessary to always specify in the panel layout what happens to all the panels – even though some of them may be not visible?

b) If I have a complex panel layout arrangement of say 10 panels, I will then need to identify selectors for panels #first through to #tenth, for argument sake? (i.e. I am not completely sure at this stage if the capability of the panel layout is limited to four panels only? – or any number of panels is possible?)

c) Related to b) above, are there limitations in the complexity of the layouts that can be achieved with this widget? Or is the panel layout infinitely flexible?

Many thanks in advance for your responses to these questions!

Alastair

[VladimirParticipant]

Hello Alastair,

Not exactly.

The quoted selector says: Select all <div> elements that have a <div> element as parent, and that <div> element has an element as his parents that has an id jqxDockPanel.

Regarding your question:
a) In general you wouldn’t want to have invisible div elements, unless they have a specific purpose. Normally you would just delete them from your DOM. In the demo in order to provide easier switch between the layouts in some cases the 4th element is left invisible (outside of panel), but not removed. So no – it is not necessery, but generally you would want to.
b) Any number of panels should be possible. The selection and naming of the tags is entirely up to you.
c) I am not aware of any limitations aside from the fact that since the panel will take the entire available space in one direction, you are likely to run out of space pretty soon, and I can’t think of particular reason to place too many of them, unless you want to create a drawing with divs.

Best Regards,
Vladimir

jQWidgets Team
http://www.jqwidgets.com

• This reply was modified 7 years, 7 months ago by  Vladimir. Reason: fixed explanation for css selector

[alastairwalkerParticipant]

I think I am nearly there!

To see if my understanding is accurate, I tried to create a panel layout design as follows:

a) a horizontal row at the top
b) followed by three panels, comprising two horizontal panels right aligned to a vertical panel
c) at the bottom of the structure is a horizontal row – the same width as the top horizontal row.

The top and bottom horizontal rows both extend the full with of the panels in b).

The DOM model is as follows for the 5 panels:

        <div id='jqxDockPanel'>
            <div id='first' style='background: #486974;'>
                First Div</div>
            <div id='second' style='height: 100px; background: #368ba7;'>
                Second Div</div>
            <div id='third' style='background: #df7169;'>
                Third Div</div>
            <div id='fourth' style='background: #a73654;'>
                Fourth Div</div>
            <div id='fifth' style='background: #a73600;'>
                Fifth Div</div>
        </div>

And the panel design is as follows:

                    $("#jqxDockPanel > div > div").css({ height: 'auto', width: 'auto'});
                    $('#first').attr('dock', 'top');
                    $('#first').height('100px');
                    $('#second').attr('dock', 'right');
                    $('#second').width('100px');                     
                    $('#third').attr('dock', 'top');
                    $('#third').height('100px');
                    $('#fourth').attr('dock', 'top');                        
                    $('#fourth').height('150px');                       
                    $('#fifth').attr('dock', 'bottom'); 

The problem at the moment is that the fifth panel falls directly under the fourth panel and is the same width as that panel.

I want to have the 5th panel equal to the width of the 4th panel plus the width of the 2nd panel.

Is there something in the specification I am not understanding correctly?

Many thanks,

Alastair

[VladimirParticipant]

Hello Alastair,

Since the second panel is taking all the vertical space, the remaining horizontal space for the fifth panel is decreased. If you would like the fifth to take the entire horizontal space (e.g. be equal to the width of the first panel), it should be placed before the second panel in the domtree.

Example:

        <div id='jqxDockPanel'>
            <div id='first' style='background: #486974;'>
                First Div</div>
            <div id='fifth' style='background: #a73600;'>
                Fifth Div</div>
            <div id='second' style='height: 100px; background: #368ba7;'>
                Second Div</div>
            <div id='third' style='background: #df7169;'>
                Third Div</div>
            <div id='fourth' style='background: #a73654;'>
                Fourth Div</div>
        </div>

As I explained – the panels are being placed depending on their order in the dom tree, taking as much space as it is available.

Best Regards,
Vladimir

jQWidgets Team
http://www.jqwidgets.com

[alastairwalkerParticipant]

OK! Clearly this will take me some time to grasp all the subtleties!

Many thanks!

Alastair

[alastairwalkerParticipant]

I am trying to extend a panel layout using the following example as a framework:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="keywords" content="jqxDocking, jQuery Docking, jQWidgets, Default Functionality" />
    <meta name="description" content="jqxDocking is a widget which helps you to control and manage multiple windows and 
    even the layout of your page. Each window which is part of jqxDocking can be dragged around the Web page, 
    docked into docking zones, collapsed into a minimized state, expanded or pinned." />
    <title id='Description'>jqxDocking represents a widget which enables you to manage and
        layout multiple windows on a web page.</title>
    <link rel="stylesheet" href="libraries/jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="libraries/jqwidgets/styles/jqx.energyblue.css" type="text/css" />    
    <script type="text/javascript" src="libraries/jqwidgets/scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="libraries/jqwidgets/scripts/demos.js"></script>
    <script type="text/javascript" src="libraries/jqwidgets/jqx-all.js"></script>
 
    <script type="text/javascript">
        $(document).ready(function () {
 $("#jqxDockPanel").jqxDockPanel({
     width: 600,
     height: 410
 });

});
    </script>
</head>
<body class='default'>
<div id='jqxWidget' style="width: 300px; height: 600px; font-size: 13px; font-family: Verdana;">
    <div id='jqxDockPanel'>
        <div id='first' dock='top' style='background: #486974;'>First Div</div>
        <div id='second' dock='top' style='background: #368ba7;'>Second Div</div>
        <div id='third' dock='right' style='background: #df7169;'>Third Div</div>
        <div id='fourth' dock='left'  style='background: #a73654;'>Fourth Div</div>
        <div id='fifth' dock='bottom'  style='background: #a73000;'>Fifth Div</div>        
    </div>
</body>
</html>

What I am trying to achieve is to have division 5 as a completely separate bar at the bottom of the panel.

I expected the 'bottom' to place the division at the bottom, but at the moment it is in the middle of divisions 3 and 4.

Any guidance on how to achieve this will be really appreciated!

Alastair

[HristoParticipant]

Hello Alastair,

Please take a look this example:
http://jsfiddle.net/txhi/7zodm920/

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts