<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);