Add timeline document title

examples/data.mdown

@@ -1,5 +1,5 @@
 
-# Demo
+# Demo Timeline
 
 ----
 

examples/mockup.md

@@ -7,6 +7,7 @@
 
 <link rel="stylesheet" href="../timeline.css" type="text/css" media="screen" charset="utf-8">
 <div id="demo" class="markline">
+  <header>Static Demo</header>
   <div class="dates">
     <ol>
       <li>1983</li>

examples/timeline.md

@@ -10,7 +10,7 @@
 
 ````javascript
 seajs.use('../timeline', function(Markline) {
-  var line = new Markline("#demo", {
+  var line = new Markline("#demo", "DEMO", {
     "default": [
       {
         "name": "text",

markline.js

@@ -124,7 +124,7 @@ Markline.prototype.render = function(){
   $.get(this._datafile, function(markdown){
     var data = parse(markdown);
 
-    var timeline = new Timeline(me.element, data.data);
+    var timeline = new Timeline(me.element, data.title, data.data);
     timeline.render();
   });
 };

timeline.css

@@ -10,6 +10,16 @@
   overflow: auto;
 }
 
+.markline > header {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  margin: 0 0 10px 30px;
+  font-size: 1.3em;
+  color: #999;
+  white-space:nowrap;
+}
+
 .markline > .dates {
   position: absolute;
   top: 0;

timeline.js

@@ -6,8 +6,9 @@ var offset_top = 20;
 
 var year_width = 100;
 
-function Markline (element, data) {
+function Markline (element, title, data) {
   this._element = $(element);
+  this.title = title;
   this._data = data;
 }
 
@@ -156,12 +157,20 @@ Markline.prototype.render = function(){
   this._element.addClass("markline");
   this._element.on("scroll", function(evt){
     var that = $(this);
+
+    var title = $("> header", this);
+    title.css({
+      "left": that.scrollLeft(),
+      "bottom": -that.scrollTop()
+    });
+
     var head = $(".dates", this);
     head.css({"top": that.scrollTop()});
 
     var groups = $(".groups > label", this);
     groups.css({"left": that.scrollLeft() - 90});
   });
+  this._element.append(['<header>', this.title, '</header>'].join(""));
   this._element.append(head_dates.join(""));
   this._element.append(body_events.join(""));
   $(".dates > ol > li", this._element).height($(".events", this.element).height() + offset_top);