Initial OpenECOMP Portal commit
[portal.git] / ecomp-portal-FE / client / bower_components / jqTree / _examples / 07_autoscroll.html
diff --git a/ecomp-portal-FE/client/bower_components/jqTree/_examples/07_autoscroll.html b/ecomp-portal-FE/client/bower_components/jqTree/_examples/07_autoscroll.html
new file mode 100644 (file)
index 0000000..1f3aff0
--- /dev/null
@@ -0,0 +1,49 @@
+---
+title: Javascript tree with autoscroll
+layout: page
+js: examples/autoscroll.js
+css: example.css
+---
+
+<p id="nav">
+    <a href="../06_autoescape/">&laquo; Example 6</a>
+    <a href="../08_multiple_select/" class="next">Example 8 &raquo;</a>
+</p>
+
+<h1>Example 7 - autoscroll</h1>
+
+<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>
+
+<h3>html</h3>
+
+{% highlight html %}
+<div id="scroll-container">
+    <div id="tree1"></div>
+</div>
+{% endhighlight %}
+
+<h3>css</h3>
+
+{% highlight css %}
+#scroll-container {
+  height: 200px;
+  overflow-y: scroll;
+  user-select: none;
+}
+{% endhighlight %}
+
+<h3>js</h3>
+
+{% highlight js %}
+$('#tree1').tree({
+    data: ExampleData.example_data
+});
+{% endhighlight %}