Evolution #741: Sticked column

src/Muzich/CoreBundle/Resources/public/css/main.css

@@ -237,6 +237,33 @@ div#languages:hover
   display: table-cell;
   width: 650px;
   padding-right: 30px;
+  float: left;
+  position: relative;
+}
+
+aside#sidebar
+{
+  display: table-cell;
+/*  vertical-align: top;*/
+  float: left;
+  position: relative;
+}
+
+aside#sidebar .sidebar
+{
+  width: 300px;
+/* height: 800px;
+ background-color: blue;*/
+}
+
+.top-fixed {
+    position: fixed;
+    top: 0;
+}
+
+.bottom-fixed {
+    position:fixed;
+    bottom: 0;
 }
 
 #mainbox
@@ -274,13 +301,6 @@ div#languages:hover
   border: 1px solid #d3d3d3;
 }
 
-aside#sidebar
-{
-  display: table-cell;
-  width: 300px;
-  vertical-align: top;
-}
-
 ul.elements
 {
   margin-top: 0px;

src/Muzich/CoreBundle/Resources/public/js/muzich.js

@@ -3268,6 +3268,23 @@ $(document).ready(function(){
      $('div.playlists_prompt').remove();
      return false;
   });
+  
+  /*
+   * STICK SIDEBAR
+   */
+  
+  if ($('#sidebar .sidebar').height() < $('#content .content').height() &&
+    $('#sidebar .sidebar').height() > $(window).height())
+  {
+    $('#content').stickySidebar();
+  }
+  else
+  {
+    $('#sidebar .sidebar').css('padding-bottom', '155px');
+    $("#sidebar .sidebar").sticky({topSpacing:0});
+  }
+  
+  
    
 });
 

src/Muzich/CoreBundle/Resources/views/Layout/head_js.html.twig

@@ -8,6 +8,8 @@
   'js/jConfirmAction/jconfirmaction.jquery.js'
   'js/jquery.scrollTo.min.js'
   'js/jquery.aSimpleTour.js'
+  'js/jquery.stickysidebar.js'
+  'js/jquery.sticky.js'
   '@MuzichCoreBundle/Resources/public/js/TagPrompt.js'
   '@MuzichCoreBundle/Resources/public/js/player/*'
   '@MuzichCoreBundle/Resources/public/js/play2.js'

src/Muzich/CoreBundle/Resources/views/Layout/side.html.twig

@@ -22,10 +22,11 @@
   {% endif %}
 
 {% else %}
-
-  <div class="side_margin_top"></div>
   
   {% if display_help %}
+    
+    <div class="side_margin_top"></div>
+    
     <div class="center">
       <a id="know_more" class="helpbox button" href="{{ path('helpbox_bootstrap', {'ressource_id':'know_more'}) }}" title="{{ 'help.know_more'|trans({}, 'navigationui') }}">
         {{ 'help.know_more'|trans({}, 'navigationui') }}

src/Muzich/CoreBundle/Resources/views/layout.html.twig

@@ -28,7 +28,7 @@
       
       <div id="content">
         
-        <div id="main">
+        <div id="main" class="content">
           
           <div id="mainbox" class="nicebox {% block mainbox_classes %}{% endblock %}">
             {% block main_content %}{% endblock %}
@@ -38,9 +38,11 @@
         </div>
           
         <aside id="sidebar">
-          {% block sidebar_top %}{% endblock %}
-          {% include 'MuzichCoreBundle:Layout:side.html.twig' %}
-          {% block sidebar_bottom %}{% endblock %}
+          <div class="sidebar">
+            {% block sidebar_top %}{% endblock %}
+            {% include 'MuzichCoreBundle:Layout:side.html.twig' %}
+            {% block sidebar_bottom %}{% endblock %}
+          </div>
         </aside>
           
       </div>

web/js/jquery.sticky.js

