made the examples pretty :)

9 years ago · 9eb003c835
--- a/css/imagesNetwork.css
+++ b/css/imagesNetwork.css
@ -0,0 +1,22 @@
 #networkContainer {
    margin:0px;
    padding:0px;
    position:relative;
    height: 0px;
    width: 100%;
    z-index:0;
 }

 #contentContainer {
    margin:0px;
    padding:0px;
    position:relative;
    width: 100%;
    z-index:2;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
 }
--- a/dist/vis.js
+++ b/dist/vis.js
--- a/examples/network/data/dotLanguage/graphvizGallery/screenshots/fsm.png
+++ b/examples/network/data/dotLanguage/graphvizGallery/screenshots/fsm.png
--- a/examples/network/data/dotLanguage/graphvizGallery/screenshots/hello.png
+++ b/examples/network/data/dotLanguage/graphvizGallery/screenshots/hello.png
--- a/examples/network/data/dotLanguage/graphvizGallery/screenshots/softmaint.png
+++ b/examples/network/data/dotLanguage/graphvizGallery/screenshots/softmaint.png
--- a/examples/network/data/dotLanguage/graphvizGallery/screenshots/traffic_lights.png
+++ b/examples/network/data/dotLanguage/graphvizGallery/screenshots/traffic_lights.png
--- a/examples/network/index.html
+++ b/examples/network/index.html
@ -1,57 +0,0 @@
 <!doctype html>
 <html>

 <head>
  <title>vis.js | Network examples</title>

  <link href='../../docs/css/style.css' type='text/css' rel='stylesheet'>
  <script src="../googleAnalytics.js"></script>
 </head>

 <body>
 <div id="container">

  <h1>vis.js Network examples</h1>

  <p><a href="01_basic_usage.html">01_basic_usage.html</a></p>
  <p><a href="02_random_nodes.html">02_random_nodes.html</a></p>
  <p><a href="03_images.html">03_images.html</a></p>
  <p><a href="04_shapes.html">04_shapes.html</a></p>
  <p><a href="05_social_network.html">05_social_network.html</a></p>
  <p><a href="06_groups.html">06_groups.html</a></p>
  <p><a href="07_selections.html">07_selections.html</a></p>
  <p><a href="09_scaling.html">09_scaling.html</a></p>
  <p><a href="10_multiline_text.html">10_multiline_text.html</a></p>
  <p><a href="11_styling.html">11_styling.html</a></p>
  <p><a href="12_arrows.html">12_arrows.html</a></p>
  <p><a href="13_dashed_lines.html">13_dashed_lines.html</a></p>
  <p><a href="14_dot_language.html">14_dot_language.html</a></p>
  <p><a href="15_dot_language_playground.html">15_dot_language_playground.html</a></p>
  <p><a href="16_dynamic_data.html">16_dynamic_data.html</a></p>
  <p><a href="17_network_info.html">17_network_info.html</a></p>
  <p><a href="18_fully_random_nodes_clustering.html">18_fully_random_nodes_clustering.html</a></p>
  <p><a href="19_scale_free_graph_clustering.html">19_scale_free_graph_clustering.html</a></p>
  <p><a href="20_navigation.html">20_navigation.html</a></p>
  <p><a href="21_data_manipulation.html">21_data_manipulation.html</a></p>
  <p><a href="22_les_miserables.html">22_les_miserables.html</a></p>
  <p><a href="23_hierarchical_layout.html">23_hierarchical_layout.html</a></p>
  <p><a href="24_hierarchical_layout_userdefined.html">24_hierarchical_layout_userdefined.html</a></p>
  <p><a href="25_physics_configuration.html">25_physics_configuration.html</a></p>
  <p><a href="26_staticSmoothCurves.html">26_staticSmoothCurves.html</a></p>
  <p><a href="27_world_cup_network.html">27_world_cup_network.html</a></p>
  <p><a href="28_world_cup_network_performance.html">28_world_cup_network_performance.html</a></p>
  <p><a href="29_neighbourhood_highlight.html">29_neighbourhood_highlight.html</a></p>
  <p><a href="30_importing_from_gephi.html">30_importing_from_gephi.html</a></p>
  <p><a href="31_manipulation_and_localization.html">31_localization.html</a></p>
  <p><a href="32_hierarchicaLayoutMethods.html">32_hierarchicaLayoutMethods.html</a></p>
  <p><a href="33_animation.html">33_animation.html</a></p>
  <p><a href="34_circular_images.html">34_circular_images.html</a></p>
  <p><a href="35_label_stroke.html">35_label_stroke.html</a></p>
  <p><a href="36_HTML_in_Nodes.html">36_HTML_in_Nodes.html</a></p>
  <p><a href="37_label_alignment.html">37_label_alignment.html</a></p>
  <p><a href="38_node_as_icon.html">38_node_as_icon.html</a></p>
  <p><a href="graphviz/graphviz_gallery.html">graphviz_gallery.html</a></p>

 </div>
 </body>
 </html>
