Bootstrap Snippet Fullheight Portlet with Slimscroll using HTML CSS Bootstrap jQuery

/* CSS Document */ html, body{ height:100%;} body { padding-top: 55px;padding-bottom: 28px; background: #cccccc; overflow: hidden} .font-white{color:white;} .font-lightgrey{color:#777777;} .font-xs{ font-size:11px;} .no-margin{ margin:0px!important;} .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { padding-left: 5px; padding-right: 5px; } /*Portlet*/ .portlet { border-radius: 4px; margin-bottom: 25px; margin-top: 0; padding: 0; } .portlet > .portlet-title { border-bottom: 1px solid #eee; border-radius: 4px 4px 0 0; margin-bottom: 10px; min-height: 41px; padding: 0; } .portlet > .portlet-title > .caption { display: inline-block; float: left; font-size: 18px; line-height: 18px; padding: 10px 0; } .portlet > .portlet-title > .caption > i { color: #666; display: inline-block; float: left; font-size: 13px; margin-right: 5px; margin-top: 4px; } .portlet > .portlet-title > .caption > .caption-helper { color: #9eacb4; font-size: 13px; font-weight: 400; line-height: 13px; margin: 0; padding: 0; } .portlet > .portlet-title > .actions { display: inline-block; float: right; padding: 6px 0; } .portlet > .portlet-title > .actions > .btn-group > .btn.btn-default, .portlet > .portlet-title > .actions > .btn-group > .btn.btn-sm.btn-default, .portlet > .portlet-title > .actions > .btn.btn-default, .portlet > .portlet-title > .actions > .btn.btn-sm.btn-default { padding: 3px 9px; } .portlet > .portlet-title > .actions > .btn, .portlet > .portlet-title > .actions > .btn-group > .btn, .portlet > .portlet-title > .actions > .btn-group > .btn.btn-sm, .portlet > .portlet-title > .actions > .btn.btn-sm { font-size: 13px; line-height: 1.5; padding: 4px 10px; } .portlet > .portlet-body { border-radius: 0 0 4px 4px; clear: both; } /*Portlet LIGHT*/ .portlet.light { background-color: #fff; padding: 12px 20px 15px; } .portlet.light > .portlet-title { min-height: 48px; padding: 0; } .portlet.light > .portlet-title > .caption { color: #666; padding: 10px 0; } .portlet.light > .portlet-title > .caption > i { color: #777; font-size: 15px; font-weight: 300; margin-top: 3px; } .portlet.light > .portlet-title > .caption > .caption-subject { font-size: 16px; } .portlet.light > .portlet-title > .actions { padding: 6px 0 14px; } .portlet.light > .portlet-title > .actions .btn-icon-only { height: 27px; width: 27px; } .portlet.light > .portlet-title > .actions .btn-default { color: #666; } .outer { bottom: 10px; padding-right: 15px; position: absolute; top: 65px; } /*Full height css*/ .fullheight{ height:100%} .fullheightinn{ bottom: 0; overflow-x: hidden; overflow-y: auto; position: absolute; top: 40px; width: 100%; z-index: 0;}

$(function() { // check if container has slimScroll, if yes remove it //if($('.slimtest').parent('.slimScrollDiv').size() > 0) //$('.slimtest').parent().replaceWith($('.abc')); // now (re)assign slimScroll $('.slimtest').slimScroll({ height: '200px' //size: '5px' }); }); /*! Copyright (c) 2011 Piotr Rochala (http://rocha.la) * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses. * * Version: 0.3.0 * */ (function($) { jQuery.fn.extend({ slimScroll: function(o) { var ops = o; //do it for every element that matches selector this.each(function(){ var isOverPanel, isOverBar, isDragg, queueHide, barHeight, divS = '<div></div>', minBarHeight = 30, releaseScroll = false, o = ops || {}, wheelStep = parseInt(o.wheelStep) || 20, cwidth = o.width || '100%', cheight = o.height || 'auto', size = o.size || '7px', color = o.color || '#000', position = o.position || 'right', distance = o.distance || '10px', start = o.start || 'top', opacity = o.opacity || .4, alwaysVisible = false || o.alwaysVisible === false, railVisible = o.railVisible || true, railColor = o.railColor || '#333', railOpacity = o.railOpacity || 0.2; //used in event handlers and for better minification var me = $(this); var parent = me.parent(); //wrap content var wrapper = me.parent().addClass('slimScrollDiv'); //update style for the div parent.css({ overflow: 'hidden', }); me.css({ overflow: 'hidden', height:'100%' }); //create scrollbar rail var rail = $(divS).css({ width: size, height: '100%', position: 'absolute', top: 0, display: (alwaysVisible && railVisible) ? 'block' : 'none', 'border-radius': size, background: railColor, opacity: railOpacity, zIndex: 90 }); //create scrollbar var bar = $(divS).attr({ 'class': 'slimScrollBar ', style: 'border-radius: ' + size }).css({ background: color, width: size, position: 'absolute', top: 0, opacity: opacity, display: alwaysVisible ? 'block' : 'none', BorderRadius: size, MozBorderRadius: size, WebkitBorderRadius: size, zIndex: 99 }); //set position var posCss = (position == 'right') ? { right: distance } : { left: distance }; rail.css(posCss); bar.css(posCss); //wrap it //me.wrap(wrapper); //append to parent div parent.append(bar); parent.append(rail); //make it draggable bar.draggable({ axis: 'y', containment: 'parent', start: function() { isDragg = true; }, stop: function() { isDragg = false; hideBar(); }, drag: function(e) { //scroll content scrollContent(0, $(this).position().top, false); } }); //on rail over rail.hover(function(){ showBar(); }, function(){ hideBar(); }); //on bar over bar.hover(function(){ isOverBar = true; }, function(){ isOverBar = false; }); //show on parent mouseover me.hover(function(){ isOverPanel = true; showBar(); hideBar(); }, function(){ isOverPanel = false; hideBar(); }); var _onWheel = function(e) { //use mouse wheel only when mouse is over if (!isOverPanel) { return; } var e = e || window.event; var delta = 0; if (e.wheelDelta) { delta = -e.wheelDelta/120; } if (e.detail) { delta = e.detail / 3; } //scroll content scrollContent(delta, true); //stop window scroll if (e.preventDefault && !releaseScroll) { e.preventDefault(); } if (!releaseScroll) { e.returnValue = false; } } var scrollContent = function(y, isWheel, isJump) { var delta = y; if (isWheel) { //move bar with mouse wheel delta = bar.position().top + y * wheelStep; //move bar, make sure it doesn't go out delta = Math.max(delta, 0); var maxTop = parent.outerHeight() - bar.outerHeight(); delta = Math.min(delta, maxTop); //scroll the scrollbar bar.css({ top: delta + 'px' }); } //calculate actual scroll amount var percentScroll = parseInt(bar.position().top) / (parent.outerHeight() - bar.outerHeight()); delta = percentScroll * (me[0].scrollHeight - parent.outerHeight()); if (isJump) { delta = y; var offsetTop = delta / me[0].scrollHeight * parent.outerHeight(); bar.css({ top: offsetTop + 'px' }); } //scroll content me.scrollTop(delta); //ensure bar is visible showBar(); } var attachWheel = function() { if (window.addEventListener) { this.addEventListener('DOMMouseScroll', _onWheel, false ); this.addEventListener('mousewheel', _onWheel, false ); } else { document.attachEvent("onmousewheel", _onWheel) } } //attach scroll events attachWheel(); var getBarHeight = function() { //calculate scrollbar height and make sure it is not too small barHeight = Math.max((parent.outerHeight() / me[0].scrollHeight) * parent.outerHeight(), minBarHeight); bar.css({ height: barHeight + 'px' }); } //set up initial height getBarHeight(); var showBar = function() { //recalculate bar height getBarHeight(); clearTimeout(queueHide); //show only when required if(barHeight >= me.outerHeight()) { //allow window scroll releaseScroll = true; return; } bar.fadeIn('fast'); if (railVisible) { rail.fadeIn('fast'); } } var hideBar = function() { //only hide when options allow it if (!alwaysVisible) { queueHide = setTimeout(function(){ if (!isOverBar && !isDragg) { bar.fadeOut('slow'); rail.fadeOut('slow'); } }, 1000); } } //check start position if (start == 'bottom') { //scroll content to bottom bar.css({ top: 'auto', bottom: 0 }); scrollContent(0, true); } else if (typeof start == 'object') { //scroll content scrollContent($(start).position().top, null, true); //make sure bar stays hidden if (!alwaysVisible) { bar.hide(); } } }); //maintain chainability return this; } }); jQuery.fn.extend({ slimscroll: jQuery.fn.slimScroll }); })(jQuery);

"Fullheight Portlet with Slimscroll"
Bootstrap 3.3.0 Snippet by sonia14

Related: See More

Questions / Comments:

"Fullheight Portlet with Slimscroll" Bootstrap 3.3.0 Snippet by sonia14

Related: See More

Questions / Comments:

"Fullheight Portlet with Slimscroll"
Bootstrap 3.3.0 Snippet by sonia14