jQWidgets Forums

Tagged: drag, jqxsplitter, panel, splitbar, splitter

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

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

Author

content of panel only changes after dragging is completed Posts

January 21, 2013 at 1:23 pm content of panel only changes after dragging is completed #13987

d_l

Member

I am testing jqxSplitter with four panels dragged horizontally.

I note that when dragging the handle between panels (I’m using a summer theme to make the handle more visible) the content of the panels remain static until the dragging of separator is finished. In fact the dragged separator passes over the background text.

I would prefer the content of panels to closely follow the position of separator handle. Can the panel positions be updated dynamically as the handle is dragged to resize panels?

Should I try “containment” property on panels in jQuery (as in jQuery autoresize)?

January 22, 2013 at 6:23 am content of panel only changes after dragging is completed #14032

Dimitar

Participant

Hello d_l,

Unfortunately, the requested functionality is not supported by jqxSplitter.

Best Regards,
Dimitar

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

January 22, 2013 at 1:05 pm content of panel only changes after dragging is completed #14055

d_l

Member

I can see that other UI frameworks have the same restriction on splitter panels.

I would like to use jQuery .position to track the position of the selected separator bar
and then adjust widths of expanding/contracting panels (on either side of the separator bar) to follow.

Are there unique div id’s for each separator bar I can use to track position of dragged bar?

Then I can use some watcher like this ..

x1=$(“separatorbarA”).position();
x2=$(“separatorbarB”).position();
x3=$(“separatorbarC”).position();
x4=$(“separatorbarD”).position();

January 23, 2013 at 6:19 am content of panel only changes after dragging is completed #14084

Dimitar

Participant

Hi d_l,

The splitbars do not have unique ids. However, they have either the jqx-splitter-splitbar-vertical or jqx-splitter-splitbar-horizontal class.