--- a/images/exampleScreenshots/network/1.png
+++ b/images/exampleScreenshots/network/1.png
--- a/images/exampleScreenshots/network/10.png
+++ b/images/exampleScreenshots/network/10.png
--- a/images/exampleScreenshots/network/11.png
+++ b/images/exampleScreenshots/network/11.png
--- a/images/exampleScreenshots/network/12.png
+++ b/images/exampleScreenshots/network/12.png
--- a/images/exampleScreenshots/network/13.png
+++ b/images/exampleScreenshots/network/13.png
--- a/images/exampleScreenshots/network/14.png
+++ b/images/exampleScreenshots/network/14.png
--- a/images/exampleScreenshots/network/15.png
+++ b/images/exampleScreenshots/network/15.png
--- a/images/exampleScreenshots/network/16.png
+++ b/images/exampleScreenshots/network/16.png
--- a/images/exampleScreenshots/network/17.png
+++ b/images/exampleScreenshots/network/17.png
--- a/images/exampleScreenshots/network/18.png
+++ b/images/exampleScreenshots/network/18.png
--- a/images/exampleScreenshots/network/19.png
+++ b/images/exampleScreenshots/network/19.png
--- a/images/exampleScreenshots/network/2.png
+++ b/images/exampleScreenshots/network/2.png
--- a/images/exampleScreenshots/network/20.png
+++ b/images/exampleScreenshots/network/20.png
--- a/images/exampleScreenshots/network/21.png
+++ b/images/exampleScreenshots/network/21.png
--- a/images/exampleScreenshots/network/22.png
+++ b/images/exampleScreenshots/network/22.png
--- a/images/exampleScreenshots/network/23.png
+++ b/images/exampleScreenshots/network/23.png
--- a/images/exampleScreenshots/network/24.png
+++ b/images/exampleScreenshots/network/24.png
--- a/images/exampleScreenshots/network/25.png
+++ b/images/exampleScreenshots/network/25.png
--- a/images/exampleScreenshots/network/26.png
+++ b/images/exampleScreenshots/network/26.png
--- a/images/exampleScreenshots/network/27.png
+++ b/images/exampleScreenshots/network/27.png
--- a/images/exampleScreenshots/network/28.png
+++ b/images/exampleScreenshots/network/28.png
--- a/images/exampleScreenshots/network/29.png
+++ b/images/exampleScreenshots/network/29.png
--- a/images/exampleScreenshots/network/3.png
+++ b/images/exampleScreenshots/network/3.png
--- a/images/exampleScreenshots/network/30.png
+++ b/images/exampleScreenshots/network/30.png
--- a/images/exampleScreenshots/network/31.png
+++ b/images/exampleScreenshots/network/31.png
--- a/images/exampleScreenshots/network/32.png
+++ b/images/exampleScreenshots/network/32.png
--- a/images/exampleScreenshots/network/33.png
+++ b/images/exampleScreenshots/network/33.png
--- a/images/exampleScreenshots/network/34.png
+++ b/images/exampleScreenshots/network/34.png
--- a/images/exampleScreenshots/network/35.png
+++ b/images/exampleScreenshots/network/35.png
--- a/images/exampleScreenshots/network/36.png
+++ b/images/exampleScreenshots/network/36.png
--- a/images/exampleScreenshots/network/37.png
+++ b/images/exampleScreenshots/network/37.png
--- a/images/exampleScreenshots/network/38.png
+++ b/images/exampleScreenshots/network/38.png
--- a/images/exampleScreenshots/network/4.png
+++ b/images/exampleScreenshots/network/4.png
--- a/images/exampleScreenshots/network/5.png
+++ b/images/exampleScreenshots/network/5.png
--- a/images/exampleScreenshots/network/6.png
+++ b/images/exampleScreenshots/network/6.png
--- a/images/exampleScreenshots/network/7.png
+++ b/images/exampleScreenshots/network/7.png
--- a/images/exampleScreenshots/network/8.png
+++ b/images/exampleScreenshots/network/8.png
--- a/images/exampleScreenshots/network/9.png
+++ b/images/exampleScreenshots/network/9.png
--- a/images/exampleScreenshots/network/graphviz.png
+++ b/images/exampleScreenshots/network/graphviz.png
--- a/js/imagesNetwork.js
+++ b/js/imagesNetwork.js
@ -0,0 +1,154 @@
 // some global vars
 var network;
 var connectedNodes = [];
 var largeNode = undefined;
 var NORMAL_SIZE = 60;
 var LARGE_SIZE = 60;
 var IMAGE_PATH = './images/exampleScreenshots/';

 function loadVis(SPACING) {
  // getting the sizes of the containers
  var linksContainer = document.getElementById('contentContainer');
  var networkContainer = document.getElementById('networkContainer');
  var linksContainerRect = linksContainer.getBoundingClientRect();
  var linksContainerHeight = linksContainerRect.bottom - linksContainerRect.top;

  networkContainer.style.height = (linksContainerHeight + LARGE_SIZE) + 'px';
  linksContainer.style.marginTop = '-' + (linksContainerHeight + LARGE_SIZE) + 'px';

  // constructing nodes and edges from links with class exampleLink
  var links = linksContainer.getElementsByTagName('a');
  var nodesArray = [];
  var edgesArray = [];
  var idCounter = 0;
  var firstLink = undefined;
  for (var i = 0; i < links.length; i++) {
    var link = links[i];
    if (link.className === 'exampleLink') {
      var exampleName = link.getAttribute('href').replace('.html','').replace('examples/','');

      var linkRect = link.getBoundingClientRect();
      var linkWidth = linkRect.right - linkRect.left;

      if (firstLink === undefined) {
        firstLink = link;
      }
      nodesArray.push({id:idCounter,
        x:link.offsetLeft + linkWidth,
        y:link.offsetTop,
        color:{
          background:'rgba(0,0,0,0.0)',
          border:'rgba(70,158,255,0)'
        },
        shape:'dot',
        size:2,
        fixed:true
      });
      nodesArray.push({id:idCounter + 'image',
        x:link.offsetLeft + 400 + 100 + (idCounter % 3) * SPACING,
        y:link.offsetTop,
        color:{
          border:'rgba(70,158,255,1)'
        },
        shadow:{
          size:2,
          x:0,
          y:0
        },
        shape:'image',
        image:IMAGE_PATH+(exampleName)+'.png',
        size:NORMAL_SIZE
      });
      edgesArray.push({from: idCounter, to: idCounter+'image', arrows:'from'});
      idCounter += 1;
    }
  }

  // making a dataset.
  var nodes = new vis.DataSet(nodesArray);
  var edges = new vis.DataSet(edgesArray);

  // creating a network
  var networkContainer = document.getElementById('networkContainer');
  var data = {
    nodes: nodes,
    edges: edges
  };
  var options = {
    edges:{
      color:{inherit:'both'},
      smooth:false
    },
    physics: false,
    interaction:{
      zoomView:false,
      dragView: false
    }
  };
  network = new vis.Network(networkContainer, data, options);

  // get the offset or the camera
  var firstLinkPos = {x:firstLink.offsetLeft, y:firstLink.offsetTop};
  var firstLinkRect = firstLink.getBoundingClientRect();
  var firstLinkWidth = firstLinkRect.right - firstLinkRect.left;
  var firstLinkHeight = firstLinkRect.bottom - firstLinkRect.top;
  var networkContainerRect = networkContainer.getBoundingClientRect();
  var networkContainerWidth = networkContainerRect.right - networkContainerRect.left;
  var networkContainerHeight = networkContainerRect.bottom - networkContainerRect.top;
  var ydiff = linksContainer.offsetTop - networkContainer.offsetTop;

  // move the camera
  network.moveTo({
    scale: 1,
    position: network.getPositions([0])[0],
    offset: {
      x: -0.5 * networkContainerWidth  + firstLinkPos.x + firstLinkWidth,
      y: -0.5 * networkContainerHeight + firstLinkPos.y + ydiff + 0.5 * firstLinkHeight
    },
    animation: false
  });

  // onclick handler
  linksContainer.onclick = function (event) {
    var nodeUnderCursor = network.getNodeAt({x:event.layerX, y:event.layerY+ydiff});
    if (nodeUnderCursor !== undefined) {
      var url = nodes.get(nodeUnderCursor).image.replace(IMAGE_PATH, './examples/').replace(".png",".html");
      window.location.href = url;
    }
  }

  // throttled mouse move handler
  var t0 = new Date().valueOf();
  linksContainer.onmousemove = function (event) {
    if (new Date().valueOf() - t0 > 60) {
      handleMouse(event);
      t0 = new Date().valueOf();
    }
  }


  // get a node at a position, select the node, update the dataset
  function handleMouse(event) {
    var nodeUnderCursor = network.getNodeAt({x:event.layerX, y:event.layerY+ydiff});
    if (connectedNodes.length > 0) {
      nodes.update([{id: connectedNodes[0], color: {border: 'rgba(70,158,255,0)'}}])
      connectedNodes = []
    }

    if (largeNode !== undefined) {
      nodes.update([{id: largeNode, size: NORMAL_SIZE}]);
      largeNode = undefined;
    }


    if (nodeUnderCursor !== undefined) {
      connectedNodes = network.getConnectedNodes(nodeUnderCursor);
      largeNode = nodeUnderCursor;
      nodes.update([{id: largeNode, size: LARGE_SIZE}, {id: connectedNodes[0],color: {border: 'rgba(70,158,255,1)'}}]);
      network.selectNodes([nodeUnderCursor]);
    }
    else {
      network.unselectAll();
    }
  }
 }
