Added another example 10_limit_move_and_zoom.html

10 years ago · 6e716c1a62
--- a/HISTORY.md
+++ b/HISTORY.md
@ -9,9 +9,11 @@ http://visjs.org
 - Large refactoring of the Timeline code:
  - Simplifications in the code.
  - Performance improvements.
  - Improved layout of box-items inside groups.
 - Fixed option `autoResize` forcing a repaint of the Timeline with every check
  rather than when the Timeline is actually resized.
 - Minor bug fixes.
 - More examples added.
 ## 2014-04-18, version 0.7.4
--- a/examples/timeline/10_limit_move_and_zoom.html
+++ b/examples/timeline/10_limit_move_and_zoom.html
@ -0,0 +1,51 @@
 <!DOCTYPE HTML>
 <html>
 <head>
  <title>Timeline | Limit move and zoom</title>
  <style>
    body, html {
      font-family: arial, sans-serif;
      font-size: 11pt;
    }
  </style>
  <script src="../../dist/vis.js"></script>
  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
 <p>
  The visible range is limited in this demo:
 </p>
 <ul>
  <li>minimum visible date is limited to 2012-01-01 using option <code>min</code></li>
  <li>maximum visible date is limited to 2013-01-01 (excluded) using option <code>max</code></li>
  <li>visible zoom interval is limited to a minimum of 24 hours using option <code>zoomMin</code></li>
  <li>visible zoom interval is limited to a maximum of about 3 months using option <code>zoomMax</code></li>
 </ul>
 <div id="visualization"></div>
 <script>
  // create some items
  var items = [
    {'start': new Date(2012, 4, 25), 'content': 'First'},
    {'start': new Date(2012, 4, 26), 'content': 'Last'}
  ];
  // create visualization
  var container = document.getElementById('visualization');
  var options = {
    height: '300px',
    min: new Date(2012, 0, 1),                // lower limit of visible range
    max: new Date(2013, 0, 1),                // upper limit of visible range
    zoomMin: 1000 * 60 * 60 * 24,             // one day in milliseconds
    zoomMax: 1000 * 60 * 60 * 24 * 31 * 3     // about three months in milliseconds
  };
  // create the timeline
  var timeline = new vis.Timeline(container);
  timeline.setOptions(options);
  timeline.setItems(items);
 </script>
 </body>
 </html>
--- a/examples/timeline/index.html
+++ b/examples/timeline/index.html
@ -21,6 +21,8 @@
  <p><a href="07_custom_time_bar.html">07_custom_time_bar.html</a></p>
  <p><a href="08_edit_items.html">08_edit_items.html</a></p>
  <p><a href="09_order_groups.html">09_order_groups.html</a></p>
  <p><a href="10_limit_move_and_zoom.html">10_limit_range_and_zoom.html</a></p>
  <p><a href="requirejs/requirejs_example.html">requirejs_example.html</a></p>
 </div>