Using .scroll, .scrollTop or .animate in a Dialog on a Tree (li/ul list)

[PaulMcGuinness]

Hi,

I'm using a Dialog to show a 'tree', I've implemented a search function that finds and highlights the node, but I cannot work out how to ensure that it is visible (e.g. 'Scroll to') within a dialog.

I suspect this may be due to the fact that the tree is essentially li/ul combinations which don't expose an 'offset' or 'offsetTop' property within the DOM.

The search is achieved like so:

                  $('#myTree').tree('expandTo', node.target);
                  $('#myTree').tree('select', node.target)

And of course at this moment, the selected item is showing the 'tree-node-selected' class, so can be referenced via $('.tree-node-selected'), or more specifically; $('.tree-node-selected')[1] as there seems to be a ghost set of the same li/ui's created by the tree function of easyUI.

I've spent two whole days looking at this now, and am getting nowhere.

Any suggestions welcome at this point...

Cheers,

Paul

[stworthy]

Try to extend a new method 'scrollTo'.

Code:

$.extend($.fn.tree.methods,{
	scrollTo: function(jq, nodeEl){
		return jq.each(function(){
			var t = $(this);
			var n = $(nodeEl);
			var c = t.parents('div:first');
			var ntop = n.offset().top;
			var ctop = c.offset().top;
			if (ntop < ctop){
				c.scrollTop(c.scrollTop() + ntop - ctop);
			} else if (ntop + n.outerHeight() > ctop + c.height() - 18){
				c.scrollTop(c.scrollTop() + ntop + n.outerHeight() - ctop - c.height() + 18);
			}
		});
	}
});

Call 'scrollTo' method to make the target node inside the current viewport.

Code:

$('#myTree').tree('scrollTo', node.target);

[PaulMcGuinness]

Thanks for the prompt reply.

Is this going to work within a .dialog? Only I'm not getting much joy even when implementing the code directly rather than extending

Regards,

Paul