--- a/network_examples.html
+++ b/network_examples.html
@ -21,166 +21,13 @@
    <script src="./dist/vis.js"></script>
    <link href="./dist/vis.css" rel="stylesheet" type="text/css" />
    <link href="./css/examples.css" rel="stylesheet" type="text/css" />
    <style>
        #networkContainer {
            margin:0px;
            padding:0px;
            position:relative;
            height: 0px;
            width: 100%;
            z-index:0;
        }

        #contentContainer {
            margin:0px;
            padding:0px;
            position:relative;
            width: 100%;
            z-index:2;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
    </style>

    <script>
        var network;
        var connectedNodes = [];
        var largeNode = undefined;
        var NORMAL_SIZE = 60;
        var LARGE_SIZE = 80;

        function loadVis() {
            var linksContainer = document.getElementById('contentContainer');
            var networkContainer = document.getElementById('networkContainer');
            var linksContainerRect = linksContainer.getBoundingClientRect();
            var linksContainerHeight = linksContainerRect.bottom - linksContainerRect.top;

            networkContainer.style.height = (linksContainerHeight + LARGE_SIZE) + 'px';
            linksContainer.style.marginTop = '-' + (linksContainerHeight + LARGE_SIZE) + 'px';

            var links = linksContainer.getElementsByTagName('a');
            var nodesArray = [];
            var edgesArray = [];
            var idCounter = 0;
            var firstLink = undefined;
            for (var i = 0; i < links.length; i++) {
                var link = links[i];
                if (link.className === 'exampleLink') {
                    var exampleName = link.getAttribute('href').replace('.html','').replace('examples/','');
                    
                    var linkRect = link.getBoundingClientRect();
                    var linkWidth = linkRect.right - linkRect.left;

                    if (firstLink === undefined) {
                        firstLink = link;
                    }
                    nodesArray.push({id:idCounter,
                        x:link.offsetLeft + linkWidth,
                        y:link.offsetTop,
                        color:{
                            background:'rgba(0,0,0,0.0)',
                            border:'rgba(70,158,255,0)'
                        },
                        shape:'dot',
                        size:2,
                        fixed:true
                    });
                    nodesArray.push({id:idCounter + 'image',
                        label:exampleName,
                        x:link.offsetLeft + 400 + 100 + (idCounter % 3) * 150,
                        y:link.offsetTop,
                        color:{
                            border:'rgba(70,158,255,1)'
                        },
                        shadow:{
                            size:2,
                            x:0,
                            y:0
                        },
                        shape:'circle',
                        image:'./images/exampleScreenshots/'+(exampleName)+'.png',
                        size:NORMAL_SIZE
                    });
                    edgesArray.push({from: idCounter, to: idCounter+'image', arrows:'from'});
                    idCounter += 1;
                }
            }

            var nodes = new vis.DataSet(nodesArray);
            var edges = new vis.DataSet(edgesArray);

            var networkContainer = document.getElementById('networkContainer');
            var data = {
                nodes: nodes,
                edges: edges
            };
            var options = {
                edges:{
                    color:{inherit:'both'},
                    smooth:{enabled:false,type:'continuous'}
                },
                physics: false,
                interaction:{
                    zoomView:false,
                    dragView: false
                }
            };
            network = new vis.Network(networkContainer, data, options);

            // get the offset
            var firstLinkPos = {x:firstLink.offsetLeft, y:firstLink.offsetTop};
            var firstLinkRect = firstLink.getBoundingClientRect();
            var firstLinkWidth = firstLinkRect.right - firstLinkRect.left;
            var firstLinkHeight = firstLinkRect.bottom - firstLinkRect.top;
            var networkContainerRect = networkContainer.getBoundingClientRect();
            var networkContainerWidth = networkContainerRect.right - networkContainerRect.left;
            var networkContainerHeight = networkContainerRect.bottom - networkContainerRect.top;
            var ydiff = linksContainer.offsetTop - networkContainer.offsetTop;
            network.moveTo({
                scale: 1,
                position: network.getPositions([0])[0],
                offset: {
                    x: -0.5 * networkContainerWidth  + firstLinkPos.x + firstLinkWidth,
                    y: -0.5 * networkContainerHeight + firstLinkPos.y + ydiff + 0.5 * firstLinkHeight
                },
                animation: false
            });

            linksContainer.onclick = function (event) {
                var nodeUnderCursor = network.getNodeAt({x:event.layerX, y:event.layerY+ydiff});
                if (connectedNodes.length > 0) {
                    nodes.update([{id: connectedNodes[0], color: {border: 'rgba(70,158,255,0)'}}])
                    connectedNodes = []
                }

                if (largeNode !== undefined) {
                    nodes.update([{id: largeNode, size:NORMAL_SIZE}]);
                    largeNode = undefined;
                }


                if (nodeUnderCursor !== undefined) {
                    connectedNodes = network.getConnectedNodes(nodeUnderCursor);
                    largeNode = nodeUnderCursor;
                    nodes.update([{id:connectedNodes[0], color:{border:'rgba(70,158,255,1)'}}]);
                    nodes.update([{id:largeNode, size:LARGE_SIZE}]);
                    largeNode = nodeUnderCursor;
                    network.selectNodes([nodeUnderCursor]);
                }
                else {
                    network.unselectAll();

                }
            }
        }
    </script>
    <script src="./js/imagesNetwork.js"></script>
    <link href="./css/imagesNetwork.css" rel="stylesheet" type="text/css" />

 </head>
 <body onload="loadVis();">
 <body onload="loadVis(150);">


 <div class="navbar-wrapper">
