jQWidgets Forums

Tagged: jqxsplitter, splitter

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

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

Author

What is wrong with my splitter? Posts
January 7, 2015 at 8:46 pm What is wrong with my splitter? #65094

hcccs
Participant

I have copied an example splitter and altered it slightly but then it doesn’t work and I can’t spot the error.

<DOCTYPE html>
<html lang=”en”>
<head>
<meta name=”keywords” content=”jQuery Splitter, Splitter Widget, Splitter, jqxSplitter” />

<link type=”text/css” rel=”stylesheet” href=”/jqwidgets/styles/jqx.base.css” />
<link type=”text/css” rel=”stylesheet” href=”/jqwidgets/styles/jqx.summer.css” />
<script type=”text/javascript” src=”http://code.jquery.com/jquery-1.11.0.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”>
$(document).ready(function () {
$(‘#mainSplitter’).jqxSplitter({ width: ‘100%’, height: ‘100%’, orientation: ‘horizontal’, panels: [{size: ‘15%’}, {size: ‘70%’}, {size: ‘15%’}] });
$(‘#midSplitter’).jqxSplitter({ width: ‘100%’, height: ‘70%’, orientation: ‘vertical’, panels: [{size: ‘15%’}, {size: ‘70%’}, {size: ‘15%’}] });
});
</script>

</head>
<body>
<div id=”mainSplitter”>
<div>
Top menu
</div>
<div>
Mid split
</div>
<div>
Bottom panel
</div>
</div>
</body>
</html>

January 8, 2015 at 11:09 am What is wrong with my splitter? #65133
Nadezhda
Participant
Hello hcccs,

You are missed to add “midSplitter” id and the above HTML Structure is invalid. You need to use nested jqxSplitter for the second id selector.
Please, find the following html elements within the body of the html document. If this suggestion does not help you fix the issue, please, provide us with more information.
```
    <div id="mainSplitter">
        <div>
            Top menu
        </div>
        <div>
            <div id="midSplitter">
                <div>
                    Mid split
                </div>
                <div>
                    Bottom panel
                </div>
            </div>
        </div>
    </div>
```
Best Regards,
Nadezhda

jQWidgets team
http://www.jqwidgets.com/
January 10, 2015 at 10:58 pm What is wrong with my splitter? #65222

hcccs
Participant

Ok, I have taken a step backwards and cut down the code to its bare bones just to make something work. I don’t seem to have much luck in spite of my thirty years as a programmer. What am I doing so wrong?

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta name=”keywords” content=”jQuery Splitter, Splitter Widget, Splitter, jqxSplitter” />

<link type=”text/css” rel=”stylesheet” href=”/jqwidgets/styles/jqx.base.css” />
<script type=”text/javascript” src=”/js/jquery-2.1.3.js”></script>
<script type=”text/javascript” src=”/jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”/jqwidgets/jqxsplitter.js”></script>
<script type=”text/javascript”>
$(document).ready(function () {
$(‘#hor1Splitter’).jqxSplitter({ width: ‘100%’, height: ‘100%’, orientation: ‘horizontal’, panels: [{size: ‘10%’}, {size: ‘90%’}}] });
});
</script>
</head>

<body>
<div id=”hor1Splitter”>
<div>
Top
</div>
<div>
Middle
</div>
</div>
</body>
</html>

January 12, 2015 at 7:55 am What is wrong with my splitter? #65240
Nadezhda
Participant
Hi hcccs,

Here is an example which shows how to use jqxSplitter. Please, note that reference to jquery file is different. I would also suggest you to use the most recent version of jQWidgets which is 3.6.0.
```
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Horizontal Splitter </title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.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="../../jqwidgets/jqxbuttons.js"></script>
    <style type="text/css">
        html, body {
            height: 100%;
            width: 100%;
            margin: 0px;
            padding: 0px;
            overflow: hidden;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#hor1Splitter').jqxSplitter({ width: "100%", height: "100%", orientation: 'horizontal', panels: [{ size: '10%' }, { size: '90%' }] });
        });
    </script>
</head>
<body class='default'>
    <div id="hor1Splitter">
        <div>Top</div>
        <div>Middle</div>
    </div>
</body>
</html>
```
Best Regards,
Nadezhda

jQWidgets team
http://www.jqwidgets.com/
January 12, 2015 at 9:16 pm What is wrong with my splitter? #65282

hcccs
Participant

I got it working now, at last.
Author

Posts

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

You must be logged in to reply to this topic.