jQWidgets Forums

Tagged: bounds, document, fullscreen, jqxsplitter, splitter

This topic contains 11 replies, has 2 voices, and was last updated by merdjpatts 12 years, 4 months ago.

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

Author

Fullscreen splitter Posts
October 3, 2012 at 2:00 pm Fullscreen splitter #8850

merdjpatts
Participant

hello Sir,

how can I create a fullscreen splitter? with north, west, center, east, south region?

thanks

October 4, 2012 at 5:37 am Fullscreen splitter #8900
Dimitar
Participant
Hello merdjpatts,

Here is an example of a splitter that fits the document’s bounds and has five areas:
```
<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>In this sample is demonstrated how to add a Vertical Splitter
        inside a split panel of a Horizontal Splitter</title>
    <link rel="stylesheet" href="../../jqwidgets2.4.2/jqwidgets/styles/jqx.base.css"
        type="text/css" />
    <style type="text/css">
        html, body
        {
            height: 100%;
            width: 100%;
            margin: 0px;
            padding: 0px;
            overflow: hidden;
        }
    </style>
    <script type="text/javascript" src="../../scripts/jquery-1.8.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxsplitter.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxtabs.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getTheme();
            var fullWidth = $(window).width();
            var fullHeight = $(window).height();
            $('#splitContainer').jqxSplitter({ height: '100%', width: '100%', orientation: 'horizontal', theme: theme, panels: [{ size: '10%' }, { size: '80%'}] });
            $('#nestedSplitter').jqxSplitter({ height: '100%', width: '100%', theme: theme, panels: [{ size: '30%' }, { size: '30%'}] });
        });
    </script>
</head>
<body class='default'>
    <div id="splitContainer">
        <div>
            North
        </div>
        <div id="nestedSplitter">
            <div class="splitter-panel">
                West
            </div>
            <div class="splitter-panel">
                Center
            </div>
            <div class="splitter-panel">
                East
            </div>
        </div>
        <div>
            South
        </div>
    </div>
</body>
</html>
```
Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/
October 6, 2012 at 11:24 am Fullscreen splitter #9005

merdjpatts
Participant

Hello Sir, thank you so much it’s working!… I will inform our company about your UI so we will puchase in the future.
thanks

October 9, 2012 at 1:56 pm Fullscreen splitter #9115

merdjpatts
Participant

hello Sir:

I tested the above code, it is working fine but I observed something when resizing the browser. the splitter does not resize itself instead it stuck up to original area. but when I resize the browser second time around then splitter will adjust itself automatically. how could we solve this issue?

thanks

October 10, 2012 at 12:01 pm Fullscreen splitter #9181

Dimitar
Participant

Hi merdjpatts,

Thank you for your feedback. Currently, we have no solution for the issue. However, it seems to occur only when the window is resized via the maximize button and not via the resize arrows.

Best Regards,
Dimitar

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

October 10, 2012 at 1:04 pm Fullscreen splitter #9193

Dimitar
Participant

Hi merdjpatts,

An update on the matter – the splitter resize issue will be fixed in the upcoming version of jQWidgets (2.5), which will be released next week.

Best Regards,
Dimitar

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

October 11, 2012 at 9:03 am Fullscreen splitter #9249

merdjpatts
Participant

Hi Sir,

yes the problem appears when maximize button pressed, the thing is it appears only on first time, but trying again to resize will work as expected.

so looking forward for the release then…

thanks

October 18, 2012 at 7:32 am Fullscreen splitter #9669

merdjpatts
Participant

Hello Sir:

yuor new version is released, can you update the above your previous example?

big thanks

October 18, 2012 at 10:51 am Fullscreen splitter #9683
Dimitar
Participant
Hi merdjpatts,

The example I posted does not need to be updated, except that you should include the files from the new version (2.5), i.e.
```
<script type="text/javascript" src="../../jqwidgets2.5/jqwidgets/jqxcore.js"></script>
```
and not
```
<script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxcore.js"></script>
```
Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/
October 20, 2012 at 10:02 am Fullscreen splitter #9788

merdjpatts
Participant

hello Sir:

The update did not solve the issue, I tried it with different browsers, and it does not work as expected, honestly, it became worst.

kindly check it by yourself.

thanks

October 22, 2012 at 6:15 am Fullscreen splitter #9821

Dimitar
Participant

Hi merdjpatts,

Please download version 2.5 again and the issue should be fixed.

Best Regards,
Dimitar

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

October 22, 2012 at 1:39 pm Fullscreen splitter #9849

merdjpatts
Participant

Hello Sir:

Yup, it is working great now!

thanks .. I will now proceed to explore your UIs.

thanks
Author

Posts

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

You must be logged in to reply to this topic.