Horizontal Scrollbar with Dynamic Width
I need to find a way how to make the horizontal scrollbar appear without hardcoding the width.
HTML
<script src="http://jscrollpane.kelvinluck.com/script/jquery.jscrollpane.min.js"></script>
<link rel="stylesheet" href="http://jscrollpane.kelvinluck.com/style/jquery.jscrollpane.css">
<div class="internalTabs recentlyViewedReports">
<span class="internalTab active">Carousel</span>
</div>
<div class="internalTabsContent scrollerContent recentlyViewedReports">
<div class="internalTabContent active">
<div class="scroll-pane">
<div class="scrollInner">
<div class="scrollableItem">
<a href="#">
<span class="title">##Scroll pane item</span>
<span class="content">Dec. 11, 2013 | 12:34PM</span>
</a>
</div>
<div class="scrollableItem">
<a href="#">
<span class="title">Scroll pane item</span>
<span class="content">Dec. 11, 2013 | 12:34PM</span>
</a>
</div>
<div class="scrollableItem">
<a href="#">
<span class="title">Scroll pane item</span>
<span class="content">Dec. 11, 2013 | 12:34PM</span>
</a>
</div>
<div class="scrollableItem">
<a href="#">
<span class="title">Scroll pane item</span>
<span class="content">Dec. 11, 2013 | 12:34PM</span>
</a>
</div>
<div class="scrollableItem">
<a href="#">
<span class="title">Scroll pane item</span>
<span class="content">Dec. 11, 2013 | 12:34PM</span>
</a>
</div>
<div class="scrollableItem">
<a href="#">
<span class="title">**Scroll pane item</span>
<span class="content">Dec. 11, 2013 | 12:34PM</span>
</a>
</div>
</div>
</div>
</div>
</div>
CSS
/* Internal Tab Content*/
.internalTabs {
margin-top: 16px;
margin-left: 12px;
display: inline-block;
}
.internalTabs .internalTab {
background: #e0e0e0;
padding: 7px 10px 7px 10px;
display: inline-block;
color: #763c5e;
font-weight: bold;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
margin-right: 7px;
cursor: pointer;
padding-right: 24px;
min-width: 142px;
background: #e0e0e0 url("images/purpleSelectDownArrow.png") 97% center no-repeat;
}
.internalTabs .internalTab.active {
color: #763c5e;
-webkit-border-bottom-left-radius: 0;
-moz-border-radius-bottomleft: 0;
border-bottom-left-radius: 0;
-webkit-border-bottom-right-radius: 0;
-moz-border-radius-bottomright: 0;
border-bottom-right-radius: 0;
}
.internalTabContent {
height: 0;
overflow: hidden;
border: none;
background: #ffffff;
position: relative;
bottom: 2px;
-webkit-border-bottom-right-radius: 7px;
border-bottom-right-radius: 7px;
-moz-border-radius-bottomright: 7px;
-webkit-border-bottom-left-radius: 7px;
border-bottom-left-radius: 7px;
-moz-border-radius-bottomleft: 7px;
}
.internalTabContent>.threeColumnLayout {
padding: 13px;
}
.internalTabContent>.fullWidth {
margin: 13px;
margin-bottom: 0;
width: 97.5%;
}
.internalTabContent.active {
height: auto;
overflow: visible;
border: 2px solid #e0e0e0;
}
.internalTabContent.active {
display: block;
}
.internalTabs .internalTab.disabled {
color: #777777;
background: none;
}
.internalTabs.savedReportsTabs .internalTab {
background: #e0e0e0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
margin-bottom: 24px;
color: #777777;
}
.internalTabs.savedReportsTabs .internalTab.active {
color: #763c5e;
}
.internalTabsContent.savedReportsTabs .internalTabContent {
border: none;
bottom: auto;
}
.internalTabs.recentlyViewedReports {
margin-left: 0;
}
.internalTabsContent.recentlyViewedReports...
JavaScript
$(document).ready(function() {
$('.internalTabs .internalTab').click(function() {
var clickedTabIndex = $(this).index();
if ($(this).hasClass('active')) {
$(this).removeClass('active');
$(this).parents('.internalTabs').next('.internalTabsContent').children().eq(clickedTabIndex).removeClass('active');
} else {
$(this).siblings().removeClass('active');
$(this).parents('.internalTabs').next('.internalTabsContent').children('*').removeClass('active');
$(this).addClass('active');
$(this).parents('.internalTabs').next('.internalTabsContent').children().eq(clickedTabIndex).addClass('active');
}
});
// calculate width for each scroll pane
$('.recentlyViewedReports .scroll-pane').each(function() {
var scrollableItemCount = $(this).children('.scrollInner').children().size();
var scrollableItemWidth = 270;
var scrollInnerWidth = scrollableItemCount * scrollableItemWidth;
$(this).children('.scrollInner').width(scrollInnerWidth);
});
// scroll pane script for modals and recently viewed reports
$('.scroll-pane').each(function() {
$(this).
jScrollPane({
verticalDragMinHeight: 20,
verticalDragMaxHeight: 20,
horizontalDragMinWidth: 20,
horizontalDragMaxWidth: 20
});
var scrollpaneApi = $(this).data('jsp');
var throttleTimeout;
$(window).bind('resize',
function() {
if (!throttleTimeout) {
throttleTimeout = setTimeout(function() {
scrollpaneApi.reinitialise();
throttleTimeout = null;
}, 50);
}
});
});
});