summaryrefslogtreecommitdiff
path: root/www/lib/vis/examples/timeline/styling/itemClassNames.html
diff options
context:
space:
mode:
Diffstat (limited to 'www/lib/vis/examples/timeline/styling/itemClassNames.html')
-rwxr-xr-xwww/lib/vis/examples/timeline/styling/itemClassNames.html117
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>