API tools faq
paste
Advertisement
maurobaraldi

JS Timeline Example

maurobaraldi
Apr 26th, 2012
68
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 3.74 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2.     <head>
  3.         <title>SIMILE Widgets | Timeline</title>
  4.         <link rel='stylesheet' href='http://www.simile-widgets.org/timeline/styles.css' type='text/css' />
  5.         <link rel="alternate" type="application/rdf+xml" href="doap.rdf" />
  6.         <script src="http://www.simile-widgets.org/timeline/api/timeline-api.js" type="text/javascript"></script>
  7.         <script>
  8.             var tl;
  9.  
  10.             function onLoad() {
  11.            
  12.                 // Timeline event source object
  13.                 var eventSource = new Timeline.DefaultEventSource();
  14.                
  15.                 // Time divisions on the screen (zones)            
  16.                 var zones = [
  17.                     { start:   "Thu Apr 12 2012 00:00:00 GMT-0300",
  18.                       end:     "Fri Apr 20 2012 00:00:00 GMT-0300",
  19.                       magnify: 10,
  20.                       unit:    Timeline.DateTime.DAY,
  21.                       //multiple: 5
  22.                     },
  23.                 ];
  24.  
  25.                 var zones2 = [
  26.                     { start:   "Thu Apr 12 2012 00:00:00 GMT-0300",
  27.                       end:     "Fri Apr 20 2012 00:00:00 GMT-0300",
  28.                       magnify: 10,
  29.                       unit:    Timeline.DateTime.WEEK,
  30.                       //multiple: 5
  31.                     },
  32.                 ];
  33.                
  34.                 // Create timeline theme object
  35.                 var theme = Timeline.ClassicTheme.create();
  36.                 theme.event.bubble.width = 250;
  37.                
  38.                 // Center on screen - datetime.now()
  39.                 var date = "Fri Apr 01 2012 13:00:00 GMT-0600"
  40.                 var bandInfos = [
  41.                     Timeline.createHotZoneBandInfo({
  42.                         width:          "80%",  // Altura da linha o.O
  43.                         intervalUnit:   Timeline.DateTime.WEEK,
  44.                         intervalPixels: 200,
  45.                         zones:          zones,
  46.                         eventSource:    eventSource,
  47.                         date:           date,
  48.                         timeZone:       -3  // Brasil - GMT -3
  49.                         //theme:          theme
  50.                     }),
  51.                    
  52.                     Timeline.createHotZoneBandInfo({
  53.                         width:          "20%",
  54.                         intervalUnit:   Timeline.DateTime.MONTH,
  55.                         intervalPixels: 200,
  56.                         zones:          zones2,
  57.                         eventSource:    eventSource,
  58.                         date:           date,
  59.                         timeZone:       -3,
  60.                         overview:       true
  61.                         // theme:          theme
  62.                         })
  63.                     ];
  64.                    
  65.                     bandInfos[1].syncWith = 0;
  66.                     bandInfos[1].highlight = true;
  67.                    
  68.                     tl = Timeline.create(document.getElementById("tl"), bandInfos, Timeline.HORIZONTAL);
  69.                     tl.loadXML("./next.xml", function(xml, url) { eventSource.loadXML(xml, url); });
  70.             }
  71.            
  72.             var resizeTimerID = null;
  73.            
  74.             function onResize() {
  75.                 if (resizeTimerID == null) {
  76.                     resizeTimerID = window.setTimeout(function() {
  77.                         resizeTimerID = null;
  78.                         tl.layout();
  79.                     }, 500);
  80.                 }
  81.             }
  82.            
  83.             function themeSwitch(){
  84.                 var timeline = document.getElementById('tl');      
  85.                 timeline.className = (timeline.className.indexOf('dark-theme') != -1) ? timeline.className.replace('dark-theme', '') : timeline.className += ' dark-theme';
  86.             }
  87.         </script>
  88.     </head>
  89.     <body onload="onLoad();" onresize="onResize();">
  90.         <div id="content">
  91.             <table class="spaced-table" width="100%">
  92.                 <tr>
  93.                     <td style="font-size: 150%; color: #888; width: 30em">
  94.                         <p>Cliente: {{cliente.name}}</p>
  95.                     </td>
  96.                 </tr>
  97.             </table>
  98.             <div id="tl" class="timeline-default" style="height: 350px; margin-top: 20px; margin-bottom: 50px;"></div>
  99.         </div>
  100.         <div id="footer">Copyright &copy; <a href="http://web.mit.edu/">Massachusetts Institute of Technology</a> and Contributors 2006-2009 ~ Some rights reserved</div>
  101.     </body>
  102. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!