Add support for sticky bar top bar.
authorMadhusudan.C.S <madhusudancs@gmail.com>
Fri, 21 Jan 2011 02:09:58 +0530 (2011-01-20)
changeset 505 a05fde6309e1
parent 504 3b78ea899168
child 506 db2edf922849
Add support for sticky bar top bar.
pytask/static/css/base.css
pytask/static/js/uberbar.js
pytask/templates/base.html
pytask/templates/templatetags/_as_uberbar.html
pytask/templatetags/browse_helpers.py
--- a/pytask/static/css/base.css	Fri Jan 21 00:27:33 2011 +0530
+++ b/pytask/static/css/base.css	Fri Jan 21 02:09:58 2011 +0530
@@ -16,7 +16,7 @@
 }
 
 #header {
-   margin-bottom: 30px;
+  margin-bottom: 30px;
   padding: 5px 0px 5px 0px;
   height: auto;
   width: auto;
@@ -304,3 +304,17 @@
   font-weight: bold;
   text-decoration: none;
 }
+
+/* Uberbar is the sticky bar at the top of the page */
+/* Code taken from http://davidwalsh.name/persistent-header-opacity#bottom */
+#uberbar  {
+  border-bottom:1px solid #eb7429;
+  background:#fc9453;
+  padding:10px 20px 0px 10px;
+  position:fixed;
+  top:0;
+  left:0;
+  z-index:2000;
+  width:98%;
+  text-align: center;
+}
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/pytask/static/js/uberbar.js	Fri Jan 21 02:09:58 2011 +0530
@@ -0,0 +1,40 @@
+/* Original code from http://davidwalsh.name/persistent-header-opacity#bottom */
+var create_uberbar = function () {
+$(document).ready(function() {
+    $("#header").css("position", "relative");
+    $("#header").css("top", "40px");
+    $("#header").css("margin-bottom", "70px");
+
+    //settings
+    var fadeSpeed = 200;
+    var fadeTo = 0.5;
+    var topDistance = 30;
+ 
+    var topbarME = function() {
+      $('#uberbar').fadeTo(fadeSpeed,1);
+    };
+
+    var topbarML = function() {
+      $('#uberbar').fadeTo(fadeSpeed,fadeTo);
+    };
+
+    var inside = false;
+    //do
+    $(window).scroll(function() {
+      position = $(window).scrollTop();
+      if(position > topDistance && !inside) {
+        //add events
+        topbarML();
+        $('#uberbar').bind('mouseenter',topbarME);
+        $('#uberbar').bind('mouseleave',topbarML);
+        inside = true;
+      }
+      else if (position < topDistance){
+        topbarME();
+        $('#uberbar').unbind('mouseenter',topbarME);
+        $('#uberbar').unbind('mouseleave',topbarML);
+        inside = false;
+      }
+    });
+  });
+}
--- a/pytask/templates/base.html	Fri Jan 21 00:27:33 2011 +0530
+++ b/pytask/templates/base.html	Fri Jan 21 02:09:58 2011 +0530
@@ -1,3 +1,5 @@
+{% load browse_helpers %}
+
 <html>
 <head>
   <title>
@@ -48,6 +50,13 @@
          layout trick in CSS. -->
     <div id="container1">
     <div id="container2">
+
+      <!-- Generate Uberbar if the uberbar_message is present -->
+      {% if uberbar_message %}
+        {% as_uberbar uberbar_message %}
+      {% endif %}
+
+
       <div id="left">
         {% include '_left_sidebar.html' %}
 
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/pytask/templates/templatetags/_as_uberbar.html	Fri Jan 21 02:09:58 2011 +0530
@@ -0,0 +1,9 @@
+<script type="text/javascript"
+    src="/pytask/static/js/uberbar.js">
+</script>
+<script type="text/javascript">
+  create_uberbar();
+</script>
+<div id="uberbar">
+  {{ message }}
+</div>
\ No newline at end of file
--- a/pytask/templatetags/browse_helpers.py	Fri Jan 21 00:27:33 2011 +0530
+++ b/pytask/templatetags/browse_helpers.py	Fri Jan 21 02:09:58 2011 +0530
@@ -36,3 +36,14 @@
       'user': user,
       'modification_datetime': creation_datatime,
       }
+
+
+@register.inclusion_tag('templatetags/_as_uberbar.html')
+def as_uberbar(message):
+    """Returns a context dictionary containing the fields necessary
+    to render the uberbar.
+    """
+
+    return {
+      'message': message,
+      }