update footer to be sticky

Author: JT

website/source/javascripts/docs.js

@@ -0,0 +1,47 @@
+(function(){
+
+var Init = {
+
+  start: function(){ 
+    var classname = this.hasClass(document.body, 'page-sub');
+
+    if (classname) {
+      this.addEventListeners();
+    }
+  },
+
+  hasClass: function (elem, className) {
+    return new RegExp(' ' + className + ' ').test(' ' + elem.className + ' ');
+  },
+
+  addEventListeners: function(){
+    var _this = this;
+    //console.log(document.querySelectorAll('.navbar-static-top')[0]);
+    window.addEventListener('resize', _this.resizeImage, false);
+
+    this.resizeImage();
+  },
+
+  resizeImage: function(){
+    console.log('resizeImage')
+
+    var header = document.getElementById('header'),
+        footer = document.getElementById('footer-wrap'),
+        main = document.getElementById('main-content'),
+        vp = window.innerHeight,
+        bodyHeight = document.body.clientHeight,
+        hHeight = header.clientHeight,
+        fHeight = footer.clientHeight,
+        withMinHeight = hHeight + fHeight + 830;
+
+    if(withMinHeight >  bodyHeight ){
+      var newHeight = (vp - (hHeight+fHeight)) + 'px';
+      main.style.height = newHeight;
+    }    
+  }
+
+};
+
+Init.start();
+
+})();

website/source/layouts/_footer.erb

@@ -23,6 +23,7 @@
 
 <script type="text/javascript" src="/javascripts/lib/jquery-2.0.3.min.js"></script>
 <script type="text/javascript" src="/javascripts/lib/bootstrap.min.js"></script>
+<script type="text/javascript" src="/javascripts/docs.js"></script>
 <script type="text/javascript" src="/javascripts/lib/dbg.js"></script>
 <script type="text/javascript" src="/javascripts/lib/Function.prototype.bind.js"></script>
 <script type="text/javascript" src="/javascripts/lib/Base.js"></script>

website/source/layouts/inner.erb

@@ -3,7 +3,7 @@
 	<div class="col-md-4">
 		<%= yield_content :sidebar %>
 	</div>  <!-- /col-md-4 -->
-	<div class="col-md-8" role="main">
+	<div id="main-content" class="col-md-8" role="main">
 		<div class="bs-docs-section">
 			<%= yield %>
 		</div>

website/source/stylesheets/_docs.less

@@ -17,7 +17,7 @@ body.layout-inner,
 body.layout-downloads,
 body.layout-intro{
 	background: @light-black url('../images/sidebar-wire.png') left 62px no-repeat;
-
+  
 	>.container{
 		.col-md-8[role=main]{
 			min-height: 800px;