Here is a modified version of the demo Default Functionality, which shows how to assign ids to the splitbars:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="keywords" content="jQuery Splitter, Splitter Widget, Splitter, jqxSplitter" />
    <meta name="description" content="jQuery Splitter Widget - API. jqxSplitter is widget based on jQuery which provides an easy way to create dynamic 
    layout allowing you to resize, collapse panels. These panels are actualy are HTML container's children. 
    You can create both horizontal and vertical splitters based on your needs. This is allowing you to create complex layouts." />
    <title id='Description'>jqxSplitter is a widget based on jQuery which provides an easy
        way to create dynamic layouts with resizable and collapsible panels.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtree.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxsplitter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var rss = (function ($) {
                var createWidgets = function () {
                    var theme = getTheme();
                    $('#mainSplitter').jqxSplitter({ theme: theme, roundedcorners: true, width: 600, height: 600, panels: [{ size: 200, max: 290 }, { size: 400}] });
                    $('#contentSplitter').jqxSplitter({ theme: theme, orientation: 'horizontal', panels: [{ size: 400, collapsible: false }, { collapsible: true}] });
                    $('#jqxTree').jqxTree({ height: 200, theme: theme });
                    $('#feedListContainer').jqxListBox({ theme: theme, source: ['1'], width: '100', height: '100' });
                    $('#feedItemContent').jqxPanel({ theme: theme });
                };
                var applyThemes = function () {
                    var theme = getTheme();
                    if (theme != '') {
                        $(".header").addClass('jqx-widget-header-' + theme);
                    }
                    else {
                        $(".header").addClass('jqx-widget-header');
                    }
                };
                var addEventListeners = function () {
                    $('#jqxTree').bind('select', function (event) {
                        var item = $('#jqxTree').jqxTree('getItem', event.args.element);
                        getFeed(config.feeds[item.label]);
                    });
                    $('#feedListContainer').bind('select', function (event) {
                        loadContent(event.args.index);
                    });
                    $('#mainSplitter').bind('resize', function (event) {
                        performLayout();
                    });
                };
                var performLayout = function () {
                    var panel = config.feedItemContent, upperPanel = config.feedUpperPanel,
                        listBox = config.feedListContainer, border = 0, feedContentArea = config.feedContentArea,
                        feedHeaderHeight = config.feedHeader.outerHeight(), feedItemHeaderHeight = config.feedItemHeader.height();
                    var splittersize = 5;
                    config.feedTree.jqxTree('height', $("#mainSplitter").height() - feedHeaderHeight);
                    var width = $("#mainSplitter").width() - splittersize - upperPanel.outerWidth();
                    config.feedTree.jqxTree('width', width);
                    listBox.jqxListBox('width', upperPanel.width() - border);
                    listBox.jqxListBox('height', upperPanel.height() - feedHeaderHeight - border);
                    panel.jqxPanel('beginUpdateLayout');
                    panel.jqxPanel('width', feedContentArea.width());
                    panel.jqxPanel('height', feedContentArea.height() - feedItemHeaderHeight);
                    panel.jqxPanel('resumeUpdateLayout');
                    $('#feedUpperPanel')[0].scrollTop = 0;
                };
                var getFeed = function (feed) {
                    config.currentFeed = feed;
                    feed = config.dataDir + '/' + feed + '.' + config.format;
                    loadFeed(feed);
                };
                var loadFeed = function (feed, callback) {
                    $.ajax({
                        'dataType': 'text',
                        'url': feed,
                        success: function (data) {
                            var channel = $.parseJSON(data).rss.channel;
                            config.currentFeedContent = channel.item;
                            displayFeedList(config.currentFeedContent);
                            displayFeedHeader(channel.title);
                            selectFirst();
                        }
                    });
                };
                var selectFirst = function () {
                    $('#feedListContainer').jqxListBox('selectIndex', 0);
                    loadContent(0);
                };
                var displayFeedHeader = function (header) {
                    config.feedHeader.html(header);
                };
                var displayFeedList = function (items) {
                    var headers = getHeaders(items);
                    config.feedListContainer.jqxListBox('source', headers);
                };
                var getHeaders = function (items) {
                    var headers = [], header;
                    for (var i = 0; i < items.length; i += 1) {
                        header = items[i].title;
                        headers.push(header);
                    }
                    return headers;
                };
                var loadContent = function (index) {
                    var item = config.currentFeedContent[index];
                    if (item != null) {
                        config.feedItemContent.jqxPanel('clearcontent');
                        config.feedItemContent.jqxPanel('prepend', '<div style="padding: 1px;"><span>' + item.description + '</span></div>');
                        addContentHeaderData(item);
                        config.selectedIndex = index;
                    }
                };
                var addContentHeaderData = function (item) {
                    var link = $('<a style="white-space: nowrap; margin-left: 15px;" target="_blank">Source</a>'),
                        date = $('<div style="white-space: nowrap; margin-left: 30px;">' + item.pubDate + '</div>');
                    container = $('<table height="100%"><tr><td></td><td></td></tr></table>');
                    link[0].href = item.link;
                    config.feedItemHeader.empty();
                    config.feedItemHeader.append(container);
                    container.find('td:first').append(link);
                    container.find('td:last').append(date);
                };
                var dataDir = 'data';
                var config = {
                    feeds: { 'CNN.com': 'cnn', 'Geek.com': 'geek', 'ScienceDaily': 'sciencedaily' },
                    format: 'json',
                    dataDir: dataDir,
                    feedTree: $('#jqxTree'),
                    feedListContainer: $('#feedListContainer'),
                    feedItemContent: $('#feedItemContent'),
                    feedItemHeader: $('#feedItemHeader'),
                    feedUpperPanel: $('#feedUpperPanel'),
                    feedHeader: $('#feedHeader'),
                    feedContentArea: $('#feedContentArea'),
                    selectedIndex: -1,
                    currentFeed: '',
                    currentFeedContent: {}
                };
                return {
                    init: function () {
                        createWidgets();
                        applyThemes();
                        performLayout();
                        addEventListeners();
                        getFeed('sciencedaily');
                    }
                }
            } (jQuery));
            rss.init();
            // gets the two splitbars and assigns them ids
            // first one:
            $("#mainSplitter .jqx-splitter-splitbar-vertical:eq(0)").attr("id", "123");
            // second one:
            $("#contentSplitter .jqx-splitter-splitbar-horizontal:eq(0)").attr("id", "321");
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="mainSplitter">
            <div class="splitter-panel" id="leftpanel">
                <div style="border: none;">
                    <div class="header" style="white-space: nowrap; padding: 3px; height: 20px; border: none;">
                        Feeds</div>
                    <div style="border: none; height: 100%;" id='jqxTree'>
                        <ul>
                            <li item-expanded='true' id="t1">
                                <img style='float: left; margin-right: 5px;' src='../../images/contactsIcon.png' /><span
                                    item-title="true">News and Blogs</span>
                                <ul>
                                    <li>
                                        <img style='float: left; margin-right: 5px;' src='../../images/favorites.png' /><span
                                            item-title="true">Favorites</span>
                                        <ul>
                                            <li>
                                                <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span
                                                    item-title="true">ScienceDaily</span> </li>
                                        </ul>
                                    </li>
                                    <li>
                                        <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span
                                            item-title="true">Geek.com</span> </li>
                                    <li>
                                        <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span
                                            item-title="true">CNN.com</span> </li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div style="font-family: Verdana,Arial,sans-serif; font-size: 14px; border: none;"
                class="splitter-panel" id="contentSplitter">
                <div class="splitter-panel feed-item-list-container" id="feedUpperPanel">
                    <div class="header" style="white-space: nowrap; padding: 3px; height: 20px; border: none;"
                        id="feedHeader">
                    </div>
                    <div style="border: none;" id="feedListContainer">
                    </div>
                </div>
                <div class="splitter-panel" id="feedContentArea">
                    <div class="header" style="border: none; width: 100%; height: 23px;" id="feedItemHeader">
                    </div>
                    <div style="border: none;" id="feedItemContent">
                        Select a news item to see it's content
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

