diff options
| author | Pliable Pixels <pliablepixels@gmail.com> | 2017-09-27 12:42:48 -0400 |
|---|---|---|
| committer | Pliable Pixels <pliablepixels@gmail.com> | 2017-09-27 12:42:48 -0400 |
| commit | 210e8feae2fb4842bfb2de38666e6c41671fef3c (patch) | |
| tree | cbdafa34b1a6260bb20236d7e9de9eb1b690a1c5 /www/lib/vis/examples/timeline/styling/itemClassNames.html | |
| parent | e7e7baeaad90229ccb3e0f45f4ebd77be7d79b14 (diff) | |
removed lib
Diffstat (limited to 'www/lib/vis/examples/timeline/styling/itemClassNames.html')
| -rwxr-xr-x | www/lib/vis/examples/timeline/styling/itemClassNames.html | 117 |
1 files changed, 0 insertions, 117 deletions
diff --git a/www/lib/vis/examples/timeline/styling/itemClassNames.html b/www/lib/vis/examples/timeline/styling/itemClassNames.html deleted file mode 100755 index 62433484..00000000 --- a/www/lib/vis/examples/timeline/styling/itemClassNames.html +++ /dev/null @@ -1,117 +0,0 @@ -<html> -<head> - <title>Timeline | Item class names</title> - - <script src="../../../dist/vis.js"></script> - <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" /> - - <style type="text/css"> - body, input { - font: 12pt verdana; - } - - /* custom styles for individual items, load this after vis.css/vis-timeline-graph2d.min.css */ - - .vis-item.green { - background-color: greenyellow; - border-color: green; - } - - /* create a custom sized dot at the bottom of the red item */ - .vis-item.red { - background-color: red; - border-color: darkred; - color: white; - font-family: monospace; - box-shadow: 0 0 10px gray; - } - .vis-item.vis-dot.red { - border-radius: 10px; - border-width: 10px; - } - .vis-item.vis-line.red { - border-width: 5px; - } - .vis-item.vis-box.red { - border-radius: 0; - border-width: 2px; - font-size: 24pt; - font-weight: bold; - } - - .vis-item.orange { - background-color: gold; - border-color: orange; - } - .vis-item.vis-selected.orange { - /* custom colors for selected orange items */ - background-color: orange; - border-color: orangered; - } - - .vis-item.magenta { - background-color: magenta; - border-color: purple; - color: white; - } - - /* our custom classes overrule the styles for selected events, - so lets define a new style for the selected events */ - .vis-item.vis-selected { - background-color: white; - border-color: black; - color: black; - box-shadow: 0 0 10px gray; - } - </style> - - <script src="../../googleAnalytics.js"></script> -</head> -<body> -<p>This page demonstrates the Timeline with custom css classes for individual items.</p> - -<div id="mytimeline"></div> - -<script type="text/javascript"> - // create data - // note that months are zero-based in the JavaScript Date object - var data = new vis.DataSet([ - { - 'start': new Date(2012,7,19), - 'content': 'default' - }, - { - 'start': new Date(2012,7,23), - 'content': 'green', - 'className': 'green' - }, - { - 'start': new Date(2012,7,29), - 'content': 'red', - 'className': 'red' - }, - { - 'start': new Date(2012,7,27), - 'end': new Date(2012,8,1), - 'content': 'orange', - 'className': 'orange' - }, - { - 'start': new Date(2012,8,2), - 'content': 'magenta', - 'className': 'magenta' - } - ]); - - // specify options - var options = { - editable: true - }; - - // create the timeline - var container = document.getElementById('mytimeline'); - timeline = new vis.Timeline(container, data, options); - -</script> -</body> -</html> |