jQWidgets Forums

Tagged: javascript splitter, jquery splitter, jquery splitter plugin, jquery splitter widget, split container, splitter, ui splitter

This topic contains 5 replies, has 2 voices, and was last updated by dalberto 13 years ago.

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

Author

Getting sizes of panels in real time Posts
April 10, 2012 at 6:46 am Getting sizes of panels in real time #3301

dalberto
Member

I’m trying to implement something akin to multiple range sliders using the splitter widget. The reason I don’t simply use the slider widget is because it doesn’t provide the ability for multiple ranges. Essentially, I’m trying to implement something like this: http://quocity.com/colresizable/

The splitter is great for all my needs except one. While the slider allows the developer to get the value of the handles, as the user slides it (using the ‘slide’ event), the splitter only allows the developer to get the value of the panels once the panels have been re-sized, collapsed or expanded (i.e. nothing in real-time).

I wanted to know if it’s at all possible to get the widths of the panels in real-time. I thought of simply doing the calculation myself using the transparent resizer div, but this is error-prone and not ideal.

Thanks for any help!

April 10, 2012 at 8:06 am Getting sizes of panels in real time #3306
Peter Stoev
Keymaster
Hi dalberto,

I prepared a small sample which demonstrates how to get the panels widths real-time. In the sample, I also calculate the widths by using the transparent, captured split bar. Hope the sample helps 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.7.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">
        $(document).ready(function () {
            // create splitter. 
            $('#mainSplitter').jqxSplitter({ width: 600, height: 500, panels: [{ size: 150 }, { size: 150 }, { size: 150 }, { size: 150}] });
            var splitArea = '';
            var startOffset = 0;
            // calculate and display current split panels widths.
            var mouseMove = function (splitbar, event) {
                var panelWidths = [];
                panelWidths["panel1"] = $('#panel1').width();
                panelWidths["panel2"] = $('#panel2').width();
                panelWidths["panel3"] = $('#panel3').width();
                panelWidths["panel4"] = $('#panel4').width();
                var offset = parseInt(splitbar.offset().left) - startOffset;
                panelWidths[splitArea.previous[0].id] = Math.abs(splitArea.previous.width() + offset);
                panelWidths[splitArea.next[0].id] = Math.abs(splitArea.next.width() - offset);
                // display widths.
                $('#panel1').text(panelWidths["panel1"]);
                $('#panel2').text(panelWidths["panel2"]);
                $('#panel3').text(panelWidths["panel3"]);
                $('#panel4').text(panelWidths["panel4"]);
              }
            // bind to the mouse move of captured splitter.
            $('#mainSplitter').bind('resizeStart', function (event) {
                var splitter = $('#mainSplitter').jqxSplitter('_capturedElement');
                splitArea = $('#mainSplitter').jqxSplitter('_resizeArea');
                startOffset = parseInt(splitter.offset().left);
                splitter.bind('mousemove', function (event) {
                    mouseMove(splitter, event);
                });
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="container">
            <div id="mainSplitter">
                <div id="panel1">Column 1</div>
                <div id="panel2">Column 2</div>
                <div id="panel3">Column 3</div>
                <div id="panel4">Column 4</div>
            </div>
        </div>     
    </div>
</body>
</html>
```
Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com
April 10, 2012 at 1:33 pm Getting sizes of panels in real time #3309

dalberto
Member

Thank you so much! This is exactly what I needed! Awesome work on jqwidgets!

Thanks again!!!

April 10, 2012 at 7:34 pm Getting sizes of panels in real time #3319

dalberto
Member

I have just a few more questions.

I noticed this elsewhere when using the splitter, but I figured this is as good a time to ask as any.

I set the size of the splitter and the sizes of the panels based on percentages, based on this example: http://www.jqwidgets.com/splitter-auto-resizing/

Everything works fine, except the size of the last panel. I set the size of the splitter itself to 50% of its parent element (which is irrelevant here), and then the size of every panel to 20% (I have 5 panels in total). The first 4 panels have the correct size (20%), but the last one has what’s left over from the div enclosing the splitter. In my case, the last panel’s size ends up being around 15%.

I imagine it has to do with the fact that the splitter bars have a width of a few pixels, and eventually they all add up to a sizable chunk of the enclosing div’s total width, and so the last panel takes up the remainder of the enclosing div.

My first question: is there any way around this?

My second question: I noticed that if the dragging occurs outside of the splitter, the values can go on without being updated. I tried to account for this by binding the ‘resize’ event to the splitter, similar to the binding that occurs with resizeStart, but it did not work. I guess it would work similar to the “Events” Demo for the splitter. I’d like for the splitter to be accurate even if the dragging event wasn’t able to provide live updating. Essentially, I’d like a fallback, so that if live updating doesn’t work (because the dragging didn’t occur within the splitter), I’m able to update size information.

Thanks again!

April 10, 2012 at 8:07 pm Getting sizes of panels in real time #3322

Peter Stoev
Keymaster

Hi dalberto,

– The splitter’s width or height depends on the panel sizes that you set and also the summary value of the size of the split bars. This is by design. There’s no way around this as this is the default behavior. Otherwise, the resulting Splitter’s width or height will be incorrect.

– The ‘resize’ event is raised when the user drag and drops a split bar. You can take a look at the Splitter’s Events demo as it shows how to get the size of the resized panels. The size of the panels when the ‘resize’ event is raised is already updated.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

April 11, 2012 at 1:06 am Getting sizes of panels in real time #3329

dalberto
Member

Thanks Peter! Again, really great work with jQWidgets!
Author

Posts

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

You must be logged in to reply to this topic.