@@ -0,0 +1,129 @@
+// Sticky Plugin v1.0.0 for jQuery
+// =============
+// Author: Anthony Garand
+// Improvements by German M. Bravo (Kronuz) and Ruud Kamphuis (ruudk)
+// Improvements by Leonardo C. Daronco (daronco)
+// Created: 2/14/2011
+// Date: 2/12/2012
+// Website: http://labs.anthonygarand.com/sticky
+// Description: Makes an element on the page stick on the screen as you scroll
+//       It will only set the 'top' and 'position' of your element, you
+//       might need to adjust the width in some cases.
+
+(function($) {
+  var defaults = {
+      topSpacing: 0,
+      bottomSpacing: 0,
+      className: 'is-sticky',
+      wrapperClassName: 'sticky-wrapper',
+      center: false,
+      getWidthFrom: ''
+    },
+    $window = $(window),
+    $document = $(document),
+    sticked = [],
+    windowHeight = $window.height(),
+    scroller = function() {
+      var scrollTop = $window.scrollTop(),
+        documentHeight = $document.height(),
+        dwh = documentHeight - windowHeight,
+        extra = (scrollTop > dwh) ? dwh - scrollTop : 0;
+
+      for (var i = 0; i < sticked.length; i++) {
+        var s = sticked[i],
+          elementTop = s.stickyWrapper.offset().top,
+          etse = elementTop - s.topSpacing - extra;
+
+        if (scrollTop <= etse) {
+          if (s.currentTop !== null) {
+            s.stickyElement
+              .css('position', '')
+              .css('top', '');
+            s.stickyElement.parent().removeClass(s.className);
+            s.currentTop = null;
+          }
+        }
+        else {
+          var newTop = documentHeight - s.stickyElement.outerHeight()
+            - s.topSpacing - s.bottomSpacing - scrollTop - extra;
+          if (newTop < 0) {
+            newTop = newTop + s.topSpacing;
+          } else {
+            newTop = s.topSpacing;
+          }
+          if (s.currentTop != newTop) {
+            s.stickyElement
+              .css('position', 'fixed')
+              .css('top', newTop);
+
+            if (typeof s.getWidthFrom !== 'undefined') {
+              s.stickyElement.css('width', $(s.getWidthFrom).width());
+            }
+
+            s.stickyElement.parent().addClass(s.className);
+            s.currentTop = newTop;
+          }
+        }
+      }
+    },
+    resizer = function() {
+      windowHeight = $window.height();
+    },
+    methods = {
+      init: function(options) {
+        var o = $.extend(defaults, options);
+        return this.each(function() {
+          var stickyElement = $(this);
+
+          var stickyId = stickyElement.attr('id');
+          var wrapper = $('<div></div>')
+            .attr('id', stickyId + '-sticky-wrapper')
+            .addClass(o.wrapperClassName);
+          stickyElement.wrapAll(wrapper);
+
+          if (o.center) {
+            stickyElement.parent().css({width:stickyElement.outerWidth(),marginLeft:"auto",marginRight:"auto"});
+          }
+
+          if (stickyElement.css("float") == "right") {
+            stickyElement.css({"float":"none"}).parent().css({"float":"right"});
+          }
+
+          var stickyWrapper = stickyElement.parent();
+          stickyWrapper.css('height', stickyElement.outerHeight());
+          sticked.push({
+            topSpacing: o.topSpacing,
+            bottomSpacing: o.bottomSpacing,
+            stickyElement: stickyElement,
+            currentTop: null,
+            stickyWrapper: stickyWrapper,
+            className: o.className,
+            getWidthFrom: o.getWidthFrom
+          });
+        });
+      },
+      update: scroller
+    };
+
+  // should be more efficient than using $window.scroll(scroller) and $window.resize(resizer):
+  if (window.addEventListener) {
+    window.addEventListener('scroll', scroller, false);
+    window.addEventListener('resize', resizer, false);
+  } else if (window.attachEvent) {
+    window.attachEvent('onscroll', scroller);
+    window.attachEvent('onresize', resizer);
+  }
+
+  $.fn.sticky = function(method) {
+    if (methods[method]) {
+      return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
+    } else if (typeof method === 'object' || !method ) {
+      return methods.init.apply( this, arguments );
+    } else {
+      $.error('Method ' + method + ' does not exist on jQuery.sticky');
+    }
+  };
+  $(function() {
+    setTimeout(scroller, 0);
+  });
+})(jQuery);

web/js/jquery.stickysidebar.js