--- a/timeline_examples.html
+++ b/timeline_examples.html
@ -22,8 +22,10 @@
    <link href="./dist/vis.css" rel="stylesheet" type="text/css" />
    <link href="./css/examples.css" rel="stylesheet" type="text/css" />

    <script src="./js/imagesNetwork.js"></script>
    <link href="./css/imagesNetwork.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
 <body onload="loadVis(220);">


 <div class="navbar-wrapper">
@ -57,61 +59,63 @@
 </div>

 <div class="contentWrapper">
    <h1>Timeline Examples</h1>
    This page contains examples which show how to use Timeline. For the documentation, please click the button below: <br><br>
    <a class="btn btn-primary" href="./docs/timeline" role="button">View docs »</a>

    <h3>basic usage</h3>
    <a class='exampleLink' href="examples/timeline/basicUsage.html">basic usage</a><br />

    <h3>interaction</h3>
    <a class='exampleLink' href="examples/timeline/interaction/animateWindow.html">animate window</a><br />
    <a class='exampleLink' href="examples/timeline/interaction/clickToUse.html">click to use</a><br />
    <a class='exampleLink' href="examples/timeline/interaction/eventListeners.html">event listeners</a><br />
    <a class='exampleLink' href="examples/timeline/interaction/limitMoveAndZoom.html">limit move and zoom of the window</a><br />
    <a class='exampleLink' href="examples/timeline/interaction/navigationMenu.html">navigation menu</a><br />
    <a class='exampleLink' href="examples/timeline/interaction/setSelection.html">set selection</a><br />

    <h3>editing</h3>
    <a class='exampleLink' href="examples/timeline/editing/customSnappingOfItems.html">custom snapping of items</a><br />
    <a class='exampleLink' href="examples/timeline/editing/editingItems.html">editing items</a><br />
    <a class='exampleLink' href="examples/timeline/editing/editingItemsCallbacks.html">editing items, manipulate using callbacks</a><br />
    <a class='exampleLink' href="examples/timeline/editing/updateDataOnEvent.html">update data on event</a><br />

    <h3>items</h3>
    <a class='exampleLink' href="examples/timeline/items/htmlContents.html">HTML contents</a><br />
    <a class='exampleLink' href="examples/timeline/items/pointItems.html">point items</a><br />
    <a class='exampleLink' href="examples/timeline/items/backgroundAreas.html">background areas</a><br />
    <a class='exampleLink' href="examples/timeline/items/backgroundAreasWithGroups.html">background areas with groups</a><br />
    <a class='exampleLink' href="examples/timeline/items/itemOrdering.html">item ordering</a><br />
    <a class='exampleLink' href="examples/timeline/items/rangeOverflowItem.html">range overflow item</a><br />

    <h3>groups</h3>
    <a class='exampleLink' href="examples/timeline/groups/groups.html">groups</a><br />
    <a class='exampleLink' href="examples/timeline/groups/groupsOrdering.html">ordering of groups</a><br />
    <a class='exampleLink' href="examples/timeline/groups/subgroups.html">subgroups</a><br />

    <h3>styling</h3>
    <a class='exampleLink' href="examples/timeline/styling/itemClassNames.html">item class names</a><br />
    <a class='exampleLink' href="examples/timeline/styling/itemTemplates.html">item templates</a><br />
    <a class='exampleLink' href="examples/timeline/styling/axisOrientation.html">axis orientation</a><br />
    <a class='exampleLink' href="examples/timeline/styling/customCss.html">custom CSS</a><br />
    <a class='exampleLink' href="examples/timeline/styling/gridStyling.html">grid styling</a><br />

    <h3>data handling</h3>
    <a class='exampleLink' href="examples/timeline/dataHandling/dataSerialization.html">data serialization</a><br />
    <a class='exampleLink' href="examples/timeline/dataHandling/loadExternalData.html">load external data</a><br />

    <h3>other</h3>
    <a class='exampleLink' href="examples/timeline/other/customTimeBars.html">custom time bars</a><br />
    <a class='exampleLink' href="examples/timeline/other/dataAttributes.html">data attributes</a><br />
    <a class='exampleLink' href="examples/timeline/other/dataAttributesAll.html">all data attributes</a><br />
    <a class='exampleLink' href="examples/timeline/other/hidingPeriods.html">hiding periods</a><br />
    <a class='exampleLink' href="examples/timeline/other/localization.html">localization</a><br />
    <a class='exampleLink' href="examples/timeline/other/performance.html">performance</a><br />
    <a class='exampleLink' href="examples/timeline/other/groupsPerformance.html">perforance of groups</a><br />
    <a class='exampleLink' href="examples/timeline/other/requirejs/requirejs_example.html">require.js example</a><br />

    <div id="networkContainer"></div>
    <div id="contentContainer">
        <h1>Timeline Examples</h1>
        This page contains examples which show how to use Timeline. For the documentation, please click the button below: <br><br>
        <a class="btn btn-primary" href="./docs/timeline" role="button">View docs »</a>

        <h3>basic usage</h3>
        <a class='exampleLink' href="examples/timeline/basicUsage.html">basic usage</a><br />

        <h3>interaction</h3>
        <a class='exampleLink' href="examples/timeline/interaction/animateWindow.html">animate window</a><br />
        <a class='exampleLink' href="examples/timeline/interaction/clickToUse.html">click to use</a><br />
        <a class='exampleLink' href="examples/timeline/interaction/eventListeners.html">event listeners</a><br />
        <a class='exampleLink' href="examples/timeline/interaction/limitMoveAndZoom.html">limit move and zoom of the window</a><br />
        <a class='exampleLink' href="examples/timeline/interaction/navigationMenu.html">navigation menu</a><br />
        <a class='exampleLink' href="examples/timeline/interaction/setSelection.html">set selection</a><br />

        <h3>editing</h3>
        <a class='exampleLink' href="examples/timeline/editing/customSnappingOfItems.html">custom snapping of items</a><br />
        <a class='exampleLink' href="examples/timeline/editing/editingItems.html">editing items</a><br />
        <a class='exampleLink' href="examples/timeline/editing/editingItemsCallbacks.html">editing items, manipulate using callbacks</a><br />
        <a class='exampleLink' href="examples/timeline/editing/updateDataOnEvent.html">update data on event</a><br />

        <h3>items</h3>
        <a class='exampleLink' href="examples/timeline/items/htmlContents.html">HTML contents</a><br />
        <a class='exampleLink' href="examples/timeline/items/pointItems.html">point items</a><br />
        <a class='exampleLink' href="examples/timeline/items/backgroundAreas.html">background areas</a><br />
        <a class='exampleLink' href="examples/timeline/items/backgroundAreasWithGroups.html">background areas with groups</a><br />
        <a class='exampleLink' href="examples/timeline/items/itemOrdering.html">item ordering</a><br />
        <a class='exampleLink' href="examples/timeline/items/rangeOverflowItem.html">range overflow item</a><br />

        <h3>groups</h3>
        <a class='exampleLink' href="examples/timeline/groups/groups.html">groups</a><br />
        <a class='exampleLink' href="examples/timeline/groups/groupsOrdering.html">ordering of groups</a><br />
        <a class='exampleLink' href="examples/timeline/groups/subgroups.html">subgroups</a><br />

        <h3>styling</h3>
        <a class='exampleLink' href="examples/timeline/styling/itemClassNames.html">item class names</a><br />
        <a class='exampleLink' href="examples/timeline/styling/itemTemplates.html">item templates</a><br />
        <a class='exampleLink' href="examples/timeline/styling/axisOrientation.html">axis orientation</a><br />
        <a class='exampleLink' href="examples/timeline/styling/customCss.html">custom CSS</a><br />
        <a class='exampleLink' href="examples/timeline/styling/gridStyling.html">grid styling</a><br />

        <h3>data handling</h3>
        <a class='exampleLink' href="examples/timeline/dataHandling/dataSerialization.html">data serialization</a><br />
        <a class='exampleLink' href="examples/timeline/dataHandling/loadExternalData.html">load external data</a><br />

        <h3>other</h3>
        <a class='exampleLink' href="examples/timeline/other/customTimeBars.html">custom time bars</a><br />
        <a class='exampleLink' href="examples/timeline/other/dataAttributes.html">data attributes</a><br />
        <a class='exampleLink' href="examples/timeline/other/dataAttributesAll.html">all data attributes</a><br />
        <a class='exampleLink' href="examples/timeline/other/hidingPeriods.html">hiding periods</a><br />
        <a class='exampleLink' href="examples/timeline/other/localization.html">localization</a><br />
        <a class='exampleLink' href="examples/timeline/other/performance.html">performance</a><br />
        <a class='exampleLink' href="examples/timeline/other/groupsPerformance.html">perforance of groups</a><br />
        <a class='exampleLink' href="examples/timeline/other/requirejs/requirejs_example.html">require.js example</a><br />
    </div>
 </div>
 <br />
 <br />