Updated jQuery page height detection. Updated styling: added rollover…

… functionality. #29

docs/theme/deis/layout.html

@@ -32,10 +32,10 @@
         <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
     <![endif]-->
 
-    <a class="fork" href="http://github.com/opdemand/deis"><img src="{{ pathto('_static/img/fork.png', 1) }}" alt="GitHub Fork Button"></a>
+    <a class="fork" href="http://github.com/opdemand/deis"><div class="forkImage"></div></a>
     <div class="container">
         <div class="row">
-            <div class="span3 hoop menu">
+            <div class="span3 column_calc menu">
                 <div class="nav-border top-spacing">
                     <ul class="nav nav-list menu">
                         <li><a href="/"><img class="logo" src="{{ pathto('_static/img/menu-logo.png', 1) }}" alt="deis logo"></a></li>
@@ -61,18 +61,19 @@
                     </div>
 
                     <div class="byline-menu">
-                        <a href="" ><span class="cloud-logo"></span></a>
+                        <span class="cloud-logo"></span>
                         <p>Deis is a project by<br>OpDemand</p>
                     </div>
                 </div>
             </div>
 
-            <div class="span6 hoop contents">
+            <div class="span6 column_calc contents">
               <div class="doc-content">{% block body %}{% endblock %}</div>
             </div>
 
 
-            <div class="span2 offset1 docs-sidebar hoop">
+            <div class="span2 offset1 docs-sidebar column_calc">
+              <div class="docs-border"></div>
               {{ toctree(collapse=False, maxdepth=3) }}
             </div>
 
@@ -106,138 +107,8 @@
   ga('send', 'pageview');
 
   </script>
-
-  <script>
-  $(document).ready(function() {
-    var maxHeight = -1;
-
-    //find the tallest column
-    $('.hoop').each(function() {
-      if (maxHeight < $(this).height()) {
-        maxHeight = $(this).height();
-        tallest = $(this);
-      }
-    });
-
-    //Find the margin of the tallest item. If none, set to 0
-    var tallestMargin = parseInt(tallest.css('margin-top'));
-    if(tallestMargin < 1 || isNaN(tallestMargin)) {tallestMargin = 0;}
-
-    //Set the height of each of the columns
-    $('.hoop').each(function() {
-      if(maxHeight < 923) {
-        maxHeight = 923;
-        $(this).height(maxHeight + tallestMargin);
-      } else {
-        $(this).height(maxHeight + tallestMargin);
-      }
-    });
-
-    //Remove margin from height on Docs Sidebar
-    $('.docs-sidebar').height(maxHeight - 145);
-
-    //remove the margin from the tallest column if it exists
-    //tallest.height(maxHeight - tallestMargin);
-
-    //Set the margin above the social buttons in the left-hand menu
-    if (maxHeight > 800) {
-      newMargin = maxHeight - 451 - 133 - 30 + tallestMargin;
-      $('.social-menu').css({'margin-top': newMargin})
-    } else {
-      $('.social-menu').css({'margin-top': 309})
-    }
-
-    //Remove <ul> from Releases
-    $('.toctree-l1 > a').each(function(){
-      if($(this).html() == "Releases") {
-        console.log($(this).html());
-      }
-    });
-
-    //Check URL
-    var path = window.location.href;
-    var pathName = path.split('/');
-    var num = pathName.length - 3;
-    var gettingstarted, terms, client, server, contributing;
-
-    switch(pathName[num]) {
-      case 'gettingstarted':
-        //case at Getting Started
-        $('.toctree-l1 > a').each(function(){
-          if($(this).html() == "Getting Started") {
-            $(this).parent().attr('state', 'open');
-            $(this).attr('state', 'open');
-          }
-        });
-        break;
-      case 'terms':
-        //case at Terms
-        $('.toctree-l1 > a').each(function(){
-          if($(this).html() == "Terms") {
-            $(this).parent().attr('state', 'open');
-            $(this).attr('state', 'open');
-          }
-        });
-        break;
-      case 'client':
-        //case at Client Reference
-        $('.toctree-l1 > a').each(function(){
-          if($(this).html() == "Client Reference") {
-            $(this).parent().attr('state', 'open');
-            $(this).attr('state', 'open');
-          }
-        });
-        break;
-      case 'server':
-        //case at Server Reference
-        $('.toctree-l1 > a').each(function(){
-          if($(this).html() == "Server Reference") {
-            $(this).parent().attr('state', 'open');
-            $(this).attr('state', 'open');
-          }
-        });
-        break;
-      case 'contributing':
-        //case at Contributing
-        $('.toctree-l1 > a').each(function(){
-          if($(this).html() == "Contributing") {
-            $(this).parent().attr('state', 'open');
-            $(this).attr('state', 'open');
-          }
-        });
-        break;
-      case 'releases':
-        //code this out when releases gets filled out
-        break;
-      default:
-
-    }
-
-    //Doc Sidebar: Create accordion
-    var allPanels = $('.toctree-l1 > ul');
-    allPanels.hide();
-
-    $('.toctree-l1 > a').each(function(){
-       if($(this).parent().attr('state') == 'open') {
-         $(this).attr('state', 'open');
-         $(this).next().show();
-        }
-    });
-
-    $('.toctree-l1 > a:first-child').click(function() {
-      if($(this).siblings().size() > 0 && $(this).attr('state') != 'open') {
-        allPanels.slideUp();
-        $(this).next().slideDown();
-        $('.toctree-l1 > a').attr('state', 'closed');
-        $(this).attr('state', 'open');
-        return false;
-      }
-      if ($(this).attr('state') == 'open') {
-        return false;
-      }
-    });
-  });
-  </script>
+  <script src="{{ pathto('_static/js/checkURL.js', 1) }}"></script>
+  <script src="{{ pathto('_static/js/adjustments.js', 1) }}"></script>
 
 
     </body>