@@ -0,0 +1,153 @@
+/*jslint browser:true */
+/*global jQuery*/
+
+(function ($, window, undefined) {
+    'use strict';
+
+    var pluginName = 'stickySidebar',
+        document = window.document,
+        defaults = {
+            sidebar: '.sidebar',
+            content: '.content',
+            tolerance: 110
+        },
+        clearPosition = {
+            position: '',
+            top: ''
+        };
+
+    function Plugin(element, options) {
+        this.options = $.extend({}, defaults, options);
+
+        this.defaults = defaults;
+        this.name = pluginName;
+
+        this.root = $(element);
+
+        this.init();
+    }
+
+    Plugin.prototype.init = function () {
+        var self = this;
+
+        this.sidebar = this.root.find(this.options.sidebar);
+        this.content = this.root.find(this.options.content);
+        this.lastScrollTop = 0;
+
+        if (this.canBeSticky() === true) {
+            $(window).bind('scroll.sticky_sidebar', function () {
+                self.setScrollDirection()
+                    .setBoundaries()
+                    .positionSidebar();
+            });
+        }
+    };
+
+    Plugin.prototype.canBeSticky = function () {
+        return this.sidebar.height() < this.content.height() &&
+               this.sidebar.height() > $(window).height();
+    };
+
+    Plugin.prototype.setBoundaries = function () {
+        var contentTop = this.content.offset().top,
+            contentHeight = this.content.outerHeight();
+        this.boundaries = {
+            contentTop: contentTop,
+            contentBottom: contentTop + contentHeight,
+            contentHeight: contentHeight,
+            sidebarHeight: this.sidebar.outerHeight(),
+            windowHeight: $(window).height()
+        };
+        return this;
+    };
+
+    Plugin.prototype.positionSidebar = function () {
+        if (this.lastScrollTop > this.boundaries.contentTop &&
+                this.lastScrollTop < this.boundaries.contentBottom) {
+            this[this.scrollDirection === 'DOWN' ? 'scrollDown' : 'scrollUp']();
+        } else if (this.lastScrollTop < this.boundaries.contentTop) {
+            this.sidebar.css('top', '').removeClass('top-fixed');
+        }
+        return this;
+    };
+
+    Plugin.prototype.scrollDown = function () {
+        var windowScroll = this.lastScrollTop + this.boundaries.windowHeight,
+            sidebarOffsetTop;
+        if (this.sidebar.hasClass('scrolling-up')) {
+            this.sidebar.removeClass('scrolling-up')
+                .addClass('scrolling-down');
+        } else if (this.sidebar.hasClass('top-fixed')) {
+            sidebarOffsetTop = this.sidebar.offset().top - this.boundaries.contentTop;
+            this.sidebar.removeClass('top-fixed')
+                .css({
+                    position: 'absolute',
+                    top: sidebarOffsetTop
+                })
+                .addClass('scrolling-down');
+        }
+        if (this.sidebar.hasClass('scrolling-down')) {
+            if (windowScroll > this.sidebar.offset().top + this.boundaries.sidebarHeight) {
+                this.sidebar.css(clearPosition)
+                            .addClass('bottom-fixed')
+                            .removeClass('scrolling-down');
+            }
+        } else {
+            if (windowScroll > this.boundaries.contentBottom) {
+                this.sidebar.removeClass('bottom-fixed').css({
+                    position: 'absolute',
+                    top: this.boundaries.contentHeight - this.boundaries.sidebarHeight
+                });
+            } else if (windowScroll + this.options.tolerance >
+                       this.boundaries.sidebarHeight + this.boundaries.contentTop) {
+                this.sidebar.css(clearPosition)
+                            .removeClass('top-fixed')
+                            .addClass('bottom-fixed');
+            }
+        }
+    };
+
+    Plugin.prototype.scrollUp = function () {
+        if (this.sidebar.hasClass('scrolling-down')) {
+            this.sidebar.removeClass('scrolling-down')
+                        .addClass('scrolling-up');
+        } else if (this.sidebar.hasClass('bottom-fixed')) {
+            this.sidebar.css({
+                position: 'absolute',
+                top: this.sidebar.offset().top - this.boundaries.contentTop
+            }).removeClass('bottom-fixed').addClass('scrolling-up');
+        }
+        if (this.sidebar.hasClass('scrolling-up')) {
+            if (this.lastScrollTop < this.sidebar.offset().top) {
+                this.sidebar.css(clearPosition)
+                            .addClass('top-fixed')
+                            .removeClass('scrolling-up');
+            }
+        } else {
+            if (this.lastScrollTop < this.boundaries.contentTop) {
+                this.sidebar.css('position', '').removeClass('top-fixed');
+            } else if (this.lastScrollTop - this.options.tolerance <
+                       this.boundaries.contentBottom - this.boundaries.sidebarHeight) {
+                this.sidebar.css(clearPosition)
+                            .removeClass('bottom-fixed')
+                            .addClass('top-fixed');
+            }
+        }
+    };
+
+    Plugin.prototype.setScrollDirection = function () {
+        var scrollTop = $(window).scrollTop();
+        this.scrollDirection = (scrollTop > this.lastScrollTop ? 'DOWN' : 'UP');
+        this.lastScrollTop = scrollTop;
+        return this;
+    };
+
+    $.fn[pluginName] = function (options) {
+        return this.each(function () {
+            if (!$.data(this, 'plugin_' + pluginName)) {
+                $.data(this, 'plugin_' + pluginName, new Plugin(this, options));
+            }
+        });
+    };
+
+}(jQuery, window));