scrolling the tree

[ChrisR]

Hi Ivan,

If you will be here on the group, I would ask you, how can I make
something like this:
I would like to have last selected/hovered node keep in the visible
area of the tree any time selection/hovering happens. It could be
especially helpful, when using arrow keys to traverse the tree.

Maybe there should be some additional function in jsTree, which could
allow to scroll the tree, with argument, which can have values like:
'up', 'pageUp', 'down', 'pageDown', 'top', 'bottom', etc. or "a DOM
node, jQuery node or selector pointing to an element within the tree".
'up' could scroll up the tree of one element, same with 'down', the
rest are easy to understand, and if the argument is a node, then the
tree could be scrolled, to make that node visible. But they are only
propositions, not petitions ;)

Best regards,
ChrisRaven

[vakata]

Thank you for the ideas - I will see what I can do!

Kindest regards,
Ivan

[ChrisRaven]

Hi Ivan,

I've noticed, that you've added the scrolling to the last revision.
Thanks :)
But, there is a little problem: in 'select_node' function you are
testing, if event occurs and only then fire the '_fix_scroll'
function. But event occurs here only, if it was passed during
invocation of the 'select_node' as the third argument. In
documentation you've written, that the third argument is used
internally, so I didn't use it in my code. So, when somebody
calls .select_node(node); (e.g. when using the hotkeys plugin) the
event will be 'undefined' and so the '_fix_scroll' won't be triggered.
I'm not sure, why you are testing for the event inside the
'select_node', when not testing in 'hover_node', but there is probably
some reason ;). So I suggest to make fix in docs or remove the testing
condition in 'select_node' or change it some way ;)

Second thing: when tree has also horizontal scrollbar and if select
(programatically, of course ;) ) some node, below the visibility area,
then the tree is scrolled, but the selected node is behind the
horizontal scroll bar. It happens at least in FF 3.6, probably in
others browsers too.
Of course, width (height) of the scrollbar can be different, depend on
OS and user settings, but I've found someday little function to
calculate the width if you need it:

function scrollbarWidth() {
// source: http://jdsharp.us/jQuery/minute/calculate-scrollbar-width.php
var
div, w1, w2;

div = $('<div style="width: 50px; height: 50px; overflow: hidden;
position: absolute; top: -200px; left: -200px;"><div style="height:
100px;"></div>');
$('body').append(div);
w1 = $('div', div).innerWidth();
div.css('overflow-y', 'scroll');
w2 = $('div', div).innerWidth();
$(div).remove();
return navigator.userAgent.toLowerCase().indexOf('chrome') > -1 ||
navigator.userAgent.toLowerCase().indexOf('safari') > -1
? 17
: w1 - w2;
}
I've changed it a little, to work with Chrome and Safari (for those
browsers script doesn't calculate the width, but returns '17', which
is default for Win XP).

Also, there would be nice, if you wrote, what is the default value for
every argument in every function, which is not mandatory.


Best regards,
ChrisRaven

[vakata]

Hi Chris,

Thanks for the tips! I just fixed the scrollbar issue using this code:
var scrollbar_width, e1, e2;
$(function() {
if (/msie/.test(navigator.userAgent.toLowerCase())) {
e1 = $('<textarea cols="10" rows="2"></textarea>').css({ position:
'absolute', top: -1000, left: 0 }).appendTo('body');
e2 = $('<textarea cols="10" rows="2" style="overflow: hidden;"></
textarea>').css({ position: 'absolute', top: -1000, left:
0 }).appendTo('body');
scrollbar_width = e1.width() - e2.width();
e1.add(e2).remove();
}
else {
e1 = $('<div />').css({ width: 100, height: 100, overflow: 'auto',
position: 'absolute', top: -1000, left: 0 })
.prependTo('body').append('<div />').find('div').css({ width:
'100%', height: 200 });
scrollbar_width = 100 - e1.width();
e1.parent().remove();
}
});

In my tests it calculated nicely in every browser (the author is
Brandon Aaron).

As for the "e" check - I removed it. Maybe I had in mind that the
developer should be able to quitly select nodes without triggering a
scroll, but I guess that is not really necessary. If there is a
request about it I will either make a param or a setting for it.

After Monday I will start working on the docs. My plans include a
searchable tree of plugins with their functions and settings, each on
its own page, with its own demo. Aside from that I will try and
document all events, with the data that is passed to the event (again
in the demos).

Best regards,
Ivan

[ChrisRaven]

Thanks again for fixing, and thanks for the snippet. I will copy it
(and make tests ofc ;) )to my code right away :)
I also thought, that scrolling could work horizontally, e.g.:
If someone scrolls the tree to the left, and then uses select_node()
function (e.g. by pressing left arrow key) then if node isn't fully
visible or not visible at all (is outside the left margin), then the
tree is scrolled right to have the node's icon left aligned with left
side of the container.
Similar thing can happen with right side (e.g. if the tree has many
levels of nested nodes), but it could be more problematic (if node if
partially visible then scroll or not; if node isn't visible at all
then scroll to display only icon (aligned to the right side of the
container) or to have visible all the title; what to do, if node is
too big to fit the width of the container, etc.).
And those two problems could be even more problematic, when the rtl
plugin is used.
So, implenting the horizontal scrolling might be difficult.
Personally, I'm happy with the current version, and those features
above are only prepositions to think about ;)
As for the docs: Making it as a tree sounds great and it's source code
could be additional example of how to use the tree :)

Best regards,
ChrisRaven

> > š var
> > š š div, w1, w2;
>
> > š div = $('<div style="width: 50px; height: 50px; overflow: hidden;

> > position: absolute; top: -200px; left: -200px;"><div style="height:
> > 100px;"></div>');

> > š $('body').append(div);
> > š w1 = $('div', div).innerWidth();
> > š div.css('overflow-y', 'scroll');
> > š w2 = $('div', div).innerWidth();
> > š $(div).remove();
> > š return navigator.userAgent.toLowerCase().indexOf('chrome') > -1 ||
> > š š š š šnavigator.userAgent.toLowerCase().indexOf('safari') > -1
> > š š š š š? 17
> > š š š š š: w1 - w2;}

>
> > I've changed it a little, to work with Chrome and Safari (for those
> > browsers script doesn't calculate the width, but returns '17', which
> > is default for Win XP).
>
> > Also, there would be nice, if you wrote, what is the default value for
> > every argument in every function, which is not mandatory.
>
> > Best regards,
> > ChrisRaven
>
> > On 10 Sie, 16:36, vakata <ivan.bozha...@gmail.com> wrote:
>
> > > Thank you for the ideas - I will see what I can do!
>
> > > Kindest regards,
> > > Ivan
>

[vakata]

Thanks for the idea, I thought about the horizontal scroll too, but
once I got to the same problems (when to scroll & how much to scroll)
I thought I'd just leave it like that for the time being :)
When I get some time, I MIGHT think of adding this ;)
Best regards,
Ivan