web/static/js/adjustments.js

@@ -0,0 +1,59 @@
+function set_columns(is_server_reference) {
+  is_server_reference = typeof is_server_reference !== 'undefined' ? is_server_reference : false;
+  var margin = 0;
+  var maxHeight = 0;
+
+  //find the tallest column
+  $('.column_calc').each(function() {
+    if (maxHeight < $(this).height()) {
+      maxHeight = $(this).height();
+      console.log("M: " + maxHeight + " T: " + $(this).height());
+    }
+  });
+
+  //511: height of the navigation. 96: height of the footer
+  if (maxHeight > 923) {margin = maxHeight - 511 - 96;}
+  if (is_server_reference == true){margin = margin + 80;}
+  console.log("Max Height: " + maxHeight + " Margin: " + margin);
+
+  //Set the margin above the footer
+  $('.social-menu').css({'margin-top': (margin)});
+}
+
+//Close all accordions
+$('.toctree-l1 > ul').hide();
+
+//This variable checks if all accordions are closed. Used to ensure styling for Releases & FAQ page.
+var allClosed;
+
+//If a sub-item is currently being viewed, keep it's parent menu open
+$('.toctree-l1 > a').each(function(){
+  if($(this).attr('state') == 'open') {
+    $(this).next().show();
+    set_columns(); 
+    allClosed = false;
+    return false;
+  } else {
+    allClosed = true;
+  }
+});
+
+if (allClosed == true) {set_columns();}
+
+
+//If menu is closed when clicked, expand it
+$('.toctree-l1 > a').click(function() {
+
+  //Make the titles of open accordions dead links
+  if ($(this).attr('state') == 'open') {return false;}
+
+  //Clicking on a title of a closed accordion
+  if($(this).attr('state') != 'open' && $(this).siblings().size() > 0) {
+    $('.toctree-l1 > ul').hide();
+    $('.toctree-l1 > a').attr('state', '');
+    $(this).attr('state', 'open');
+    $(this).next().slideDown();
+    if($(this).html() == "Server Reference") {set_columns(true);} else {set_columns();}
+    return false;
+  }
+});