[d_lMember]

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.

[d_lMember]

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.

[d_lMember]

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.

[d_lMember]

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();

[d_lMember]

Thanks for the explanation.

I found that I had missed two points:
I had not added property “showArrow: true” as you suggest and this now works.
But also the width of the fourth panel was clipping the arrows.
The arrow seems to be at an absolute location on the tab and may be clipped by parent div width.

Firefox Firebug helps in troubleshooting.
In your jqxNavigationBar online demo when I right clicked on a navigation bar
and “Inspect Element using Firebug” I saw reference jqx-expander-arrow. Hence my question.

I’ll be more careful in setting panel widths to avoid clipping.

[Author]

Posts