January 23, 2013 at 8:53 pm content of panel only changes after dragging is completed #14110

d_l

Member

Thank you for that code.

I placed ths in my localhost server and had to amend paths and copy in the data folder.
But it works in my localhost.

I am able to monitor the properties of various elements.

Given that I can now track the position of each bar using jQuery such as $(“#mainSplitter”).position();
I’m currently working out how to use this variable to dynamically change properties of

#mainSplitter
#contentSplitter

as jqx-splitter-splitbar-vertical is moved left or right.

In my application there are several instances of vertical bar.

If I get it to work as hoped I’ll post.

January 26, 2013 at 7:46 pm content of panel only changes after dragging is completed #14229

d_l

Member

More progress …

I’ve installed this Firefox add-on .. FireQuery .. for jQuery debugging ..

https://addons.mozilla.org/en-us/firefox/addon/firequery/

Using FireBug inspect element I first inspected the splitterbar div which has id=”contentSplitter”.

Then I clicked on Console Tab .. and then JQuerify to check that jQuery is recognised.

“this page already using jQuery 1.8.2”

Now look for the command terminal panel situated to the right of jQuerify tab and underneath the search field.
Run, Clear, Copy, History buttons are at bottom of this panel.

The command terminal panel might need to be dragged to open further (in FireQuery there is no obvious separator and background colours are all white)

Then paste test jQuery code into command terminal panel …

$('#contentSplitter').bind('click', function(){alert("hello .. triggering on clicking splitterbar");});

Then click JQuerify tab to apply this jQuery script.

A message reappears “this page already using jQuery 1.8.2”

Now I try clicking on the splitterbar to fire alert but it does not work.

However if I click anywhere in the two panels separated by the splitterbar it does bring up the alert message.

Something is amiss in the jQuery code. Or the target div.

If I can fire on clicking and dragging #splitterbar I can then try running a function to sync the panels with the moving splitterbar.

January 29, 2013 at 5:00 pm content of panel only changes after dragging is completed #14303

Dimitar

Participant

Hi d_l,

Please note that there is a built-in jqxSplitter event called resizeStart. It may be useful for your purposes. Learn more about jqxSplitter events in the API Reference.

Best Regards,
Dimitar

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

January 31, 2013 at 9:52 pm content of panel only changes after dragging is completed #14461

d_l

Member

Thanks for the suggestion .. however .. I’ve gone to the demo ..

http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxsplitter/defaultfunctionality.htm?classic

and using Firefox + FireBug + FireQuery

I inspected element div=”123″ (the splitterbar)

and using FireQuery I injected this jQuery into the demo

$("div.jqx-splitter-splitbar-vertical-classic").bind("resizeStart", function(){
alert("resizeStart");
});
$("#123").bind("resizeStart", function(){
alert("resizeStart");
});

but “resizeStart” event doesn’t appear to show in FireBug console or bind to an alert message function.

February 1, 2013 at 6:54 am content of panel only changes after dragging is completed #14477

Dimitar

Participant

Hi d_l,

The event resizeStart shoud be bound to the whole widget (splitter), not to the splitbar, i.e.:

$('#jqxSplitter').on('resizeStart', function(){});

Best Regards,
Dimitar

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

Author

Posts

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

You must be logged in to reply to this topic.