creating a tree inside of a scrollable div

3,046 views
Skip to first unread message

Scott Conklin

unread,
Dec 16, 2010, 11:49:55 AM12/16/10
to jsTree
I am trying to create the following and am not sure if there is some
handler in jstree that can help me.

I want to load my jstree into a wrapping div of fixed width and height
(id=treewrapper )with overflow:hidden. I do not want standard
scrollbars to appear when the content is larger than th showing area
-- the containing div. instead i want to somehow be notified that the
tree has expanded beyond the size of the div and then invoke maybe a
jqueryslider or some other set of button controls to manage the
scrolling (perhaps with something like this:
http://flesler.blogspot.com/2007/10/jquerylocalscroll-10.html).

i have been unable to find some event notification from the DOM when
the overflow attribute is invoked.. does anyone know is this is
possible? i think i need this to fire to know when to show my
scrolling controls.

can JsTree tell me when it's size changes so that i can at least
compare it to the wrapper div size?

has anybody else attempted to do what i am doing and is there a better
way. I hate standard scroll bars on divs and i cannot have the tree
expand vertically and horizontally taking up real estate when i have
tree node that could be 15 or 20 node deeps.

Scott Conklin

unread,
Dec 17, 2010, 11:21:38 AM12/17/10
to jst...@googlegroups.com
can anyone offer any help or ideas?

vakata

unread,
Dec 18, 2010, 9:38:19 AM12/18/10
to jsTree
Hi,

You can bind to all events that may have modified the tree structure
(open_node, create_node, delete_node, close_node, move_node) ... all I
can think of right now.
Inside the handler simply check if the divs offsetHeight matches its
scrollHeight - if not - you need a scrollbar (or some custom code).

Kindest regards,
Ivan

Scott Conklin

unread,
Dec 18, 2010, 4:12:17 PM12/18/10
to jst...@googlegroups.com, vakata
thanks.. i sort of figured that out by playing around.
I am doing that but i want to test when scrollWidth changes
but when i open a node that goes into the hidden area, scrollWidth never
seems to change.
always seems to return the original width... any ideas?
i am doing

console.log(e.target.scrollWidth) from a bound open_node handler..

vakata

unread,
Dec 19, 2010, 3:01:56 AM12/19/10
to jsTree
Use "after_open" for the event as if you have animations enabled when
open_node fires the animation has not yet completed (or disable
animations using the core.animation config option (set it to zero))
I believe after_open is only available in the SVN though.

Kindest regards,
Ivan
Message has been deleted

GHengeveld

unread,
Dec 21, 2010, 5:07:21 PM12/21/10
to jsTree
I had written a reply before but I guess I accidentally deleted it, oh
well...

I'm working on something similar, see http://dev.ghengeveld.nl/smi/smi.html
My version uses a div with overflow:auto; -ms-overflow-x:hidden;
overflow-x:hidden;

I'm using scrollLeft() to automatically scroll sideways when nodes are
opened/closed.
I used data.rslt.obj.parents('ul').length to calculate node depth and
based the indendation size on that.

Hope it helps.
Reply all
Reply to author
Forward
0 new messages