"Fullheight Portlet with Slimscroll"
Bootstrap 3.3.0 Snippet by sonia14

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <nav class="navbar navbar-default navbar-inverse navbar-fixed-top"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a> </li> <li><a href="#">Link</a> </li> <li><a href="#">Link</a> </li> <li><a href="#">Link</a> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Link</a> </li> <li><a href="#">Link</a> </li> </ul> </div> <!-- /.navbar-collapse --> </div> <!-- /.container-fluid --> </nav> <div class="container-fluid fullheight"> <div class="row fullheight"> <div class="col-md-2 col-sm-3 col-xs-12 fullheight"> <div class="portlet light no-margin fullheight"> <div class="portlet-title"> <div class="caption"> <span class="caption-subject bold uppercase"> Portlet 2</span></div> </div> <div class="portlet-body"> <div class="outer"> <div class="slimtest"> <!--Accordian--> <h4>Show</h4> <ul class="list-group"> <li class="list-group-item">Cras justo odio</li> <li class="list-group-item">Dapibus ac facilisis in</li> <li class="list-group-item">Morbi leo risus</li> <li class="list-group-item">Porta ac consectetur ac</li> <li class="list-group-item">Vestibulum at eros</li> </ul> <h4>Duration</h4> <ul class="list-group"> <li class="list-group-item">Cras justo odio</li> <li class="list-group-item">Dapibus ac facilisis in</li> <li class="list-group-item">Morbi leo risus</li> <li class="list-group-item">Porta ac consectetur ac</li> <li class="list-group-item">Vestibulum at eros</li> </ul> <h4>Companies</h4> <ul class="list-group"> <li class="list-group-item">Cras justo odio</li> <li class="list-group-item">Dapibus ac facilisis in</li> <li class="list-group-item">Morbi leo risus</li> <li class="list-group-item">Porta ac consectetur ac</li> <li class="list-group-item">Vestibulum at eros</li> </ul> <!--Accordian--> </div> </div> </div> </div> </div> <div class="col-md-4 col-sm-4 col-xs-12 fullheight"> <div class="portlet light no-margin fullheight"> <div class="portlet-title"> <div class="caption"> <span class="caption-subject bold uppercase"> Portlet 2</span> <span class="caption-helper">weekly stats...</span> </div> <div class="actions"> <a href="javascript:;" class="btn btn-circle btn-default"> <i class="fa fa-pencil"></i> Edit </a> <a href="javascript:;" class="btn btn-circle btn-default"> <i class="fa fa-plus"></i> Add </a></div> </div> <div class="portlet-body"> <div class="outer"> <div class="slimtest"> <h4>Heading Text</h4> <p> Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. </p> <p> Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. </p> <p> Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. </p> <p> Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. </p> <p> nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. </p> </div> </div> </div> </div> </div> <div class="col-md-6 col-sm-5 col-xs-12 fullheight"> <div class="portlet light no-margin fullheight"> <div class="portlet-title"> <div class="caption"> <span class="caption-subject bold uppercase"> Portlet</span> <span class="caption-helper">weekly stats...</span> </div> <div class="actions"> <a href="javascript:;" class="btn btn-circle btn-default"> <i class="fa fa-pencil"></i> Edit </a> <a href="javascript:;" class="btn btn-circle btn-default"> <i class="fa fa-plus"></i> Add </a></div> </div> <div class="portlet-body"> <div class="outer"> <div class="slimtest"> <h4>Heading Text</h4> <p> Duis mollis, est non commodo luctus, nisi erat por purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. </p> </div> </div> </div> </div> </div> </div> </div> <footer class="text-center navbar-inverse navbar-fixed-bottom"> <div class="container"> <div class="row"> <div class="col-xs-12"> <span class="font-lightgrey font-xs">Copyright © MyWebsite. All rights reserved.</span> </div> </div> </div> </footer> <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js" integrity="sha256-DI6NdAhhFRnO2k51mumYeDShet3I8AKCQf/tf7ARNhI=" crossorigin="anonymous"></script>
/* 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);

Related: See More


Questions / Comments: