{% extends "base" %}

{% block title %}Javascript tree with autoscroll{% endblock %}
{% block h1 %}Example 7 - autoscroll{% endblock %}

{% block previous_url %}autoescape.html{% endblock %}
{% block previous_title %}Example 6{% endblock %}
{% block next_url %}multiple_select.html{% endblock %}"
{% block next_title %}Example 8{% endblock %}

{% block contents %}
    <div id="scroll-container">
        <div id="tree1"></div>
    </div>

    <p>
        This is an example of autoscroll. The tree will scroll automatically if you drag an item outside of the tree.
        <br />
        Autoscroll will work automatically. There is no option for it.
    </p>
{% endblock %}

{% block script %}
    <script>
        $(function() {
            var $tree = $('#tree1');
            $tree.tree({
                data: ExampleData.example_data,
                dragAndDrop: true,
                autoOpen: true
            });
        });
    </script>
{% endblock %}
