add files
This commit is contained in:
Andrey Kuvshinov
812
assets/js/vendor/jquery.scrollbar/demo/advanced.html
vendored
Normal file
812
assets/js/vendor/jquery.scrollbar/demo/advanced.html
vendored
Normal file
@@ -0,0 +1,812 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>jQuery Advanced Scrollbar Demo</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<link rel="stylesheet" href="../includes/style.css" />
|
||||
<link rel="stylesheet" href="../includes/prettify/prettify.css" />
|
||||
<link rel="stylesheet" href="../jquery.scrollbar.css" />
|
||||
|
||||
<script src="../includes/prettify/prettify.js"></script>
|
||||
<script src="../includes/jquery.js"></script>
|
||||
<script src="../jquery.scrollbar.js"></script>
|
||||
<script>
|
||||
jQuery(function($){
|
||||
|
||||
function getAlignedText(text){
|
||||
text = text.split('\n');
|
||||
while(text.length > 0 && $.trim(text[0]) == ''){
|
||||
text.shift();
|
||||
}
|
||||
var tabs = (text[0] || '').replace(/^(\s+).+$/, '$1');
|
||||
for(var i=0; i<text.length; i++){
|
||||
text[i] = text[i].replace(tabs, '');
|
||||
}
|
||||
if(text.length > 0 && text[text.length - 1].match(/^\s*$/)){
|
||||
text.pop();
|
||||
}
|
||||
return text.join('\n');
|
||||
}
|
||||
|
||||
$('.container').each(function(){
|
||||
|
||||
var content = $(this).find('.content');
|
||||
var controls = $(this).find('.controls');
|
||||
|
||||
$('<pre></pre>').addClass('prettyprint linenums lang-html').text(getAlignedText(content.find('.demo').html())).appendTo(content.find('.html'));
|
||||
$('<pre></pre>').addClass('prettyprint linenums lang-css').text(getAlignedText($('#css-common').html()) + "\n" + getAlignedText(content.find('style').html())).appendTo(content.find('.css'));
|
||||
$('<pre></pre>').addClass('prettyprint linenums lang-js').text(getAlignedText(content.find('script').html())).appendTo(content.find('.js'));
|
||||
|
||||
controls.on('click', 'span', function(){
|
||||
content.find('.' + $(this).removeClass('active').attr('class')).show().siblings('div').hide();
|
||||
$(this).addClass('active').siblings('span').removeClass('active');
|
||||
});
|
||||
controls.find('.demo').click();
|
||||
});
|
||||
|
||||
$('.container').on('click', '.add-content', function(){
|
||||
$('#lorem-ipsum').clone().removeAttr('id').appendTo($(this).closest('.container').find('.scroll-content'));
|
||||
return false;
|
||||
});
|
||||
$('.container').on('click', '.remove-content', function(){
|
||||
$(this).closest('.container').find('.scroll-content').find('p').not('.permanent').last().remove();
|
||||
return false;
|
||||
});
|
||||
|
||||
window.prettyPrint && prettyPrint();
|
||||
$('.wrapper').scrollbar();
|
||||
});
|
||||
</script>
|
||||
|
||||
<script type="text/javascript">
|
||||
if(window.location.href.match(/gromo.github.io/i)){
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-52878040-1', 'auto');
|
||||
ga('send', 'pageview');
|
||||
}
|
||||
</script>
|
||||
|
||||
<style type="text/css">
|
||||
.content .demo {
|
||||
border: none;
|
||||
}
|
||||
.content .demo > div {
|
||||
height: 400px;
|
||||
max-height: none;
|
||||
overflow: auto;
|
||||
width: 600px;
|
||||
}
|
||||
.scroll-content img {
|
||||
display: block;
|
||||
}
|
||||
|
||||
label.theme {
|
||||
cursor: pointer;
|
||||
margin-right: 14px;
|
||||
}
|
||||
label.theme input {
|
||||
margin-right: 2px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style type="text/css" id="css-common">
|
||||
/*************** SCROLLBAR BASE CSS ***************/
|
||||
|
||||
.scroll-wrapper {
|
||||
overflow: hidden !important;
|
||||
padding: 0 !important;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.scroll-wrapper > .scroll-content {
|
||||
border: none !important;
|
||||
box-sizing: content-box !important;
|
||||
height: auto;
|
||||
left: 0;
|
||||
margin: 0;
|
||||
max-height: none;
|
||||
max-width: none !important;
|
||||
overflow: scroll !important;
|
||||
padding: 0;
|
||||
position: relative !important;
|
||||
top: 0;
|
||||
width: auto !important;
|
||||
}
|
||||
|
||||
.scroll-wrapper > .scroll-content::-webkit-scrollbar {
|
||||
height: 0;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.scroll-element {
|
||||
display: none;
|
||||
}
|
||||
.scroll-element, .scroll-element div {
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
.scroll-element.scroll-x.scroll-scrollx_visible,
|
||||
.scroll-element.scroll-y.scroll-scrolly_visible {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.scroll-element .scroll-bar,
|
||||
.scroll-element .scroll-arrow {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.scroll-textarea {
|
||||
border: 1px solid #cccccc;
|
||||
border-top-color: #999999;
|
||||
}
|
||||
.scroll-textarea > .scroll-content {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
.scroll-textarea > .scroll-content > textarea {
|
||||
border: none !important;
|
||||
box-sizing: border-box;
|
||||
height: 100% !important;
|
||||
margin: 0;
|
||||
max-height: none !important;
|
||||
max-width: none !important;
|
||||
overflow: scroll !important;
|
||||
outline: none;
|
||||
padding: 2px;
|
||||
position: relative !important;
|
||||
top: 0;
|
||||
width: 100% !important;
|
||||
}
|
||||
.scroll-textarea > .scroll-content > textarea::-webkit-scrollbar {
|
||||
height: 0;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrapper scrollbar-dynamic">
|
||||
<div class="page-content">
|
||||
|
||||
<h1>Advanced Scrollbars</h1>
|
||||
|
||||
<a href="basic.html">Basic Scrollbars Demo</a><br/>
|
||||
<a href="angular.html">jQuery Scrollbars as Angular.JS directive</a><br/>
|
||||
<a href="../">« Back to home</a>
|
||||
|
||||
<div class="container">
|
||||
<h2>Microsoft Windows Vista</h2>
|
||||
<div class="controls">
|
||||
<span class="demo">DEMO</span>
|
||||
<span class="html">HTML</span>
|
||||
<span class="css">CSS</span>
|
||||
<span class="js">JS</span>
|
||||
<button onclick="jQuery('.scrollbar-vista').scrollbar('destroy');">Destroy</button>
|
||||
</div>
|
||||
<div class="content">
|
||||
<style type="text/css">
|
||||
|
||||
/******************* WINDOWS VISTA SCROLLBAR *******************/
|
||||
|
||||
.scrollbar-vista > .scroll-content.scroll-scrolly_visible { left: -17px; margin-left: 17px; }
|
||||
.scrollbar-vista > .scroll-content.scroll-scrollx_visible { top: -17px; margin-top: 17px; }
|
||||
|
||||
|
||||
.scrollbar-vista > .scroll-element {
|
||||
background-color: #fcfdff;
|
||||
}
|
||||
|
||||
.scrollbar-vista > .scroll-element,
|
||||
.scrollbar-vista > .scroll-element div
|
||||
{
|
||||
border: none;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.scrollbar-vista > .scroll-element .scroll-element_outer,
|
||||
.scrollbar-vista > .scroll-element .scroll-element_size,
|
||||
.scrollbar-vista > .scroll-element .scroll-element_inner-wrapper,
|
||||
.scrollbar-vista > .scroll-element .scroll-element_inner,
|
||||
.scrollbar-vista > .scroll-element .scroll-bar,
|
||||
.scrollbar-vista > .scroll-element .scroll-bar div
|
||||
{
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.scrollbar-vista > .scroll-element .scroll-element_outer,
|
||||
.scrollbar-vista > .scroll-element .scroll-element_size,
|
||||
.scrollbar-vista > .scroll-element .scroll-element_inner-wrapper,
|
||||
.scrollbar-vista > .scroll-element .scroll-bar_body
|
||||
{
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
|
||||
.scrollbar-vista > .scroll-element.scroll-x {
|
||||
border-top: solid 1px #fcfdff;
|
||||
bottom: 0;
|
||||
height: 16px;
|
||||
left: 0;
|
||||
min-width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.scrollbar-vista > .scroll-element.scroll-y {
|
||||
border-left: solid 1px #fcfdff;
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
.scrollbar-vista > .scroll-element.scroll-x div {
|
||||
background-image: url('skins/vista-x.png');
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
|
||||
.scrollbar-vista > .scroll-element.scroll-y div {
|
||||
background-image: url('skins/vista-y.png');
|
||||
background-repeat: repeat-y;
|
||||
}
|
||||
|
||||
.scrollbar-vista > .scroll-element.scroll-x .scroll-arrow {}
|
||||
|
||||
.scrollbar-vista > .scroll-element.scroll-x .scroll-bar { min-width: 16px; background-position: 0px -34px; background-repeat: no-repeat; }
|
||||
.scrollbar-vista > .scroll-element.scroll-x .scroll-bar_body { left: 2px; }
|
||||
.scrollbar-vista > .scroll-element.scroll-x .scroll-bar_body-inner { left: -4px; background-position: 0px -17px; }
|
||||
.scrollbar-vista > .scroll-element.scroll-x .scroll-bar_center { left: 50%; margin-left: -6px; width: 12px; background-position: 24px -34px; }
|
||||
.scrollbar-vista > .scroll-element.scroll-x .scroll-bar_bottom { left: auto; right: 0; width: 2px; background-position: 37px -34px; }
|
||||
|
||||
|
||||
.scrollbar-vista > .scroll-element.scroll-y .scroll-bar { min-height: 16px; background-position: -34px 0px; background-repeat: no-repeat; }
|
||||
.scrollbar-vista > .scroll-element.scroll-y .scroll-bar_body { top: 2px; }
|
||||
.scrollbar-vista > .scroll-element.scroll-y .scroll-bar_body-inner { top: -4px; background-position: -17px 0px; }
|
||||
.scrollbar-vista > .scroll-element.scroll-y .scroll-bar_center { top: 50%; margin-top: -6px; height: 12px; background-position: -34px 24px; }
|
||||
.scrollbar-vista > .scroll-element.scroll-y .scroll-bar_bottom { top: auto; bottom: 0; height: 2px; background-position: -34px 37px; }
|
||||
|
||||
|
||||
|
||||
/* SCROLL ARROWS */
|
||||
|
||||
.scrollbar-vista > .scroll-element .scroll-arrow { display: none; }
|
||||
.scrollbar-vista > .scroll-element.scroll-element_arrows_visible .scroll-arrow { display: block; z-index: 12; }
|
||||
|
||||
|
||||
.scrollbar-vista > .scroll-element.scroll-x.scroll-element_arrows_visible .scroll-arrow_less { height: 100%; width: 17px; background-position: 0px -51px;}
|
||||
.scrollbar-vista > .scroll-element.scroll-x.scroll-element_arrows_visible .scroll-arrow_more { height: 100%; left: auto; right: 0; width: 17px; background-position: 17px -51px;}
|
||||
|
||||
.scrollbar-vista > .scroll-element.scroll-x.scroll-element_arrows_visible .scroll-element_outer { left: 17px; }
|
||||
.scrollbar-vista > .scroll-element.scroll-x.scroll-element_arrows_visible .scroll-element_inner { left: -34px; }
|
||||
.scrollbar-vista > .scroll-element.scroll-x.scroll-element_arrows_visible .scroll-element_size { left: -34px; }
|
||||
|
||||
|
||||
.scrollbar-vista > .scroll-element.scroll-y.scroll-element_arrows_visible .scroll-arrow_less { width: 100%; height: 17px; background-position: -51px 0px;}
|
||||
.scrollbar-vista > .scroll-element.scroll-y.scroll-element_arrows_visible .scroll-arrow_more { width: 100%; top: auto; bottom: 0; height: 17px; background-position: -51px 17px;}
|
||||
|
||||
.scrollbar-vista > .scroll-element.scroll-y.scroll-element_arrows_visible .scroll-element_outer { top: 17px; }
|
||||
.scrollbar-vista > .scroll-element.scroll-y.scroll-element_arrows_visible .scroll-element_inner { top: -34px; }
|
||||
.scrollbar-vista > .scroll-element.scroll-y.scroll-element_arrows_visible .scroll-element_size { top: -34px; }
|
||||
|
||||
|
||||
/* PROCEED OFFSET IF ANOTHER SCROLL VISIBLE */
|
||||
|
||||
.scrollbar-vista > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { left: -17px; }
|
||||
.scrollbar-vista > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { top: -17px; }
|
||||
|
||||
.scrollbar-vista > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_inner { left: -17px; }
|
||||
.scrollbar-vista > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_inner { top: -17px; }
|
||||
|
||||
|
||||
/* PROCEED OFFSET IF ARROWS & ANOTHER SCROLL */
|
||||
|
||||
.scrollbar-vista > .scroll-element.scroll-x.scroll-element_arrows_visible.scroll-scrolly_visible .scroll-arrow_more { right: 17px;}
|
||||
.scrollbar-vista > .scroll-element.scroll-x.scroll-element_arrows_visible.scroll-scrolly_visible .scroll-element_inner { left: -51px;}
|
||||
.scrollbar-vista > .scroll-element.scroll-x.scroll-element_arrows_visible.scroll-scrolly_visible .scroll-element_size { left: -51px;}
|
||||
|
||||
|
||||
.scrollbar-vista > .scroll-element.scroll-y.scroll-element_arrows_visible.scroll-scrollx_visible .scroll-arrow_more { bottom: 17px;}
|
||||
.scrollbar-vista > .scroll-element.scroll-y.scroll-element_arrows_visible.scroll-scrollx_visible .scroll-element_inner { top: -51px;}
|
||||
.scrollbar-vista > .scroll-element.scroll-y.scroll-element_arrows_visible.scroll-scrollx_visible .scroll-element_size { top: -51px;}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
jQuery(document).ready(function(){
|
||||
jQuery('.scrollbar-vista').scrollbar({
|
||||
"showArrows": true,
|
||||
"scrollx": "advanced",
|
||||
"scrolly": "advanced"
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<div class="demo">
|
||||
<div class="scrollbar-vista">
|
||||
<img src="../includes/tarzan.jpg" height="2100" width="2800">
|
||||
</div>
|
||||
</div>
|
||||
<div class="html"></div>
|
||||
<div class="css"></div>
|
||||
<div class="js"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<h2>External</h2>
|
||||
<p>External scrollbars can be located in any place inside or outside of scrollable container</p>
|
||||
<div class="controls">
|
||||
<span class="demo">DEMO</span>
|
||||
<span class="html">HTML</span>
|
||||
<span class="css">CSS</span>
|
||||
<span class="js">JS</span>
|
||||
</div>
|
||||
<div class="content">
|
||||
<style type="text/css">
|
||||
|
||||
.scrollbar-external_wrapper {
|
||||
height: 450px !important;
|
||||
position: relative;
|
||||
width: auto !important;
|
||||
}
|
||||
.scrollbar-external {
|
||||
height: 400px;
|
||||
overflow: auto;
|
||||
width: 600px;
|
||||
}
|
||||
|
||||
/******************* EXTERNAL SCROLLBAR *******************/
|
||||
|
||||
.external-scroll_x,
|
||||
.external-scroll_y {
|
||||
border: solid 1px #9999fc;
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.external-scroll_x.scroll-scrollx_visible {
|
||||
display: block;
|
||||
height: 10px;
|
||||
left: 0;
|
||||
top: 410px;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.external-scroll_y.scroll-scrolly_visible {
|
||||
display: block;
|
||||
height: 200px;
|
||||
left: 610px;
|
||||
top: 0;
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
.external-scroll_x div,
|
||||
.external-scroll_y div
|
||||
{
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.external-scroll_x .scroll-bar,
|
||||
.external-scroll_y .scroll-bar {
|
||||
background: #9999fc;
|
||||
z-index: 12;
|
||||
}
|
||||
|
||||
.external-scroll_x .scroll-bar {
|
||||
width: 100px;
|
||||
}
|
||||
.external-scroll_y .scroll-bar {
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
jQuery(document).ready(function(){
|
||||
jQuery('.scrollbar-external').scrollbar({
|
||||
"autoScrollSize": false,
|
||||
"scrollx": $('.external-scroll_x'),
|
||||
"scrolly": $('.external-scroll_y')
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<div class="demo">
|
||||
<div class="scrollbar-external_wrapper">
|
||||
<div class="scrollbar-external">
|
||||
<img src="../includes/tarzan.jpg">
|
||||
</div>
|
||||
|
||||
<div class="external-scroll_x">
|
||||
<div class="scroll-element_outer">
|
||||
<div class="scroll-element_size"></div>
|
||||
<div class="scroll-element_track"></div>
|
||||
<div class="scroll-bar"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="external-scroll_y">
|
||||
<div class="scroll-element_outer">
|
||||
<div class="scroll-element_size"></div>
|
||||
<div class="scroll-element_track"></div>
|
||||
<div class="scroll-bar"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="html"></div>
|
||||
<div class="css"></div>
|
||||
<div class="js"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<h2>Page Map</h2>
|
||||
<p>Page Map is resizable scrollbar that combinates both horizontal and vertical scrollbars in one element</p>
|
||||
<div class="controls">
|
||||
<span class="demo">DEMO</span>
|
||||
<span class="html">HTML</span>
|
||||
<span class="css">CSS</span>
|
||||
<span class="js">JS</span>
|
||||
<button onclick="$('.scrollbar-map img').css({'height':'2100px','width':'2800px'});">Resize</button>
|
||||
<button onclick="$('.scrollbar-map img').css({'height':'600px','width':'800px'});">Original</button>
|
||||
</div>
|
||||
<div class="content">
|
||||
<style type="text/css">
|
||||
|
||||
/******************* PAGE THUMBNAIL SCROLLBAR *******************/
|
||||
|
||||
.scrollbar-map > .scroll-element_outer {
|
||||
display: none;
|
||||
height: 100px;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
width: 100px;
|
||||
}
|
||||
.scrollbar-map > .scroll-element_outer .scroll-element_size,
|
||||
.scrollbar-map > .scroll-element_outer .scroll-element_track {
|
||||
background-color: #999;
|
||||
background-color: rgba(153, 153, 153, 0.4);
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.scrollbar-map > .scroll-element_outer .scroll-bar {
|
||||
background-color: #CCC;
|
||||
background-color: rgba(204, 204, 204, 0.5);
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.scrollbar-map > .scroll-element_outer.scroll-scrollx_visible,
|
||||
.scrollbar-map > .scroll-element_outer.scroll-scrolly_visible {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
/**
|
||||
* Get inscribed area size
|
||||
*
|
||||
* @param int oW outer width
|
||||
* @param int oH outer height
|
||||
* @param int iW inner width
|
||||
* @param int iH inner height
|
||||
* @param bool R resize if smaller
|
||||
*/
|
||||
function getInscribedArea(oW, oH, iW, iH, R){
|
||||
if(!R && iW < oW && iH < oH){
|
||||
return {
|
||||
"h": iH,
|
||||
"w": iW
|
||||
};
|
||||
}
|
||||
if((oW / oH) > (iW / iH)){
|
||||
return {
|
||||
"h": oH,
|
||||
"w": Math.round(oH * iW / iH)
|
||||
}
|
||||
} else {
|
||||
return {
|
||||
"h": Math.round(oW * iH / iW),
|
||||
"w": oW
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
jQuery(document).ready(function(){
|
||||
jQuery('.scrollbar-map').scrollbar({
|
||||
"onInit": function(){
|
||||
this.container.find('.scroll-element_outer').appendTo(this.wrapper);
|
||||
},
|
||||
"onUpdate": function(container){
|
||||
var s = getInscribedArea(140, 140, this.scrollx.size, this.scrolly.size);
|
||||
this.scrolly.scroll.height(s.h);
|
||||
this.scrollx.scroll.width(s.w);
|
||||
},
|
||||
"scrollx": $('.scrollbar-map .scroll-element_outer'),
|
||||
"scrolly": $('.scrollbar-map .scroll-element_outer'),
|
||||
"stepScrolling": false
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<div class="demo">
|
||||
<div class="scrollbar-map">
|
||||
<div class="scroll-element_outer">
|
||||
<div class="scroll-element_size">
|
||||
<div class="scroll-element_track"></div>
|
||||
<div class="scroll-bar"></div>
|
||||
</div>
|
||||
</div>
|
||||
<img src="../includes/tarzan.jpg" height="900" width="1200">
|
||||
</div>
|
||||
</div>
|
||||
<div class="html"></div>
|
||||
<div class="css"></div>
|
||||
<div class="js"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="container">
|
||||
<h2>Janos Scrollbar</h2>
|
||||
<p>Janos Scrollbar uses design from
|
||||
<a href="http://users.atw.hu/nokiss/formstyle.html" target="_blank">Janos custom form elements</a></p>
|
||||
<div class="controls">
|
||||
<span class="demo">DEMO</span>
|
||||
<span class="html">HTML</span>
|
||||
<span class="css">CSS</span>
|
||||
<span class="js">JS</span>
|
||||
</div>
|
||||
<div>
|
||||
<label class="theme"><input type="radio" name="janos-theme" value="theme-blue" checked="checked">Blue</label>
|
||||
<label class="theme"><input type="radio" name="janos-theme" value="theme-woods">Woods</label>
|
||||
<label class="theme"><input type="radio" name="janos-theme" value="theme-paint4">Paint 4</label>
|
||||
<label class="theme"><input type="radio" name="janos-theme" value="theme-palace3">Palace 3</label>
|
||||
<label class="theme"><input type="radio" name="janos-theme" value="theme-dark">Dark</label>
|
||||
<label class="theme"><input type="radio" name="janos-theme" value="theme-sprites">Sprites</label>
|
||||
<script type="text/javascript">
|
||||
jQuery(function($){
|
||||
var currentTheme = 'theme-blue';
|
||||
$('input:radio[name="janos-theme"]').on('change', function(){
|
||||
$('.scrollbar-janos').removeClass(currentTheme);
|
||||
currentTheme = $(this).val();
|
||||
$('.scrollbar-janos').addClass(currentTheme);
|
||||
}).eq(0).prop('checked', true).change();
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
<div class="content">
|
||||
<style type="text/css">
|
||||
|
||||
.scrollbar-janos.theme-blue > .scroll-element,
|
||||
.scrollbar-janos.theme-blue > .scroll-element .scroll-bar,
|
||||
.scrollbar-janos.theme-blue > .scroll-element .scroll-element_corner,
|
||||
.scrollbar-janos.theme-blue > .scroll-element .scroll-element_track
|
||||
{ background-color: #66CCEE; }
|
||||
|
||||
.scrollbar-janos.theme-woods > .scroll-element,
|
||||
.scrollbar-janos.theme-woods > .scroll-element .scroll-bar,
|
||||
.scrollbar-janos.theme-woods > .scroll-element .scroll-element_corner,
|
||||
.scrollbar-janos.theme-woods > .scroll-element .scroll-element_track
|
||||
{ background-color: #5F7C7F; }
|
||||
|
||||
.scrollbar-janos.theme-paint4 > .scroll-element,
|
||||
.scrollbar-janos.theme-paint4 > .scroll-element .scroll-bar,
|
||||
.scrollbar-janos.theme-paint4 > .scroll-element .scroll-element_corner,
|
||||
.scrollbar-janos.theme-paint4 > .scroll-element .scroll-element_track
|
||||
{ background-color: #5566AA; }
|
||||
|
||||
.scrollbar-janos.theme-palace3 > .scroll-element,
|
||||
.scrollbar-janos.theme-palace3 > .scroll-element .scroll-bar,
|
||||
.scrollbar-janos.theme-palace3 > .scroll-element .scroll-element_corner,
|
||||
.scrollbar-janos.theme-palace3 > .scroll-element .scroll-element_track
|
||||
{ background-color: #028B54; }
|
||||
|
||||
.scrollbar-janos.theme-dark > .scroll-element,
|
||||
.scrollbar-janos.theme-dark > .scroll-element .scroll-bar,
|
||||
.scrollbar-janos.theme-dark > .scroll-element .scroll-element_corner,
|
||||
.scrollbar-janos.theme-dark > .scroll-element .scroll-element_track
|
||||
{ background-color: #999999; }
|
||||
|
||||
.scrollbar-janos.theme-sprites > .scroll-element,
|
||||
.scrollbar-janos.theme-sprites > .scroll-element .scroll-bar,
|
||||
.scrollbar-janos.theme-sprites > .scroll-element .scroll-element_corner,
|
||||
.scrollbar-janos.theme-sprites > .scroll-element .scroll-element_track
|
||||
{ background-color: #BBBBBB; }
|
||||
|
||||
|
||||
/******************* JANOS SCROLLBAR *******************/
|
||||
|
||||
.scrollbar-janos > .scroll-element,
|
||||
.scrollbar-janos > .scroll-element div
|
||||
{
|
||||
border: none;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.scrollbar-janos > .scroll-element div {
|
||||
background-color: transparent;
|
||||
display: block;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.scrollbar-janos > .scroll-element.scroll-x {
|
||||
border-top: 1px solid #AAAAAA;
|
||||
bottom: 0;
|
||||
height: 16px;
|
||||
left: 0;
|
||||
min-width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.scrollbar-janos > .scroll-element.scroll-y {
|
||||
border-left: 1px solid #AAAAAA;
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
.scrollbar-janos > .scroll-element .scroll-element_corner {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.scrollbar-janos > .scroll-element.scroll-x,
|
||||
.scrollbar-janos > .scroll-element.scroll-x .scroll-bar {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAPCAYAAADd/14OAAAAS0lEQVR42qzQywkAIAxEQQPpvwn7E/EDESXREt7BHPY0sEvE3XMCpyJiwIW+mBR2Civa+BVGhOuLQt/TaHWncFBoFC4KN4WHwCvAAHI/GzHvcCTCAAAAAElFTkSuQmCC);
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
.scrollbar-janos > .scroll-element.scroll-x .scroll-bar {
|
||||
box-shadow: 0 1px 2px, 0 -1px 1px rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
.scrollbar-janos > .scroll-element.scroll-y,
|
||||
.scrollbar-janos > .scroll-element.scroll-y .scroll-bar {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAKCAYAAABrGwT5AAAAAXNSR0IArs4c6QAAAEtJREFUKM/ty00Kg0AAQ+Ev3v8W3k/8qWipzLiYFrqR7osPsknyUkrpk2xYsWDCWGsdMCaZ3/0DO5544eg08pVWJJ/tkp+HW/4L+QSzjxQbWJrRJQAAAABJRU5ErkJggg==);
|
||||
background-repeat: repeat-y;
|
||||
}
|
||||
.scrollbar-janos > .scroll-element.scroll-y .scroll-bar {
|
||||
box-shadow: 0 1px 2px, 0 -1px 1px rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.scrollbar-janos > .scroll-element.scroll-x .scroll-element_track {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAQCAYAAAAvf+5AAAAAXklEQVR42mJkYGBIZcAO/iPR/1iAxG8CisAYpPAnsQp/EGE1XoUoiklS+J0BPwArJmQiA7FWoyj8hUXiH7oArnBE9ghc4S9irf5NrMI/xFr9hwgTwQr/4TMJBgACDABrOConte5OAgAAAABJRU5ErkJggg==);
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
.scrollbar-janos > .scroll-element.scroll-y .scroll-element_track {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAKCAYAAAC9vt6cAAAAAXNSR0IArs4c6QAAAFNJREFUKM/FzksKgDAMBNDX3NT7X8BaC25clBKw4sKBgYTMJwUbGurAfWLFcbPhREcPBEpC05ztqXkUPyKS5LJqHj9YaU11sdgarw+LKF8D/B9wAWL/DzbaLOVxAAAAAElFTkSuQmCC);
|
||||
background-repeat: repeat-y;
|
||||
}
|
||||
.scrollbar-janos > .scroll-element.scroll-x .scroll-bar .scroll-bar_body {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAHCAYAAADAp4fuAAAAMklEQVR42mL4DwRnz579zwAEMDYTiLN7924GGACxmRiwAEoFV6xYwSAvLw/mwNgAAQYAEz0X3c1VmrwAAAAASUVORK5CYII=);
|
||||
}
|
||||
.scrollbar-janos > .scroll-element.scroll-y .scroll-bar .scroll-bar_body {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAFCAYAAACJmvbYAAAAAXNSR0IArs4c6QAAAChJREFUCNdj/P///38GLGDFihUMLOfOnWPYvXs3hqS8vDwDXsBItrEA28oV4/a4edAAAAAASUVORK5CYII=);
|
||||
}
|
||||
.scrollbar-janos > .scroll-element.scroll-x .scroll-arrow_less {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAj0lEQVR42mJgwA4EgVgbRP///58BhJmwKFIwNTW1AEpGANlSMEEWNFOkNm/ebObj42MHZLMDsSi6QpApmqdOnbICspWxuQWkUPTYsWOOlpaWMFOwAiYGIgFI4WsrK6v9ZmZmq4Dsu4RMfHD69OkTjIyMK7Zs2bIbyP9JjC0gj3kCg6cZFJawcGQgNsABAgwAc40zrttfic8AAAAASUVORK5CYII=);
|
||||
box-shadow: 0 1px 2px, 0 -1px 1px rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
.scrollbar-janos > .scroll-element.scroll-x .scroll-arrow_more {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAh0lEQVR42mL4//8/AwgDgSAQa0NpDMCExJYCaogwNTW1ALIVMFQimegApJcB8fzNmzcnopvOhMUWdh8fH1d007EphAHlU6dOhR07dswRyBbFpxAFsOCRu2tmZnbs9OnT14Hs19gU/tyyZcshX1/fU0D2MyB+j+5rbSDdDPSAJ6HgwRvgAAEGAC2sRKFV1v+TAAAAAElFTkSuQmCC);
|
||||
}
|
||||
.scrollbar-janos > .scroll-element.scroll-y .scroll-arrow_less {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAjklEQVR42mJgwASiUIwCGNH4CseOHXMEMaysrPYDqQdYDGIQNDU19fz///98EAaxQWLYTNQGKogA0spQ/l1GRsYVQPoqiMMEs3Lz5s1mSIpAQBkqpgAzEWSlxalTp8KAbHY05/w0MzNbdfr06ROMWKxEB2AnMEIdLIUtSKDgNRA/YwSaxkAMYGIgEgAEGADQpyzNaQf+BAAAAABJRU5ErkJggg==);
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
.scrollbar-janos > .scroll-element.scroll-y .scroll-arrow_more {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAg0lEQVR42mL8//8/AzGAiYFIwAjEgkAsBcSiONS8BuJnLCBFQOsjgLQyDoV3GRkZV4CsfmZmZnYMSP/EougnVO4ZSOH706dPX9+yZcshdFUgMZAcSA0jkrg2mhPAVgLpq+i+RnYC3EpkXyMDhWPHjjmCGFZWVvuB1AN8QSaKLagAAgwAkYkwicybOCoAAAAASUVORK5CYII=);
|
||||
}
|
||||
|
||||
.scrollbar-janos > .scroll-element .scroll-arrow,
|
||||
.scrollbar-janos > .scroll-element .scroll-bar_body {
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.scrollbar-janos > .scroll-content.scroll-scrolly_visible { left: -17px; margin-left: 17px; }
|
||||
.scrollbar-janos > .scroll-content.scroll-scrollx_visible { top: -17px; margin-top: 17px; }
|
||||
|
||||
/* scrollbar arrows */
|
||||
|
||||
.scrollbar-janos > .scroll-element .scroll-arrow { display: none; }
|
||||
.scrollbar-janos > .scroll-element.scroll-element_arrows_visible .scroll-arrow { display: block; z-index: 12; }
|
||||
|
||||
.scrollbar-janos > .scroll-element.scroll-x.scroll-element_arrows_visible .scroll-arrow_less { height: 100%; width: 16px;}
|
||||
.scrollbar-janos > .scroll-element.scroll-x.scroll-element_arrows_visible .scroll-arrow_more { height: 100%; left: auto; right: 0; width: 16px;}
|
||||
|
||||
.scrollbar-janos > .scroll-element.scroll-x.scroll-element_arrows_visible .scroll-element_outer { left: 16px; }
|
||||
.scrollbar-janos > .scroll-element.scroll-x.scroll-element_arrows_visible .scroll-element_track { left: -32px; }
|
||||
.scrollbar-janos > .scroll-element.scroll-x.scroll-element_arrows_visible .scroll-element_size { left: -33px; }
|
||||
|
||||
.scrollbar-janos > .scroll-element.scroll-y.scroll-element_arrows_visible .scroll-arrow_less { width: 100%; height: 16px;}
|
||||
.scrollbar-janos > .scroll-element.scroll-y.scroll-element_arrows_visible .scroll-arrow_more { width: 100%; top: auto; bottom: 0; height: 16px;}
|
||||
|
||||
.scrollbar-janos > .scroll-element.scroll-y.scroll-element_arrows_visible .scroll-element_outer { top: 16px; }
|
||||
.scrollbar-janos > .scroll-element.scroll-y.scroll-element_arrows_visible .scroll-element_track { top: -32px; }
|
||||
.scrollbar-janos > .scroll-element.scroll-y.scroll-element_arrows_visible .scroll-element_size { top: -33px; }
|
||||
|
||||
/* if another scrollbar is visible */
|
||||
|
||||
.scrollbar-janos > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { left: -17px; }
|
||||
.scrollbar-janos > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { top: -17px; }
|
||||
|
||||
.scrollbar-janos > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_inner { left: -17px; }
|
||||
.scrollbar-janos > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_inner { top: -17px; }
|
||||
|
||||
/* if arrows & another scrollbar are visible */
|
||||
|
||||
.scrollbar-janos > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_corner,
|
||||
.scrollbar-janos > .scroll-element.scroll-y.scroll-element_arrows_visible.scroll-scrollx_visible .scroll-element_corner {
|
||||
border-top: 1px solid #AAAAAA;
|
||||
bottom: 0;
|
||||
display: block;
|
||||
height: 16px;
|
||||
left: auto;
|
||||
right: 0;
|
||||
top: auto;
|
||||
width: 16px;
|
||||
z-index: 13;
|
||||
}
|
||||
|
||||
.scrollbar-janos > .scroll-element.scroll-x.scroll-element_arrows_visible.scroll-scrolly_visible .scroll-arrow_more { right: 17px;}
|
||||
.scrollbar-janos > .scroll-element.scroll-x.scroll-element_arrows_visible.scroll-scrolly_visible .scroll-element_track { left: -50px;}
|
||||
.scrollbar-janos > .scroll-element.scroll-x.scroll-element_arrows_visible.scroll-scrolly_visible .scroll-element_size { left: -51px;}
|
||||
|
||||
|
||||
.scrollbar-janos > .scroll-element.scroll-y.scroll-element_arrows_visible.scroll-scrollx_visible .scroll-arrow_more { bottom: 17px;}
|
||||
.scrollbar-janos > .scroll-element.scroll-y.scroll-element_arrows_visible.scroll-scrollx_visible .scroll-element_track { top: -50px;}
|
||||
.scrollbar-janos > .scroll-element.scroll-y.scroll-element_arrows_visible.scroll-scrollx_visible .scroll-element_size { top: -51px;}
|
||||
|
||||
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
jQuery(document).ready(function(){
|
||||
jQuery('.scrollbar-janos').scrollbar({
|
||||
"showArrows": true,
|
||||
"scrollx": "advanced",
|
||||
"scrolly": "advanced"
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<div class="demo">
|
||||
<div class="scrollbar-janos theme-blue">
|
||||
<img src="../includes/tarzan.jpg" height="2100" width="2800">
|
||||
</div>
|
||||
</div>
|
||||
<div class="html"></div>
|
||||
<div class="css"></div>
|
||||
<div class="js"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
175
assets/js/vendor/jquery.scrollbar/demo/angular.html
vendored
Normal file
175
assets/js/vendor/jquery.scrollbar/demo/angular.html
vendored
Normal file
@@ -0,0 +1,175 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>jQuery Scrollbar as AngularJS directive</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<link rel="stylesheet" href="../includes/style.css" />
|
||||
<link rel="stylesheet" href="../includes/prettify/prettify.css" />
|
||||
<link rel="stylesheet" href="../jquery.scrollbar.css" />
|
||||
<style type="text/css">
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.content .demo > div {
|
||||
max-height: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="../includes/prettify/prettify.js"></script>
|
||||
<script src="../includes/jquery.js"></script>
|
||||
<script src="../includes/angular.js"></script>
|
||||
<script src="../jquery.scrollbar.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
if(window.location.href.match(/gromo.github.io/i)){
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-52878040-1', 'auto');
|
||||
ga('send', 'pageview');
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrapper scrollbar-dynamic">
|
||||
<div class="page-content">
|
||||
|
||||
<h1>jQuery Scrollbar as AngularJS directive</h1>
|
||||
|
||||
<a href="basic.html">Basic Scrollbars Demo</a><br/>
|
||||
<a href="advanced.html">Advanced Scrollbars Demo</a><br/>
|
||||
<a href="../">« Back to home</a>
|
||||
|
||||
<p id="lorem-ipsum">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a,
|
||||
scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus.
|
||||
Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel
|
||||
hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue,
|
||||
pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam
|
||||
sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare,
|
||||
ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget
|
||||
nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam
|
||||
viverra nisi, in interdum massa nibh nec erat.
|
||||
</p>
|
||||
|
||||
<div class="container">
|
||||
<h2></h2>
|
||||
<div class="controls">
|
||||
<span class="demo">DEMO</span>
|
||||
<span class="html">HTML</span>
|
||||
<span class="css">CSS</span>
|
||||
<span class="js">JS</span>
|
||||
<button class="add-content">Add Content</button>
|
||||
<button class="remove-content">Remove Content</button>
|
||||
</div>
|
||||
<div class="content">
|
||||
<style type="text/css">
|
||||
.scrollbar-dynamic {
|
||||
max-height: 300px;
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
var demoApp = angular.module('demoApp', ['jQueryScrollbar']);
|
||||
demoApp.controller('SimpleController', function($scope){
|
||||
$scope.jqueryScrollbarOptions = {
|
||||
"onScroll":function(y, x){
|
||||
if(y.scroll == y.maxScroll){
|
||||
alert('Scrolled to bottom');
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
</script>
|
||||
<div class="demo">
|
||||
<div data-ng-app="demoApp">
|
||||
<div data-ng-controller="SimpleController">
|
||||
<div class="scrollbar-dynamic" data-jquery-scrollbar="jqueryScrollbarOptions">
|
||||
<p class="permanent">
|
||||
Using jQuery scrollbar as Angular.JS directive is simple. Just include jquery.scrollbar.js
|
||||
file after jQuery and Angular. jQuery Scrollbar automatically creates Angular.JS module
|
||||
<em>jQueryScrollbar</em> with directive <em>jqueryScrollbar</em>.<br/>
|
||||
<i>* Please note that Angular.JS does not work with IE 7.</i>
|
||||
</p>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a,
|
||||
scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus.
|
||||
Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel
|
||||
hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue,
|
||||
pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam
|
||||
sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare,
|
||||
ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget
|
||||
nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam
|
||||
viverra nisi, in interdum massa nibh nec erat.
|
||||
</p>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a,
|
||||
scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus.
|
||||
Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel
|
||||
hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue,
|
||||
pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam
|
||||
sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare,
|
||||
ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget
|
||||
nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam
|
||||
viverra nisi, in interdum massa nibh nec erat.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="html"></div>
|
||||
<div class="css"></div>
|
||||
<div class="js"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function getAlignedText(text){
|
||||
text = (text || '').split('\n');
|
||||
while(text.length > 0 && $.trim(text[0]) == ''){
|
||||
text.shift();
|
||||
}
|
||||
var tabs = (text[0] || '').replace(/^(\s+).+$/, '$1');
|
||||
for(var i=0; i<text.length; i++){
|
||||
text[i] = text[i].replace(tabs, '');
|
||||
}
|
||||
if(text.length > 0 && text[text.length - 1].match(/^\s*$/)){
|
||||
text.pop();
|
||||
}
|
||||
return text.join('\n');
|
||||
}
|
||||
|
||||
$('.container').each(function(){
|
||||
|
||||
var content = $(this).find('.content');
|
||||
var controls = $(this).find('.controls');
|
||||
|
||||
$('<pre></pre>').addClass('prettyprint linenums lang-html').text(getAlignedText(content.find('.demo').html())).appendTo(content.find('.html'));
|
||||
$('<pre></pre>').addClass('prettyprint linenums lang-css').text(getAlignedText($('#css-common').html()) + "\n" + getAlignedText(content.find('style').html())).appendTo(content.find('.css'));
|
||||
$('<pre></pre>').addClass('prettyprint linenums lang-js').text(getAlignedText(content.find('script').html())).appendTo(content.find('.js'));
|
||||
|
||||
controls.on('click', 'span', function(){
|
||||
content.find('.' + $(this).removeClass('active').attr('class')).show().siblings('div').hide();
|
||||
$(this).addClass('active').siblings('span').removeClass('active');
|
||||
});
|
||||
controls.find('.demo').click();
|
||||
});
|
||||
|
||||
$('.container').on('click', '.add-content', function(){
|
||||
$('#lorem-ipsum').clone().removeAttr('id').appendTo($(this).closest('.container').find('.scroll-content'));
|
||||
return false;
|
||||
});
|
||||
$('.container').on('click', '.remove-content', function(){
|
||||
$(this).closest('.container').find('.scroll-content').find('p').not('.permanent').last().remove();
|
||||
return false;
|
||||
});
|
||||
|
||||
window.prettyPrint && prettyPrint();
|
||||
$('.wrapper').scrollbar();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
1385
assets/js/vendor/jquery.scrollbar/demo/basic.html
vendored
Normal file
1385
assets/js/vendor/jquery.scrollbar/demo/basic.html
vendored
Normal file
File diff suppressed because it is too large
Load Diff
21464
assets/js/vendor/jquery.scrollbar/includes/angular.js
vendored
Normal file
21464
assets/js/vendor/jquery.scrollbar/includes/angular.js
vendored
Normal file
File diff suppressed because it is too large
Load Diff
4
assets/js/vendor/jquery.scrollbar/includes/jquery.js
vendored
Normal file
4
assets/js/vendor/jquery.scrollbar/includes/jquery.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
assets/js/vendor/jquery.scrollbar/includes/prettify/prettify.css
vendored
Normal file
1
assets/js/vendor/jquery.scrollbar/includes/prettify/prettify.css
vendored
Normal file
@@ -0,0 +1 @@
|
||||
.pln{color:#000}@media screen{.str{color:#080}.kwd{color:#008}.com{color:#800}.typ{color:#606}.lit{color:#066}.pun,.opn,.clo{color:#660}.tag{color:#008}.atn{color:#606}.atv{color:#080}.dec,.var{color:#606}.fun{color:red}}@media print,projection{.str{color:#060}.kwd{color:#006;font-weight:bold}.com{color:#600;font-style:italic}.typ{color:#404;font-weight:bold}.lit{color:#044}.pun,.opn,.clo{color:#440}.tag{color:#006;font-weight:bold}.atn{color:#404}.atv{color:#060}}pre.prettyprint{padding:2px;border:1px solid #888}ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee}
|
||||
30
assets/js/vendor/jquery.scrollbar/includes/prettify/prettify.js
vendored
Normal file
30
assets/js/vendor/jquery.scrollbar/includes/prettify/prettify.js
vendored
Normal file
@@ -0,0 +1,30 @@
|
||||
!function(){var q=null;window.PR_SHOULD_USE_CONTINUATION=!0;
|
||||
(function(){function S(a){function d(e){var b=e.charCodeAt(0);if(b!==92)return b;var a=e.charAt(1);return(b=r[a])?b:"0"<=a&&a<="7"?parseInt(e.substring(1),8):a==="u"||a==="x"?parseInt(e.substring(2),16):e.charCodeAt(1)}function g(e){if(e<32)return(e<16?"\\x0":"\\x")+e.toString(16);e=String.fromCharCode(e);return e==="\\"||e==="-"||e==="]"||e==="^"?"\\"+e:e}function b(e){var b=e.substring(1,e.length-1).match(/\\u[\dA-Fa-f]{4}|\\x[\dA-Fa-f]{2}|\\[0-3][0-7]{0,2}|\\[0-7]{1,2}|\\[\S\s]|[^\\]/g),e=[],a=
|
||||
b[0]==="^",c=["["];a&&c.push("^");for(var a=a?1:0,f=b.length;a<f;++a){var h=b[a];if(/\\[bdsw]/i.test(h))c.push(h);else{var h=d(h),l;a+2<f&&"-"===b[a+1]?(l=d(b[a+2]),a+=2):l=h;e.push([h,l]);l<65||h>122||(l<65||h>90||e.push([Math.max(65,h)|32,Math.min(l,90)|32]),l<97||h>122||e.push([Math.max(97,h)&-33,Math.min(l,122)&-33]))}}e.sort(function(e,a){return e[0]-a[0]||a[1]-e[1]});b=[];f=[];for(a=0;a<e.length;++a)h=e[a],h[0]<=f[1]+1?f[1]=Math.max(f[1],h[1]):b.push(f=h);for(a=0;a<b.length;++a)h=b[a],c.push(g(h[0])),
|
||||
h[1]>h[0]&&(h[1]+1>h[0]&&c.push("-"),c.push(g(h[1])));c.push("]");return c.join("")}function s(e){for(var a=e.source.match(/\[(?:[^\\\]]|\\[\S\s])*]|\\u[\dA-Fa-f]{4}|\\x[\dA-Fa-f]{2}|\\\d+|\\[^\dux]|\(\?[!:=]|[()^]|[^()[\\^]+/g),c=a.length,d=[],f=0,h=0;f<c;++f){var l=a[f];l==="("?++h:"\\"===l.charAt(0)&&(l=+l.substring(1))&&(l<=h?d[l]=-1:a[f]=g(l))}for(f=1;f<d.length;++f)-1===d[f]&&(d[f]=++x);for(h=f=0;f<c;++f)l=a[f],l==="("?(++h,d[h]||(a[f]="(?:")):"\\"===l.charAt(0)&&(l=+l.substring(1))&&l<=h&&
|
||||
(a[f]="\\"+d[l]);for(f=0;f<c;++f)"^"===a[f]&&"^"!==a[f+1]&&(a[f]="");if(e.ignoreCase&&m)for(f=0;f<c;++f)l=a[f],e=l.charAt(0),l.length>=2&&e==="["?a[f]=b(l):e!=="\\"&&(a[f]=l.replace(/[A-Za-z]/g,function(a){a=a.charCodeAt(0);return"["+String.fromCharCode(a&-33,a|32)+"]"}));return a.join("")}for(var x=0,m=!1,j=!1,k=0,c=a.length;k<c;++k){var i=a[k];if(i.ignoreCase)j=!0;else if(/[a-z]/i.test(i.source.replace(/\\u[\da-f]{4}|\\x[\da-f]{2}|\\[^UXux]/gi,""))){m=!0;j=!1;break}}for(var r={b:8,t:9,n:10,v:11,
|
||||
f:12,r:13},n=[],k=0,c=a.length;k<c;++k){i=a[k];if(i.global||i.multiline)throw Error(""+i);n.push("(?:"+s(i)+")")}return RegExp(n.join("|"),j?"gi":"g")}function T(a,d){function g(a){var c=a.nodeType;if(c==1){if(!b.test(a.className)){for(c=a.firstChild;c;c=c.nextSibling)g(c);c=a.nodeName.toLowerCase();if("br"===c||"li"===c)s[j]="\n",m[j<<1]=x++,m[j++<<1|1]=a}}else if(c==3||c==4)c=a.nodeValue,c.length&&(c=d?c.replace(/\r\n?/g,"\n"):c.replace(/[\t\n\r ]+/g," "),s[j]=c,m[j<<1]=x,x+=c.length,m[j++<<1|1]=
|
||||
a)}var b=/(?:^|\s)nocode(?:\s|$)/,s=[],x=0,m=[],j=0;g(a);return{a:s.join("").replace(/\n$/,""),d:m}}function H(a,d,g,b){d&&(a={a:d,e:a},g(a),b.push.apply(b,a.g))}function U(a){for(var d=void 0,g=a.firstChild;g;g=g.nextSibling)var b=g.nodeType,d=b===1?d?a:g:b===3?V.test(g.nodeValue)?a:d:d;return d===a?void 0:d}function C(a,d){function g(a){for(var j=a.e,k=[j,"pln"],c=0,i=a.a.match(s)||[],r={},n=0,e=i.length;n<e;++n){var z=i[n],w=r[z],t=void 0,f;if(typeof w==="string")f=!1;else{var h=b[z.charAt(0)];
|
||||
if(h)t=z.match(h[1]),w=h[0];else{for(f=0;f<x;++f)if(h=d[f],t=z.match(h[1])){w=h[0];break}t||(w="pln")}if((f=w.length>=5&&"lang-"===w.substring(0,5))&&!(t&&typeof t[1]==="string"))f=!1,w="src";f||(r[z]=w)}h=c;c+=z.length;if(f){f=t[1];var l=z.indexOf(f),B=l+f.length;t[2]&&(B=z.length-t[2].length,l=B-f.length);w=w.substring(5);H(j+h,z.substring(0,l),g,k);H(j+h+l,f,I(w,f),k);H(j+h+B,z.substring(B),g,k)}else k.push(j+h,w)}a.g=k}var b={},s;(function(){for(var g=a.concat(d),j=[],k={},c=0,i=g.length;c<i;++c){var r=
|
||||
g[c],n=r[3];if(n)for(var e=n.length;--e>=0;)b[n.charAt(e)]=r;r=r[1];n=""+r;k.hasOwnProperty(n)||(j.push(r),k[n]=q)}j.push(/[\S\s]/);s=S(j)})();var x=d.length;return g}function v(a){var d=[],g=[];a.tripleQuotedStrings?d.push(["str",/^(?:'''(?:[^'\\]|\\[\S\s]|''?(?=[^']))*(?:'''|$)|"""(?:[^"\\]|\\[\S\s]|""?(?=[^"]))*(?:"""|$)|'(?:[^'\\]|\\[\S\s])*(?:'|$)|"(?:[^"\\]|\\[\S\s])*(?:"|$))/,q,"'\""]):a.multiLineStrings?d.push(["str",/^(?:'(?:[^'\\]|\\[\S\s])*(?:'|$)|"(?:[^"\\]|\\[\S\s])*(?:"|$)|`(?:[^\\`]|\\[\S\s])*(?:`|$))/,
|
||||
q,"'\"`"]):d.push(["str",/^(?:'(?:[^\n\r'\\]|\\.)*(?:'|$)|"(?:[^\n\r"\\]|\\.)*(?:"|$))/,q,"\"'"]);a.verbatimStrings&&g.push(["str",/^@"(?:[^"]|"")*(?:"|$)/,q]);var b=a.hashComments;b&&(a.cStyleComments?(b>1?d.push(["com",/^#(?:##(?:[^#]|#(?!##))*(?:###|$)|.*)/,q,"#"]):d.push(["com",/^#(?:(?:define|e(?:l|nd)if|else|error|ifn?def|include|line|pragma|undef|warning)\b|[^\n\r]*)/,q,"#"]),g.push(["str",/^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h(?:h|pp|\+\+)?|[a-z]\w*)>/,q])):d.push(["com",
|
||||
/^#[^\n\r]*/,q,"#"]));a.cStyleComments&&(g.push(["com",/^\/\/[^\n\r]*/,q]),g.push(["com",/^\/\*[\S\s]*?(?:\*\/|$)/,q]));if(b=a.regexLiterals){var s=(b=b>1?"":"\n\r")?".":"[\\S\\s]";g.push(["lang-regex",RegExp("^(?:^^\\.?|[+-]|[!=]=?=?|\\#|%=?|&&?=?|\\(|\\*=?|[+\\-]=|->|\\/=?|::?|<<?=?|>>?>?=?|,|;|\\?|@|\\[|~|{|\\^\\^?=?|\\|\\|?=?|break|case|continue|delete|do|else|finally|instanceof|return|throw|try|typeof)\\s*("+("/(?=[^/*"+b+"])(?:[^/\\x5B\\x5C"+b+"]|\\x5C"+s+"|\\x5B(?:[^\\x5C\\x5D"+b+"]|\\x5C"+
|
||||
s+")*(?:\\x5D|$))+/")+")")])}(b=a.types)&&g.push(["typ",b]);b=(""+a.keywords).replace(/^ | $/g,"");b.length&&g.push(["kwd",RegExp("^(?:"+b.replace(/[\s,]+/g,"|")+")\\b"),q]);d.push(["pln",/^\s+/,q," \r\n\t\u00a0"]);b="^.[^\\s\\w.$@'\"`/\\\\]*";a.regexLiterals&&(b+="(?!s*/)");g.push(["lit",/^@[$_a-z][\w$@]*/i,q],["typ",/^(?:[@_]?[A-Z]+[a-z][\w$@]*|\w+_t\b)/,q],["pln",/^[$_a-z][\w$@]*/i,q],["lit",/^(?:0x[\da-f]+|(?:\d(?:_\d+)*\d*(?:\.\d*)?|\.\d\+)(?:e[+-]?\d+)?)[a-z]*/i,q,"0123456789"],["pln",/^\\[\S\s]?/,
|
||||
q],["pun",RegExp(b),q]);return C(d,g)}function J(a,d,g){function b(a){var c=a.nodeType;if(c==1&&!x.test(a.className))if("br"===a.nodeName)s(a),a.parentNode&&a.parentNode.removeChild(a);else for(a=a.firstChild;a;a=a.nextSibling)b(a);else if((c==3||c==4)&&g){var d=a.nodeValue,i=d.match(m);if(i)c=d.substring(0,i.index),a.nodeValue=c,(d=d.substring(i.index+i[0].length))&&a.parentNode.insertBefore(j.createTextNode(d),a.nextSibling),s(a),c||a.parentNode.removeChild(a)}}function s(a){function b(a,c){var d=
|
||||
c?a.cloneNode(!1):a,e=a.parentNode;if(e){var e=b(e,1),g=a.nextSibling;e.appendChild(d);for(var i=g;i;i=g)g=i.nextSibling,e.appendChild(i)}return d}for(;!a.nextSibling;)if(a=a.parentNode,!a)return;for(var a=b(a.nextSibling,0),d;(d=a.parentNode)&&d.nodeType===1;)a=d;c.push(a)}for(var x=/(?:^|\s)nocode(?:\s|$)/,m=/\r\n?|\n/,j=a.ownerDocument,k=j.createElement("li");a.firstChild;)k.appendChild(a.firstChild);for(var c=[k],i=0;i<c.length;++i)b(c[i]);d===(d|0)&&c[0].setAttribute("value",d);var r=j.createElement("ol");
|
||||
r.className="linenums";for(var d=Math.max(0,d-1|0)||0,i=0,n=c.length;i<n;++i)k=c[i],k.className="L"+(i+d)%10,k.firstChild||k.appendChild(j.createTextNode("\u00a0")),r.appendChild(k);a.appendChild(r)}function p(a,d){for(var g=d.length;--g>=0;){var b=d[g];F.hasOwnProperty(b)?D.console&&console.warn("cannot override language handler %s",b):F[b]=a}}function I(a,d){if(!a||!F.hasOwnProperty(a))a=/^\s*</.test(d)?"default-markup":"default-code";return F[a]}function K(a){var d=a.h;try{var g=T(a.c,a.i),b=g.a;
|
||||
a.a=b;a.d=g.d;a.e=0;I(d,b)(a);var s=/\bMSIE\s(\d+)/.exec(navigator.userAgent),s=s&&+s[1]<=8,d=/\n/g,x=a.a,m=x.length,g=0,j=a.d,k=j.length,b=0,c=a.g,i=c.length,r=0;c[i]=m;var n,e;for(e=n=0;e<i;)c[e]!==c[e+2]?(c[n++]=c[e++],c[n++]=c[e++]):e+=2;i=n;for(e=n=0;e<i;){for(var p=c[e],w=c[e+1],t=e+2;t+2<=i&&c[t+1]===w;)t+=2;c[n++]=p;c[n++]=w;e=t}c.length=n;var f=a.c,h;if(f)h=f.style.display,f.style.display="none";try{for(;b<k;){var l=j[b+2]||m,B=c[r+2]||m,t=Math.min(l,B),A=j[b+1],G;if(A.nodeType!==1&&(G=x.substring(g,
|
||||
t))){s&&(G=G.replace(d,"\r"));A.nodeValue=G;var L=A.ownerDocument,o=L.createElement("span");o.className=c[r+1];var v=A.parentNode;v.replaceChild(o,A);o.appendChild(A);g<l&&(j[b+1]=A=L.createTextNode(x.substring(t,l)),v.insertBefore(A,o.nextSibling))}g=t;g>=l&&(b+=2);g>=B&&(r+=2)}}finally{if(f)f.style.display=h}}catch(u){D.console&&console.log(u&&u.stack||u)}}var D=window,y=["break,continue,do,else,for,if,return,while"],E=[[y,"auto,case,char,const,default,double,enum,extern,float,goto,inline,int,long,register,short,signed,sizeof,static,struct,switch,typedef,union,unsigned,void,volatile"],
|
||||
"catch,class,delete,false,import,new,operator,private,protected,public,this,throw,true,try,typeof"],M=[E,"alignof,align_union,asm,axiom,bool,concept,concept_map,const_cast,constexpr,decltype,delegate,dynamic_cast,explicit,export,friend,generic,late_check,mutable,namespace,nullptr,property,reinterpret_cast,static_assert,static_cast,template,typeid,typename,using,virtual,where"],N=[E,"abstract,assert,boolean,byte,extends,final,finally,implements,import,instanceof,interface,null,native,package,strictfp,super,synchronized,throws,transient"],
|
||||
O=[N,"as,base,by,checked,decimal,delegate,descending,dynamic,event,fixed,foreach,from,group,implicit,in,internal,into,is,let,lock,object,out,override,orderby,params,partial,readonly,ref,sbyte,sealed,stackalloc,string,select,uint,ulong,unchecked,unsafe,ushort,var,virtual,where"],E=[E,"debugger,eval,export,function,get,null,set,undefined,var,with,Infinity,NaN"],P=[y,"and,as,assert,class,def,del,elif,except,exec,finally,from,global,import,in,is,lambda,nonlocal,not,or,pass,print,raise,try,with,yield,False,True,None"],
|
||||
Q=[y,"alias,and,begin,case,class,def,defined,elsif,end,ensure,false,in,module,next,nil,not,or,redo,rescue,retry,self,super,then,true,undef,unless,until,when,yield,BEGIN,END"],W=[y,"as,assert,const,copy,drop,enum,extern,fail,false,fn,impl,let,log,loop,match,mod,move,mut,priv,pub,pure,ref,self,static,struct,true,trait,type,unsafe,use"],y=[y,"case,done,elif,esac,eval,fi,function,in,local,set,then,until"],R=/^(DIR|FILE|vector|(de|priority_)?queue|list|stack|(const_)?iterator|(multi)?(set|map)|bitset|u?(int|float)\d*)\b/,
|
||||
V=/\S/,X=v({keywords:[M,O,E,"caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END",P,Q,y],hashComments:!0,cStyleComments:!0,multiLineStrings:!0,regexLiterals:!0}),F={};p(X,["default-code"]);p(C([],[["pln",/^[^<?]+/],["dec",/^<!\w[^>]*(?:>|$)/],["com",/^<\!--[\S\s]*?(?:--\>|$)/],["lang-",/^<\?([\S\s]+?)(?:\?>|$)/],["lang-",/^<%([\S\s]+?)(?:%>|$)/],["pun",/^(?:<[%?]|[%?]>)/],["lang-",
|
||||
/^<xmp\b[^>]*>([\S\s]+?)<\/xmp\b[^>]*>/i],["lang-js",/^<script\b[^>]*>([\S\s]*?)(<\/script\b[^>]*>)/i],["lang-css",/^<style\b[^>]*>([\S\s]*?)(<\/style\b[^>]*>)/i],["lang-in.tag",/^(<\/?[a-z][^<>]*>)/i]]),["default-markup","htm","html","mxml","xhtml","xml","xsl"]);p(C([["pln",/^\s+/,q," \t\r\n"],["atv",/^(?:"[^"]*"?|'[^']*'?)/,q,"\"'"]],[["tag",/^^<\/?[a-z](?:[\w-.:]*\w)?|\/?>$/i],["atn",/^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i],["lang-uq.val",/^=\s*([^\s"'>]*(?:[^\s"'/>]|\/(?=\s)))/],["pun",/^[/<->]+/],
|
||||
["lang-js",/^on\w+\s*=\s*"([^"]+)"/i],["lang-js",/^on\w+\s*=\s*'([^']+)'/i],["lang-js",/^on\w+\s*=\s*([^\s"'>]+)/i],["lang-css",/^style\s*=\s*"([^"]+)"/i],["lang-css",/^style\s*=\s*'([^']+)'/i],["lang-css",/^style\s*=\s*([^\s"'>]+)/i]]),["in.tag"]);p(C([],[["atv",/^[\S\s]+/]]),["uq.val"]);p(v({keywords:M,hashComments:!0,cStyleComments:!0,types:R}),["c","cc","cpp","cxx","cyc","m"]);p(v({keywords:"null,true,false"}),["json"]);p(v({keywords:O,hashComments:!0,cStyleComments:!0,verbatimStrings:!0,types:R}),
|
||||
["cs"]);p(v({keywords:N,cStyleComments:!0}),["java"]);p(v({keywords:y,hashComments:!0,multiLineStrings:!0}),["bash","bsh","csh","sh"]);p(v({keywords:P,hashComments:!0,multiLineStrings:!0,tripleQuotedStrings:!0}),["cv","py","python"]);p(v({keywords:"caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END",hashComments:!0,multiLineStrings:!0,regexLiterals:2}),["perl","pl","pm"]);p(v({keywords:Q,
|
||||
hashComments:!0,multiLineStrings:!0,regexLiterals:!0}),["rb","ruby"]);p(v({keywords:E,cStyleComments:!0,regexLiterals:!0}),["javascript","js"]);p(v({keywords:"all,and,by,catch,class,else,extends,false,finally,for,if,in,is,isnt,loop,new,no,not,null,of,off,on,or,return,super,then,throw,true,try,unless,until,when,while,yes",hashComments:3,cStyleComments:!0,multilineStrings:!0,tripleQuotedStrings:!0,regexLiterals:!0}),["coffee"]);p(v({keywords:W,cStyleComments:!0,multilineStrings:!0}),["rc","rs","rust"]);
|
||||
p(C([],[["str",/^[\S\s]+/]]),["regex"]);var Y=D.PR={createSimpleLexer:C,registerLangHandler:p,sourceDecorator:v,PR_ATTRIB_NAME:"atn",PR_ATTRIB_VALUE:"atv",PR_COMMENT:"com",PR_DECLARATION:"dec",PR_KEYWORD:"kwd",PR_LITERAL:"lit",PR_NOCODE:"nocode",PR_PLAIN:"pln",PR_PUNCTUATION:"pun",PR_SOURCE:"src",PR_STRING:"str",PR_TAG:"tag",PR_TYPE:"typ",prettyPrintOne:D.prettyPrintOne=function(a,d,g){var b=document.createElement("div");b.innerHTML="<pre>"+a+"</pre>";b=b.firstChild;g&&J(b,g,!0);K({h:d,j:g,c:b,i:1});
|
||||
return b.innerHTML},prettyPrint:D.prettyPrint=function(a,d){function g(){for(var b=D.PR_SHOULD_USE_CONTINUATION?c.now()+250:Infinity;i<p.length&&c.now()<b;i++){for(var d=p[i],j=h,k=d;k=k.previousSibling;){var m=k.nodeType,o=(m===7||m===8)&&k.nodeValue;if(o?!/^\??prettify\b/.test(o):m!==3||/\S/.test(k.nodeValue))break;if(o){j={};o.replace(/\b(\w+)=([\w%+\-.:]+)/g,function(a,b,c){j[b]=c});break}}k=d.className;if((j!==h||e.test(k))&&!v.test(k)){m=!1;for(o=d.parentNode;o;o=o.parentNode)if(f.test(o.tagName)&&
|
||||
o.className&&e.test(o.className)){m=!0;break}if(!m){d.className+=" prettyprinted";m=j.lang;if(!m){var m=k.match(n),y;if(!m&&(y=U(d))&&t.test(y.tagName))m=y.className.match(n);m&&(m=m[1])}if(w.test(d.tagName))o=1;else var o=d.currentStyle,u=s.defaultView,o=(o=o?o.whiteSpace:u&&u.getComputedStyle?u.getComputedStyle(d,q).getPropertyValue("white-space"):0)&&"pre"===o.substring(0,3);u=j.linenums;if(!(u=u==="true"||+u))u=(u=k.match(/\blinenums\b(?::(\d+))?/))?u[1]&&u[1].length?+u[1]:!0:!1;u&&J(d,u,o);r=
|
||||
{h:m,c:d,j:u,i:o};K(r)}}}i<p.length?setTimeout(g,250):"function"===typeof a&&a()}for(var b=d||document.body,s=b.ownerDocument||document,b=[b.getElementsByTagName("pre"),b.getElementsByTagName("code"),b.getElementsByTagName("xmp")],p=[],m=0;m<b.length;++m)for(var j=0,k=b[m].length;j<k;++j)p.push(b[m][j]);var b=q,c=Date;c.now||(c={now:function(){return+new Date}});var i=0,r,n=/\blang(?:uage)?-([\w.]+)(?!\S)/,e=/\bprettyprint\b/,v=/\bprettyprinted\b/,w=/pre|xmp/i,t=/^code$/i,f=/^(?:pre|code|xmp)$/i,
|
||||
h={};g()}};typeof define==="function"&&define.amd&&define("google-code-prettify",[],function(){return Y})})();}()
|
||||
515
assets/js/vendor/jquery.scrollbar/includes/style.css
vendored
Normal file
515
assets/js/vendor/jquery.scrollbar/includes/style.css
vendored
Normal file
@@ -0,0 +1,515 @@
|
||||
/*! normalize.css v3.0.0 | MIT License | git.io/normalize */
|
||||
|
||||
/**
|
||||
* 1. Set default font family to sans-serif.
|
||||
* 2. Prevent iOS text size adjust after orientation change, without disabling
|
||||
* user zoom.
|
||||
*/
|
||||
html {
|
||||
font-family: sans-serif; /* 1 */
|
||||
-ms-text-size-adjust: 100%; /* 2 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove default margin.
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* HTML5 display definitions
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Correct `block` display not defined in IE 8/9.
|
||||
*/
|
||||
|
||||
article,
|
||||
aside,
|
||||
details,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
main,
|
||||
nav,
|
||||
section,
|
||||
summary {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct `inline-block` display not defined in IE 8/9.
|
||||
* 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
|
||||
*/
|
||||
|
||||
audio,
|
||||
canvas,
|
||||
progress,
|
||||
video {
|
||||
display: inline-block; /* 1 */
|
||||
vertical-align: baseline; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent modern browsers from displaying `audio` without controls.
|
||||
* Remove excess height in iOS 5 devices.
|
||||
*/
|
||||
|
||||
audio:not([controls]) {
|
||||
display: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address `[hidden]` styling not present in IE 8/9.
|
||||
* Hide the `template` element in IE, Safari, and Firefox < 22.
|
||||
*/
|
||||
|
||||
[hidden],
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Links
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the gray background color from active links in IE 10.
|
||||
*/
|
||||
|
||||
a {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/**
|
||||
* Improve readability when focused and also mouse hovered in all browsers.
|
||||
*/
|
||||
|
||||
a:active,
|
||||
a:hover {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
/* Text-level semantics
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Address styling not present in IE 8/9, Safari 5, and Chrome.
|
||||
*/
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: 1px dotted;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address styling not present in Safari 5 and Chrome.
|
||||
*/
|
||||
|
||||
dfn {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address variable `h1` font-size and margin within `section` and `article`
|
||||
* contexts in Firefox 4+, Safari 5, and Chrome.
|
||||
*/
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address styling not present in IE 8/9.
|
||||
*/
|
||||
|
||||
mark {
|
||||
background: #ff0;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address inconsistent and variable font size in all browsers.
|
||||
*/
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
|
||||
*/
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
/* Embedded content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove border when inside `a` element in IE 8/9.
|
||||
*/
|
||||
|
||||
img {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct overflow displayed oddly in IE 9.
|
||||
*/
|
||||
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Grouping content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Address margin not present in IE 8/9 and Safari 5.
|
||||
*/
|
||||
|
||||
figure {
|
||||
margin: 1em 40px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address differences between Firefox and other browsers.
|
||||
*/
|
||||
|
||||
hr {
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Contain overflow in all browsers.
|
||||
*/
|
||||
|
||||
pre {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address odd `em`-unit font size rendering in all browsers.
|
||||
*/
|
||||
|
||||
code,
|
||||
kbd,
|
||||
pre,
|
||||
samp {
|
||||
font-family: monospace, monospace;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
/* Forms
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Known limitation: by default, Chrome and Safari on OS X allow very limited
|
||||
* styling of `select`, unless a `border` property is set.
|
||||
*/
|
||||
|
||||
/**
|
||||
* 1. Correct color not being inherited.
|
||||
* Known issue: affects color of disabled elements.
|
||||
* 2. Correct font properties not being inherited.
|
||||
* 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
color: inherit; /* 1 */
|
||||
font: inherit; /* 2 */
|
||||
margin: 0; /* 3 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Address `overflow` set to `hidden` in IE 8/9/10.
|
||||
*/
|
||||
|
||||
button {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address inconsistent `text-transform` inheritance for `button` and `select`.
|
||||
* All other form control elements do not inherit `text-transform` values.
|
||||
* Correct `button` style inheritance in Firefox, IE 8+, and Opera
|
||||
* Correct `select` style inheritance in Firefox.
|
||||
*/
|
||||
|
||||
button,
|
||||
select {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
|
||||
* and `video` controls.
|
||||
* 2. Correct inability to style clickable `input` types in iOS.
|
||||
* 3. Improve usability and consistency of cursor style between image-type
|
||||
* `input` and others.
|
||||
*/
|
||||
|
||||
button,
|
||||
html input[type="button"], /* 1 */
|
||||
input[type="reset"],
|
||||
input[type="submit"] {
|
||||
-webkit-appearance: button; /* 2 */
|
||||
cursor: pointer; /* 3 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Re-set default cursor for disabled elements.
|
||||
*/
|
||||
|
||||
button[disabled],
|
||||
html input[disabled] {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove inner padding and border in Firefox 4+.
|
||||
*/
|
||||
|
||||
button::-moz-focus-inner,
|
||||
input::-moz-focus-inner {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
|
||||
* the UA stylesheet.
|
||||
*/
|
||||
|
||||
input {
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
/**
|
||||
* It's recommended that you don't attempt to style these elements.
|
||||
* Firefox's implementation doesn't respect box-sizing, padding, or width.
|
||||
*
|
||||
* 1. Address box sizing set to `content-box` in IE 8/9/10.
|
||||
* 2. Remove excess padding in IE 8/9/10.
|
||||
*/
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
box-sizing: border-box; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Fix the cursor style for Chrome's increment/decrement buttons. For certain
|
||||
* `font-size` values of the `input`, it causes the cursor style of the
|
||||
* decrement button to change from `default` to `text`.
|
||||
*/
|
||||
|
||||
input[type="number"]::-webkit-inner-spin-button,
|
||||
input[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
|
||||
* 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
|
||||
* (include `-moz` to future-proof).
|
||||
*/
|
||||
|
||||
input[type="search"] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
-moz-box-sizing: content-box;
|
||||
-webkit-box-sizing: content-box; /* 2 */
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove inner padding and search cancel button in Safari and Chrome on OS X.
|
||||
* Safari (but not Chrome) clips the cancel button when the search input has
|
||||
* padding (and `textfield` appearance).
|
||||
*/
|
||||
|
||||
input[type="search"]::-webkit-search-cancel-button,
|
||||
input[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Define consistent border, margin, and padding.
|
||||
*/
|
||||
|
||||
fieldset {
|
||||
border: 1px solid #c0c0c0;
|
||||
margin: 0 2px;
|
||||
padding: 0.35em 0.625em 0.75em;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct `color` not being inherited in IE 8/9.
|
||||
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
|
||||
*/
|
||||
|
||||
legend {
|
||||
border: 0; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove default vertical scrollbar in IE 8/9.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* Don't inherit the `font-weight` (applied by a rule above).
|
||||
* NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
|
||||
*/
|
||||
|
||||
optgroup {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Tables
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove most spacing between table cells.
|
||||
*/
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* General
|
||||
========================================================================== */
|
||||
html, body {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
body {
|
||||
background: #fff;
|
||||
font: 14px/1.55 Helvetica, sans-serif;
|
||||
color: #393938;
|
||||
}
|
||||
.wrapper {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
width: 100%;
|
||||
}
|
||||
.wrapper.scrollbar-dynamic {
|
||||
max-height: none;
|
||||
}
|
||||
.page-content {
|
||||
margin: 0 auto;
|
||||
max-width: 1600px;
|
||||
padding: 25px;
|
||||
}
|
||||
.content .demo {
|
||||
padding: 25px;
|
||||
}
|
||||
h1 {
|
||||
font: bold 32px/1.2 Helvetica, sans-serif;
|
||||
margin: 24px 0 16px;
|
||||
}
|
||||
h2 {
|
||||
font: bold 26px/1.2 Helvetica, sans-serif;
|
||||
margin: 24px 0 16px;
|
||||
}
|
||||
h3 {
|
||||
font: bold 22px/1.2 Helvetica, sans-serif;
|
||||
margin: 24px 0 16px;
|
||||
}
|
||||
h4 {
|
||||
font: bold 18px/1.2 Helvetica, sans-serif;
|
||||
margin: 24px 0 16px;
|
||||
}
|
||||
h5 {
|
||||
font: bold 16px/1.2 Helvetica, sans-serif;
|
||||
margin: 24px 0 16px;
|
||||
}
|
||||
h6 {
|
||||
font: bold 14px/1.2 Helvetica, sans-serif;
|
||||
margin: 24px 0 16px;
|
||||
}
|
||||
|
||||
/** Custom page styles **/
|
||||
|
||||
.content {
|
||||
max-width: 1200px;
|
||||
}
|
||||
|
||||
.content .demo {
|
||||
border: 1px solid #CCC;
|
||||
}
|
||||
|
||||
.content .demo .inner-content {
|
||||
border: 1px solid #CCC;
|
||||
max-height: 170px;
|
||||
width: 600px;
|
||||
}
|
||||
|
||||
.content .demo > div {
|
||||
max-height: 250px;
|
||||
overflow: auto;
|
||||
}
|
||||
.content .demo .permanent {
|
||||
min-width: 800px;
|
||||
}
|
||||
.controls {
|
||||
padding: 0 0 10px;
|
||||
}
|
||||
.controls span {
|
||||
cursor: pointer; padding: 2px 8px;
|
||||
}
|
||||
.controls span.active {
|
||||
background: #4698CE;
|
||||
color: #fff;
|
||||
cursor: default;
|
||||
}
|
||||
.prettyprint ol.linenums > li {
|
||||
list-style-type: decimal;
|
||||
}
|
||||
#lorem-ipsum {
|
||||
display: none;
|
||||
}
|
||||
371
assets/js/vendor/jquery.scrollbar/index.html
vendored
Normal file
371
assets/js/vendor/jquery.scrollbar/index.html
vendored
Normal file
@@ -0,0 +1,371 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>jQuery Scrollbar</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<link rel="stylesheet" href="includes/style.css">
|
||||
<link rel="stylesheet" href="includes/prettify/prettify.css">
|
||||
<link rel="stylesheet" href="jquery.scrollbar.css">
|
||||
|
||||
<script type="text/javascript" src="includes/prettify/prettify.js"></script>
|
||||
<script type="text/javascript" src="includes/jquery.js"></script>
|
||||
<script type="text/javascript" src="jquery.scrollbar.js"></script>
|
||||
<script type="text/javascript">
|
||||
jQuery(document).ready(function($){
|
||||
window.prettyPrint && prettyPrint();
|
||||
$('.wrapper').scrollbar();
|
||||
});
|
||||
</script>
|
||||
|
||||
<script type="text/javascript">
|
||||
if(window.location.href.match(/gromo.github.io/i)){
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-52878040-1', 'auto');
|
||||
ga('send', 'pageview');
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrapper scrollbar-dynamic">
|
||||
<div class="page-content">
|
||||
|
||||
<h1>jQuery Scrollbar</h1>
|
||||
|
||||
Cross-browser CSS customizable scrollbar with advanced features:
|
||||
<ul>
|
||||
<li>Easy to implement</li>
|
||||
<li>No fixed height or width needed</li>
|
||||
<li>Supports responsive design</li>
|
||||
<li>Customizable CSS</li>
|
||||
<li>Standard browser scroll behaviour</li>
|
||||
<li>Supports vertical and horizontal scrollbars or both</li>
|
||||
<li>Automatically re-initializes scrollbars</li>
|
||||
<li>Supports external scrollbars</li>
|
||||
<li>Provides a AngularJS directive</li>
|
||||
<li>Supports the use as textarea scrollbar</li>
|
||||
<li>Browser support: IE7+, Edge, Firefox, Opera, Chrome, Safari</li>
|
||||
</ul>
|
||||
|
||||
<h4><a href="demo/basic.html">Basic Scrollbars Demo</a></h4>
|
||||
<h4><a href="demo/advanced.html">Advanced Scrollbars Demo</a></h4>
|
||||
<h4><a href="demo/angular.html">jQuery Scrollbars as AngularJS directive</a></h4>
|
||||
<h4><a href="https://github.com/gromo/jquery.scrollbar/archive/gh-pages.zip">Download example</a></h4>
|
||||
|
||||
<h3>Easy to implement</h3>
|
||||
<p>
|
||||
Go to the demo pages, find a scrollbar that fits your needs, copy the HTML/CSS/JavaScript and paste it to your page.
|
||||
Modify CSS styles to change scrollbar colors/sizes. If you can't find a scrollbar that fits your needs, contact the
|
||||
author and your scrollbar will be added to the demo page.
|
||||
</p>
|
||||
|
||||
<h3>No fixed height or width needed</h3>
|
||||
<p>
|
||||
Most of the scrollbar plugins require container height or width to be set in order to calculate scrollbar sizes.
|
||||
jQuery Scrollbar does not require height, nor width. You can use max-height/max-width to restrict
|
||||
container sizes, or use standard height/width in pixels/percents in the parent container.
|
||||
</p>
|
||||
|
||||
<h3>Supports responsive design</h3>
|
||||
<p>
|
||||
jQuery Scrollbar can be used in responsive designs as there is no need to set fixed height/width to the container.
|
||||
Scrollbars will be automatically updated/hidden/displayed when content or container size changes.
|
||||
</p>
|
||||
|
||||
<h3>Customizable CSS</h3>
|
||||
<p>
|
||||
Use CSS to customize scrollbar colors, sizes or positions. Use simple or advanced HTML structure to
|
||||
customize how scrollbars should look. If simple or advanced HTML structure is not what you are looking for,
|
||||
you can use your own HTML structure with custom elements.
|
||||
</p>
|
||||
|
||||
<h3>Standard browser scroll behaviour</h3>
|
||||
<p>
|
||||
If your browser can scroll content, jQuery Scrollbar will scroll it too! Why? Because it does not emulate
|
||||
browser scroll behaviour as many plugins do, instead hides standard scrollbars and displays custom ones. You want
|
||||
to scroll with mouse middle button? – Just use it! You want to scroll with touch? – Do it! Your browser
|
||||
supports custom scroll behavior? – Use it too! Use the standard or jQuery scrollTop/scrollLeft functions to get
|
||||
current scroll offset or scroll to any position. Use the standard "scroll" event to handle content scrolling.
|
||||
You don't need to know custom functions/events – everything is done based on standard scroll behaviour.
|
||||
</p>
|
||||
|
||||
<h3>Supports vertical and horizontal scrollbars or both</h3>
|
||||
<p>
|
||||
Most of the scrollbar plugins allow using either vertical or horizontal scrollbars.
|
||||
Only a few can use both vertical and horizontal scrollbars and they are using scroll emulation
|
||||
which has limitations. jQuery Scrollbar does not emulate scroll behaviour. Also it can work
|
||||
with both vertical and horizontal scrollbars together.
|
||||
</p>
|
||||
|
||||
<h3>Automatically re-initializes scrollbars</h3>
|
||||
<p>
|
||||
Usually scrollbar size and positions are calculated when plugin is initialized. What if content or container
|
||||
size is changed with javascript/ajax? - You have to update plugin to recalculate scrollbar sizes. And it's
|
||||
OK because you know when content is changed. But what to do if you don't know when it is changed? For
|
||||
example, if content contains images without height/width. These images change content size after loading.
|
||||
There are 3 obvious ways: always set image height/width (and force users to set image size for content added
|
||||
with WYSIWYG editor), wait for whole page to load and then initialize scrollbars or handle content images
|
||||
loading and then re-initialize scrollbar plugin. Annoying, isn't it?
|
||||
</p>
|
||||
<p>
|
||||
jQuery Scrollbar handles content/container size changes and recalculate scrollbar sizes automatically. Just
|
||||
initialize it once and forget about it.
|
||||
</p>
|
||||
|
||||
<h3>Supports external scrollbars</h3>
|
||||
<p>
|
||||
jQuery Scrollbar supports 3 types of scrollbars: <strong>inner</strong> — scrollbar is displayed over
|
||||
content (Apple Mac OS); <strong>outer</strong> — scrollbar shifts content to display itself (Microsoft
|
||||
Windows scrollbars); <strong>external</strong> — scrollbar is located in any place of your page. So,
|
||||
you can choose between Apple Mac and Windows style scrollbar or even place it outside of the container and
|
||||
style it as you wish. Cool, isn't it?
|
||||
</p>
|
||||
|
||||
<h3>Provides a AngularJS directive</h3>
|
||||
<p>
|
||||
Now you can easily use jQuery Scrollbar with AngularJS as directive. Just include module <em>jQueryScrollbar</em>
|
||||
as dependency in your module, and you can use jQuery Scrollbar on your container with attribute
|
||||
<em>data-jquery-scrollbar</em>. <a href="demo/angular.html">jQuery Scrollbar as AngularJS directive</a>.
|
||||
</p>
|
||||
|
||||
<h3>Textarea scrollbars</h3>
|
||||
<p>
|
||||
Apply jQuery Scrollbar to your textarea and enjoy CSS styled scrollbars. Supports IE8+. Fixed height/width are required.
|
||||
</p>
|
||||
|
||||
<h3>Browser support: IE7+, Edge, Firefox, Opera, Chrome, Safari</h3>
|
||||
<p>
|
||||
Of course all modern browsers are supported starting from IE7. The most problematic browser is IE, as you
|
||||
already suspect. But it's not IE7, it's IE8! Surprised? I was! IE7 works better with height/width
|
||||
calculations than IE8. IE8 renderer is crashed when using <em>max-height</em> with <em>overflow:auto</em>.
|
||||
It is officially logged as a <a href="https://www.google.com/#q=IE8+max+height+crash" target="_blank">bug</a>
|
||||
in the final version of IE8 with no fix. There are also other bugs with max-height/max-width and positioning.
|
||||
So, be careful if you are going to support IE8.
|
||||
</p>
|
||||
|
||||
<h4>Advanced features that standard scroll has, but scroll emulation plugins have to emulate or don't have at all</h4>
|
||||
<ul>
|
||||
<li>mouse middle button / touch / arrow buttons scrolling</li>
|
||||
<li>auto content scrolling when selecting text</li>
|
||||
<li>auto scrolling to focused element</li>
|
||||
</ul>
|
||||
|
||||
<h2>jQuery Scrollbar Options</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<strong>autoScrollSize</strong> [true|false] (default: true)<br/>
|
||||
automatically calculate scrollbar size depending on container/content size
|
||||
</li>
|
||||
<li>
|
||||
<strong>autoUpdate</strong> [true|false] (default: true)<br/>
|
||||
automatically update scrollbar if container/content size is changed
|
||||
</li>
|
||||
<li>
|
||||
<strong>disableBodyScroll</strong> [true|false] (default: false)<br/>
|
||||
if this option is enabled and the mouse is over the scrollable container, the main page won't be scrolled
|
||||
</li>
|
||||
<li>
|
||||
<strong>duration</strong> [ms] (default: 200)<br/>
|
||||
scroll speed duration when the mouse is over scrollbar (scroll emulating mode)
|
||||
</li>
|
||||
<li>
|
||||
<strong>ignoreMobile</strong> [true|false] (default: false)<br/>
|
||||
do not initialize custom scrollbars on mobile devices
|
||||
</li>
|
||||
<li>
|
||||
<strong>ignoreOverlay</strong> [true|false] (default: false)<br/>
|
||||
do not initialize custom scrollbars in browsers when native scrollbars
|
||||
overlay content (Mac OS, mobile devices, etc...)
|
||||
</li>
|
||||
<li>
|
||||
<strong>scrollStep</strong> [px] (default: 30)<br/>
|
||||
scroll step when the mouse is over the scrollbar (scroll emulating mode)
|
||||
</li>
|
||||
<li>
|
||||
<strong>showArrows</strong> [true|false] (default: false)<br/>
|
||||
add a class to show scrollbar arrows in the advanced scrollbar
|
||||
</li>
|
||||
<li>
|
||||
<strong>stepScrolling</strong> [true|false] (default: true)<br/>
|
||||
emulate step scrolling on mousedown over scrollbar
|
||||
</li>
|
||||
<li>
|
||||
<strong>scrollx</strong> [string|element] (default: simple)<br/>
|
||||
<i>simple</i>, <i>advanced</i>, HTML or jQuery element for horizontal scrollbar
|
||||
</li>
|
||||
<li>
|
||||
<strong>scrolly</strong> [string|element] (default: simple)<br/>
|
||||
<i>simple</i>, <i>advanced</i>, HTML or jQuery element for vertical scrollbar
|
||||
</li>
|
||||
<li>
|
||||
<strong>onDestroy</strong> [function] (default: null)<br/>
|
||||
callback function when scrollbar is destroyed
|
||||
</li>
|
||||
<li>
|
||||
<strong>onInit</strong> [function] (default: null)<br/>
|
||||
callback function when scrollbar is initialized at the first time
|
||||
</li>
|
||||
<li>
|
||||
<strong>onScroll</strong> [function] (default: null)<br/>
|
||||
callback function when container is scrolled
|
||||
</li>
|
||||
<li>
|
||||
<strong>onUpdate</strong> [function] (default: null)<br/>
|
||||
callback function before scrollbars size is calculated
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h2>Limitations</h2>
|
||||
<ul>
|
||||
<li>scrollable elements should not have paddings, margins, left/top values</li>
|
||||
<li>do not use max-height in IE8 – it crashes browser renderer</li>
|
||||
<li>custom scroll is not initialized in Firefox under MacOS because of a bug while hiding native overlay scrollbar</li>
|
||||
<li>custom scroll works incorrectly if containers children's height is set in percent of parent (issue <a href="https://github.com/gromo/jquery.scrollbar/issues/57">#57</a>)</li>
|
||||
</ul>
|
||||
|
||||
<h2>FAQ</h2>
|
||||
<ol>
|
||||
<li>
|
||||
<p>
|
||||
<strong>Question:</strong> I need padding between border/scrollbar and text, but scrollbar does not
|
||||
allow it. What should I do?
|
||||
</p>
|
||||
<p>
|
||||
<strong>Answer:</strong> Wrap the inner content in the div with padding
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>
|
||||
<strong>Question:</strong> I need space between content with scrollbar and the rest of the page.
|
||||
What should I do?
|
||||
</p>
|
||||
<p>
|
||||
<strong>Answer:</strong> Wrap the scrollable content into container with padding.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>
|
||||
<strong>Question:</strong> If content contains images, content size can be changed after images will
|
||||
be loaded. Should I re-initialize scrollbar?
|
||||
</p>
|
||||
<p>
|
||||
<strong>Answer:</strong> No, scrollbar detects content/container size changes automatically and
|
||||
recalculates its size or hides/shows scrollbars.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>
|
||||
<strong>Question:</strong> How can I scroll content to a custom position?
|
||||
</p>
|
||||
<p>
|
||||
<strong>Answer:</strong> Use standard jQuery scrollTop/scrollLeft functions on the container.
|
||||
For example if you have a container with a class "scrollbar-macosx" use the following code to scroll 50px from top:
|
||||
<pre class="prettyprint linenums lang-js">
|
||||
jQuery('.scrollbar-macosx').scrollTop(50);</pre>
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>
|
||||
<strong>Question:</strong> I want to know when the content is scrolled. Is there any callback for this?
|
||||
</p>
|
||||
<p>
|
||||
<strong>Answer:</strong> Yes, you can use "onScroll" callback (look at AngularJS example),
|
||||
or use the standard "scroll" event on the container. For example you have a container with a class
|
||||
"scrollbar-macosx", then use the following code to handle the scroll event:
|
||||
<pre class="prettyprint linenums lang-js">
|
||||
jQuery('.scrollbar-macosx').not('.scroll-wrapper').on("scroll", function(){
|
||||
console.log('content is scrolling');
|
||||
});</pre>
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>
|
||||
<strong>Question:</strong> The scrollbar does not replace the standard scrollbar. What should I do?
|
||||
</p>
|
||||
<p>
|
||||
<strong>Answer:</strong> It's not a good idea to replace the standard scrollbar for a whole page. But if you
|
||||
really need it, wrap all page into container with height/width 100%, overflow: auto and apply
|
||||
the scrollbar to this container.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>
|
||||
<strong>Question:</strong> I don't want to see horizontal scrollbar ever. What should I do?
|
||||
</p>
|
||||
<p>
|
||||
<strong>Answer:</strong> Hide it with CSS like this:
|
||||
<pre class="prettyprint linenums lang-css">
|
||||
.scroll-element.scroll-x {
|
||||
display: none !important;
|
||||
}</pre>
|
||||
But don't forget that even if the scrollbar is hidden, the content still may be scrollable horizontally.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>
|
||||
<strong>Question:</strong> Using jQuery's .width() or .height() on a container
|
||||
will return incorrect values. What is going on?
|
||||
</p>
|
||||
<p>
|
||||
<strong>Answer:</strong> Inner scrollable content uses additional height/width & offset of the scrollbar
|
||||
to hide it. To get correct height/width values use the visible container:
|
||||
<pre class="prettyprint linenums lang-js">
|
||||
jQuery('.scrollbar-macosx').not('.scroll-content').height();
|
||||
jQuery('.scrollbar-macosx').not('.scroll-content').width();</pre>
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>
|
||||
<strong>Question:</strong> How to detect when a DIV is scrolled to the bottom edge?
|
||||
</p>
|
||||
<p>
|
||||
<strong>Answer:</strong> You can make calculations using jQuery's "scroll" event or you can use
|
||||
the "onScroll" callback function that provides information about container's sizes & offset:
|
||||
<pre class="prettyprint linenums lang-js">
|
||||
jQuery('.scrollbar-dynamic').scrollbar({
|
||||
"onScroll": function(y, x){
|
||||
if(y.scroll == y.maxScroll){
|
||||
console.log('Scrolled to bottom');
|
||||
}
|
||||
}
|
||||
});</pre>
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>
|
||||
<strong>Question:</strong> Can I use jQuery Scrollbar to customize textarea scrollbar?
|
||||
</p>
|
||||
<p>
|
||||
<strong>Answer:</strong> Yes, you can. Textarea scrollbars are supported now.
|
||||
Look at <a href="demo/basic.html">Basic Scrollbars Demo</a> page.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>
|
||||
<strong>Question:</strong> Is it possible to set scrollbars max/min size?
|
||||
</p>
|
||||
<p>
|
||||
<strong>Answer:</strong> Use CSS max-height/min-height (max-width/min-width) to set scrollbar size limits.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>
|
||||
<strong>Question:</strong> I have a question / want to report an issue. How can I contact the author?
|
||||
</p>
|
||||
<p>
|
||||
<strong>Answer:</strong> Please send an email to <a href="mailto:13real008@gmail.com">13real008@gmail.com</a>
|
||||
</p>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<h5 style="display:none;">
|
||||
<a href="https://docs.google.com/spreadsheet/ccc?key=0Ao4HbHsCLP0YdEhnZVh1WGZSbXloekZiNWlaNElnTnc&usp=sharing"
|
||||
target="_blank">Compare with other popular scrollbars</a>
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
791
assets/js/vendor/jquery.scrollbar/jquery.scrollbar.css
vendored
Normal file
791
assets/js/vendor/jquery.scrollbar/jquery.scrollbar.css
vendored
Normal file
@@ -0,0 +1,791 @@
|
||||
/*************** SCROLLBAR BASE CSS ***************/
|
||||
|
||||
.scroll-wrapper {
|
||||
overflow: hidden !important;
|
||||
padding: 0 !important;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.scroll-wrapper > .scroll-content {
|
||||
border: none !important;
|
||||
box-sizing: content-box !important;
|
||||
height: auto;
|
||||
left: 0;
|
||||
margin: 0;
|
||||
max-height: none;
|
||||
max-width: none !important;
|
||||
overflow: scroll !important;
|
||||
padding: 0;
|
||||
position: relative !important;
|
||||
top: 0;
|
||||
width: auto !important;
|
||||
}
|
||||
|
||||
.scroll-wrapper > .scroll-content::-webkit-scrollbar {
|
||||
height: 0;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.scroll-element {
|
||||
display: none;
|
||||
}
|
||||
.scroll-element, .scroll-element div {
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
.scroll-element.scroll-x.scroll-scrollx_visible,
|
||||
.scroll-element.scroll-y.scroll-scrolly_visible {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.scroll-element .scroll-bar,
|
||||
.scroll-element .scroll-arrow {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.scroll-textarea {
|
||||
border: 1px solid #cccccc;
|
||||
border-top-color: #999999;
|
||||
}
|
||||
.scroll-textarea > .scroll-content {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
.scroll-textarea > .scroll-content > textarea {
|
||||
border: none !important;
|
||||
box-sizing: border-box;
|
||||
height: 100% !important;
|
||||
margin: 0;
|
||||
max-height: none !important;
|
||||
max-width: none !important;
|
||||
overflow: scroll !important;
|
||||
outline: none;
|
||||
padding: 2px;
|
||||
position: relative !important;
|
||||
top: 0;
|
||||
width: 100% !important;
|
||||
}
|
||||
.scroll-textarea > .scroll-content > textarea::-webkit-scrollbar {
|
||||
height: 0;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*************** SIMPLE INNER SCROLLBAR ***************/
|
||||
|
||||
.scrollbar-inner > .scroll-element,
|
||||
.scrollbar-inner > .scroll-element div
|
||||
{
|
||||
border: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.scrollbar-inner > .scroll-element div {
|
||||
display: block;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.scrollbar-inner > .scroll-element.scroll-x {
|
||||
bottom: 2px;
|
||||
height: 8px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.scrollbar-inner > .scroll-element.scroll-y {
|
||||
height: 100%;
|
||||
right: 2px;
|
||||
top: 0;
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.scrollbar-inner > .scroll-element .scroll-element_outer {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.scrollbar-inner > .scroll-element .scroll-element_outer,
|
||||
.scrollbar-inner > .scroll-element .scroll-element_track,
|
||||
.scrollbar-inner > .scroll-element .scroll-bar {
|
||||
-webkit-border-radius: 8px;
|
||||
-moz-border-radius: 8px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.scrollbar-inner > .scroll-element .scroll-element_track,
|
||||
.scrollbar-inner > .scroll-element .scroll-bar {
|
||||
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
|
||||
filter: alpha(opacity=40);
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.scrollbar-inner > .scroll-element .scroll-element_track { background-color: #e0e0e0; }
|
||||
.scrollbar-inner > .scroll-element .scroll-bar { background-color: #c2c2c2; }
|
||||
.scrollbar-inner > .scroll-element:hover .scroll-bar { background-color: #919191; }
|
||||
.scrollbar-inner > .scroll-element.scroll-draggable .scroll-bar { background-color: #919191; }
|
||||
|
||||
|
||||
/* update scrollbar offset if both scrolls are visible */
|
||||
|
||||
.scrollbar-inner > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track { left: -12px; }
|
||||
.scrollbar-inner > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track { top: -12px; }
|
||||
|
||||
|
||||
.scrollbar-inner > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { left: -12px; }
|
||||
.scrollbar-inner > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { top: -12px; }
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*************** SIMPLE OUTER SCROLLBAR ***************/
|
||||
|
||||
.scrollbar-outer > .scroll-element,
|
||||
.scrollbar-outer > .scroll-element div
|
||||
{
|
||||
border: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.scrollbar-outer > .scroll-element {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.scrollbar-outer > .scroll-element div {
|
||||
display: block;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.scrollbar-outer > .scroll-element.scroll-x {
|
||||
bottom: 0;
|
||||
height: 12px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.scrollbar-outer > .scroll-element.scroll-y {
|
||||
height: 100%;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 12px;
|
||||
}
|
||||
|
||||
.scrollbar-outer > .scroll-element.scroll-x .scroll-element_outer { height: 8px; top: 2px; }
|
||||
.scrollbar-outer > .scroll-element.scroll-y .scroll-element_outer { left: 2px; width: 8px; }
|
||||
|
||||
.scrollbar-outer > .scroll-element .scroll-element_outer { overflow: hidden; }
|
||||
.scrollbar-outer > .scroll-element .scroll-element_track { background-color: #eeeeee; }
|
||||
|
||||
.scrollbar-outer > .scroll-element .scroll-element_outer,
|
||||
.scrollbar-outer > .scroll-element .scroll-element_track,
|
||||
.scrollbar-outer > .scroll-element .scroll-bar {
|
||||
-webkit-border-radius: 8px;
|
||||
-moz-border-radius: 8px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.scrollbar-outer > .scroll-element .scroll-bar { background-color: #d9d9d9; }
|
||||
.scrollbar-outer > .scroll-element .scroll-bar:hover { background-color: #c2c2c2; }
|
||||
.scrollbar-outer > .scroll-element.scroll-draggable .scroll-bar { background-color: #919191; }
|
||||
|
||||
|
||||
/* scrollbar height/width & offset from container borders */
|
||||
|
||||
.scrollbar-outer > .scroll-content.scroll-scrolly_visible { left: -12px; margin-left: 12px; }
|
||||
.scrollbar-outer > .scroll-content.scroll-scrollx_visible { top: -12px; margin-top: 12px; }
|
||||
|
||||
.scrollbar-outer > .scroll-element.scroll-x .scroll-bar { min-width: 10px; }
|
||||
.scrollbar-outer > .scroll-element.scroll-y .scroll-bar { min-height: 10px; }
|
||||
|
||||
|
||||
/* update scrollbar offset if both scrolls are visible */
|
||||
|
||||
.scrollbar-outer > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track { left: -14px; }
|
||||
.scrollbar-outer > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track { top: -14px; }
|
||||
|
||||
.scrollbar-outer > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { left: -14px; }
|
||||
.scrollbar-outer > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { top: -14px; }
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*************** SCROLLBAR MAC OS X ***************/
|
||||
|
||||
.scrollbar-macosx > .scroll-element,
|
||||
.scrollbar-macosx > .scroll-element div
|
||||
{
|
||||
background: none;
|
||||
border: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.scrollbar-macosx > .scroll-element div {
|
||||
display: block;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.scrollbar-macosx > .scroll-element .scroll-element_track { display: none; }
|
||||
.scrollbar-macosx > .scroll-element .scroll-bar {
|
||||
background-color: #6C6E71;
|
||||
display: block;
|
||||
|
||||
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
|
||||
filter: alpha(opacity=0);
|
||||
opacity: 0;
|
||||
|
||||
-webkit-border-radius: 7px;
|
||||
-moz-border-radius: 7px;
|
||||
border-radius: 7px;
|
||||
|
||||
-webkit-transition: opacity 0.2s linear;
|
||||
-moz-transition: opacity 0.2s linear;
|
||||
-o-transition: opacity 0.2s linear;
|
||||
-ms-transition: opacity 0.2s linear;
|
||||
transition: opacity 0.2s linear;
|
||||
}
|
||||
.scrollbar-macosx:hover > .scroll-element .scroll-bar,
|
||||
.scrollbar-macosx > .scroll-element.scroll-draggable .scroll-bar {
|
||||
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
|
||||
filter: alpha(opacity=70);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
|
||||
.scrollbar-macosx > .scroll-element.scroll-x {
|
||||
bottom: 0px;
|
||||
height: 0px;
|
||||
left: 0;
|
||||
min-width: 100%;
|
||||
overflow: visible;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.scrollbar-macosx > .scroll-element.scroll-y {
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
right: 0px;
|
||||
top: 0;
|
||||
width: 0px;
|
||||
}
|
||||
|
||||
/* scrollbar height/width & offset from container borders */
|
||||
.scrollbar-macosx > .scroll-element.scroll-x .scroll-bar { height: 7px; min-width: 10px; top: -9px; }
|
||||
.scrollbar-macosx > .scroll-element.scroll-y .scroll-bar { left: -9px; min-height: 10px; width: 7px; }
|
||||
|
||||
.scrollbar-macosx > .scroll-element.scroll-x .scroll-element_outer { left: 2px; }
|
||||
.scrollbar-macosx > .scroll-element.scroll-x .scroll-element_size { left: -4px; }
|
||||
|
||||
.scrollbar-macosx > .scroll-element.scroll-y .scroll-element_outer { top: 2px; }
|
||||
.scrollbar-macosx > .scroll-element.scroll-y .scroll-element_size { top: -4px; }
|
||||
|
||||
/* update scrollbar offset if both scrolls are visible */
|
||||
.scrollbar-macosx > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { left: -11px; }
|
||||
.scrollbar-macosx > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { top: -11px; }
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*************** SCROLLBAR LIGHT ***************/
|
||||
|
||||
.scrollbar-light > .scroll-element,
|
||||
.scrollbar-light > .scroll-element div {
|
||||
border: none;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.scrollbar-light > .scroll-element {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.scrollbar-light > .scroll-element div {
|
||||
display: block;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.scrollbar-light > .scroll-element .scroll-element_outer {
|
||||
-webkit-border-radius: 10px;
|
||||
-moz-border-radius: 10px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.scrollbar-light > .scroll-element .scroll-element_size {
|
||||
background: #dbdbdb;
|
||||
background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2RiZGJkYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlOGU4ZTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+');
|
||||
background: -moz-linear-gradient(left, #dbdbdb 0%, #e8e8e8 100%);
|
||||
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#dbdbdb), color-stop(100%,#e8e8e8));
|
||||
background: -webkit-linear-gradient(left, #dbdbdb 0%,#e8e8e8 100%);
|
||||
background: -o-linear-gradient(left, #dbdbdb 0%,#e8e8e8 100%);
|
||||
background: -ms-linear-gradient(left, #dbdbdb 0%,#e8e8e8 100%);
|
||||
background: linear-gradient(to right, #dbdbdb 0%,#e8e8e8 100%);
|
||||
|
||||
-webkit-border-radius: 10px;
|
||||
-moz-border-radius: 10px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.scrollbar-light > .scroll-element.scroll-x {
|
||||
bottom: 0;
|
||||
height: 17px;
|
||||
left: 0;
|
||||
min-width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.scrollbar-light > .scroll-element.scroll-y {
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 17px;
|
||||
}
|
||||
|
||||
.scrollbar-light > .scroll-element .scroll-bar {
|
||||
background: #fefefe;
|
||||
background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZlZmVmZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmNWY1ZjUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+');
|
||||
background: -moz-linear-gradient(left, #fefefe 0%, #f5f5f5 100%);
|
||||
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#fefefe), color-stop(100%,#f5f5f5));
|
||||
background: -webkit-linear-gradient(left, #fefefe 0%,#f5f5f5 100%);
|
||||
background: -o-linear-gradient(left, #fefefe 0%,#f5f5f5 100%);
|
||||
background: -ms-linear-gradient(left, #fefefe 0%,#f5f5f5 100%);
|
||||
background: linear-gradient(to right, #fefefe 0%,#f5f5f5 100%);
|
||||
|
||||
border: 1px solid #dbdbdb;
|
||||
-webkit-border-radius: 10px;
|
||||
-moz-border-radius: 10px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
/* scrollbar height/width & offset from container borders */
|
||||
|
||||
.scrollbar-light > .scroll-content.scroll-scrolly_visible { left: -17px; margin-left: 17px; }
|
||||
.scrollbar-light > .scroll-content.scroll-scrollx_visible { top: -17px; margin-top: 17px; }
|
||||
|
||||
.scrollbar-light > .scroll-element.scroll-x .scroll-bar { height: 10px; min-width: 10px; top: 0px; }
|
||||
.scrollbar-light > .scroll-element.scroll-y .scroll-bar { left: 0px; min-height: 10px; width: 10px; }
|
||||
|
||||
.scrollbar-light > .scroll-element.scroll-x .scroll-element_outer { height: 12px; left: 2px; top: 2px; }
|
||||
.scrollbar-light > .scroll-element.scroll-x .scroll-element_size { left: -4px; }
|
||||
|
||||
.scrollbar-light > .scroll-element.scroll-y .scroll-element_outer { left: 2px; top: 2px; width: 12px; }
|
||||
.scrollbar-light > .scroll-element.scroll-y .scroll-element_size { top: -4px; }
|
||||
|
||||
/* update scrollbar offset if both scrolls are visible */
|
||||
|
||||
.scrollbar-light > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { left: -19px; }
|
||||
.scrollbar-light > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { top: -19px; }
|
||||
|
||||
.scrollbar-light > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track { left: -19px; }
|
||||
.scrollbar-light > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track { top: -19px; }
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*************** SCROLLBAR RAIL ***************/
|
||||
|
||||
.scrollbar-rail > .scroll-element,
|
||||
.scrollbar-rail > .scroll-element div
|
||||
{
|
||||
border: none;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.scrollbar-rail > .scroll-element {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.scrollbar-rail > .scroll-element div {
|
||||
display: block;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.scrollbar-rail > .scroll-element .scroll-element_size {
|
||||
background-color: #999;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.scrollbar-rail > .scroll-element .scroll-element_outer:hover .scroll-element_size {
|
||||
background-color: #666;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.scrollbar-rail > .scroll-element.scroll-x {
|
||||
bottom: 0;
|
||||
height: 12px;
|
||||
left: 0;
|
||||
min-width: 100%;
|
||||
padding: 3px 0 2px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.scrollbar-rail > .scroll-element.scroll-y {
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
padding: 0 2px 0 3px;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 12px;
|
||||
}
|
||||
|
||||
.scrollbar-rail > .scroll-element .scroll-bar {
|
||||
background-color: #d0b9a0;
|
||||
|
||||
-webkit-border-radius: 2px;
|
||||
-moz-border-radius: 2px;
|
||||
border-radius: 2px;
|
||||
|
||||
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.scrollbar-rail > .scroll-element .scroll-element_outer:hover .scroll-bar {
|
||||
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
/* scrollbar height/width & offset from container borders */
|
||||
|
||||
.scrollbar-rail > .scroll-content.scroll-scrolly_visible { left: -17px; margin-left: 17px; }
|
||||
.scrollbar-rail > .scroll-content.scroll-scrollx_visible { margin-top: 17px; top: -17px; }
|
||||
|
||||
.scrollbar-rail > .scroll-element.scroll-x .scroll-bar { height: 10px; min-width: 10px; top: 1px; }
|
||||
.scrollbar-rail > .scroll-element.scroll-y .scroll-bar { left: 1px; min-height: 10px; width: 10px; }
|
||||
|
||||
.scrollbar-rail > .scroll-element.scroll-x .scroll-element_outer { height: 15px; left: 5px; }
|
||||
.scrollbar-rail > .scroll-element.scroll-x .scroll-element_size { height: 2px; left: -10px; top: 5px; }
|
||||
|
||||
.scrollbar-rail > .scroll-element.scroll-y .scroll-element_outer { top: 5px; width: 15px; }
|
||||
.scrollbar-rail > .scroll-element.scroll-y .scroll-element_size { left: 5px; top: -10px; width: 2px; }
|
||||
|
||||
/* update scrollbar offset if both scrolls are visible */
|
||||
|
||||
.scrollbar-rail > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { left: -25px; }
|
||||
.scrollbar-rail > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { top: -25px; }
|
||||
|
||||
.scrollbar-rail > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track { left: -25px; }
|
||||
.scrollbar-rail > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track { top: -25px; }
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*************** SCROLLBAR DYNAMIC ***************/
|
||||
|
||||
.scrollbar-dynamic > .scroll-element,
|
||||
.scrollbar-dynamic > .scroll-element div
|
||||
{
|
||||
background: none;
|
||||
border: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.scrollbar-dynamic > .scroll-element div {
|
||||
display: block;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.scrollbar-dynamic > .scroll-element.scroll-x {
|
||||
bottom: 2px;
|
||||
height: 7px;
|
||||
left: 0;
|
||||
min-width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.scrollbar-dynamic > .scroll-element.scroll-y {
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
right: 2px;
|
||||
top: 0;
|
||||
width: 7px;
|
||||
}
|
||||
|
||||
.scrollbar-dynamic > .scroll-element .scroll-element_outer {
|
||||
opacity: 0.3;
|
||||
|
||||
-webkit-border-radius: 12px;
|
||||
-moz-border-radius: 12px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
.scrollbar-dynamic > .scroll-element .scroll-element_size {
|
||||
background-color: #cccccc;
|
||||
opacity: 0;
|
||||
|
||||
-webkit-border-radius: 12px;
|
||||
-moz-border-radius: 12px;
|
||||
border-radius: 12px;
|
||||
|
||||
-webkit-transition: opacity 0.2s;
|
||||
-moz-transition: opacity 0.2s;
|
||||
-o-transition: opacity 0.2s;
|
||||
-ms-transition: opacity 0.2s;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.scrollbar-dynamic > .scroll-element .scroll-bar {
|
||||
background-color: #6c6e71;
|
||||
|
||||
-webkit-border-radius: 7px;
|
||||
-moz-border-radius: 7px;
|
||||
border-radius: 7px;
|
||||
}
|
||||
|
||||
/* scrollbar height/width & offset from container borders */
|
||||
|
||||
.scrollbar-dynamic > .scroll-element.scroll-x .scroll-bar {
|
||||
bottom: 0;
|
||||
height: 7px;
|
||||
min-width: 24px;
|
||||
top: auto;
|
||||
}
|
||||
.scrollbar-dynamic > .scroll-element.scroll-y .scroll-bar {
|
||||
left: auto;
|
||||
min-height: 24px;
|
||||
right: 0;
|
||||
width: 7px;
|
||||
}
|
||||
|
||||
.scrollbar-dynamic > .scroll-element.scroll-x .scroll-element_outer {
|
||||
bottom: 0;
|
||||
top: auto;
|
||||
left: 2px;
|
||||
|
||||
-webkit-transition: height 0.2s;
|
||||
-moz-transition: height 0.2s;
|
||||
-o-transition: height 0.2s;
|
||||
-ms-transition: height 0.2s;
|
||||
transition: height 0.2s;
|
||||
}
|
||||
|
||||
.scrollbar-dynamic > .scroll-element.scroll-y .scroll-element_outer {
|
||||
left: auto;
|
||||
right: 0;
|
||||
top: 2px;
|
||||
|
||||
-webkit-transition: width 0.2s;
|
||||
-moz-transition: width 0.2s;
|
||||
-o-transition: width 0.2s;
|
||||
-ms-transition: width 0.2s;
|
||||
transition: width 0.2s;
|
||||
}
|
||||
|
||||
.scrollbar-dynamic > .scroll-element.scroll-x .scroll-element_size { left: -4px; }
|
||||
.scrollbar-dynamic > .scroll-element.scroll-y .scroll-element_size { top: -4px; }
|
||||
|
||||
|
||||
/* update scrollbar offset if both scrolls are visible */
|
||||
|
||||
.scrollbar-dynamic > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { left: -11px; }
|
||||
.scrollbar-dynamic > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { top: -11px; }
|
||||
|
||||
|
||||
/* hover & drag */
|
||||
|
||||
.scrollbar-dynamic > .scroll-element:hover .scroll-element_outer,
|
||||
.scrollbar-dynamic > .scroll-element.scroll-draggable .scroll-element_outer {
|
||||
overflow: hidden;
|
||||
|
||||
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
|
||||
filter: alpha(opacity=70);
|
||||
opacity: 0.7;
|
||||
}
|
||||
.scrollbar-dynamic > .scroll-element:hover .scroll-element_outer .scroll-element_size,
|
||||
.scrollbar-dynamic > .scroll-element.scroll-draggable .scroll-element_outer .scroll-element_size {
|
||||
opacity: 1;
|
||||
}
|
||||
.scrollbar-dynamic > .scroll-element:hover .scroll-element_outer .scroll-bar,
|
||||
.scrollbar-dynamic > .scroll-element.scroll-draggable .scroll-element_outer .scroll-bar {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
-webkit-border-radius: 12px;
|
||||
-moz-border-radius: 12px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.scrollbar-dynamic > .scroll-element.scroll-x:hover .scroll-element_outer,
|
||||
.scrollbar-dynamic > .scroll-element.scroll-x.scroll-draggable .scroll-element_outer {
|
||||
height: 20px;
|
||||
min-height: 7px;
|
||||
}
|
||||
.scrollbar-dynamic > .scroll-element.scroll-y:hover .scroll-element_outer,
|
||||
.scrollbar-dynamic > .scroll-element.scroll-y.scroll-draggable .scroll-element_outer {
|
||||
min-width: 7px;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*************** SCROLLBAR GOOGLE CHROME ***************/
|
||||
|
||||
.scrollbar-chrome > .scroll-element,
|
||||
.scrollbar-chrome > .scroll-element div
|
||||
{
|
||||
border: none;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.scrollbar-chrome > .scroll-element {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.scrollbar-chrome > .scroll-element div {
|
||||
display: block;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.scrollbar-chrome > .scroll-element .scroll-element_outer {}
|
||||
|
||||
.scrollbar-chrome > .scroll-element .scroll-element_track {
|
||||
background: #f1f1f1;
|
||||
border: 1px solid #dbdbdb;
|
||||
}
|
||||
|
||||
.scrollbar-chrome > .scroll-element.scroll-x {
|
||||
bottom: 0;
|
||||
height: 16px;
|
||||
left: 0;
|
||||
min-width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.scrollbar-chrome > .scroll-element.scroll-y {
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
.scrollbar-chrome > .scroll-element .scroll-bar {
|
||||
background-color: #d9d9d9;
|
||||
border: 1px solid #bdbdbd;
|
||||
cursor: default;
|
||||
|
||||
-webkit-border-radius: 2px;
|
||||
-moz-border-radius: 2px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.scrollbar-chrome > .scroll-element .scroll-bar:hover {
|
||||
background-color: #c2c2c2;
|
||||
border-color: #a9a9a9;
|
||||
}
|
||||
|
||||
.scrollbar-chrome > .scroll-element.scroll-draggable .scroll-bar {
|
||||
background-color: #919191;
|
||||
border-color: #7e7e7e;
|
||||
}
|
||||
|
||||
/* scrollbar height/width & offset from container borders */
|
||||
|
||||
.scrollbar-chrome > .scroll-content.scroll-scrolly_visible { left: -16px; margin-left: 16px; }
|
||||
.scrollbar-chrome > .scroll-content.scroll-scrollx_visible { top: -16px; margin-top: 16px; }
|
||||
|
||||
.scrollbar-chrome > .scroll-element.scroll-x .scroll-bar { height: 8px; min-width: 10px; top: 3px; }
|
||||
.scrollbar-chrome > .scroll-element.scroll-y .scroll-bar { left: 3px; min-height: 10px; width: 8px; }
|
||||
|
||||
.scrollbar-chrome > .scroll-element.scroll-x .scroll-element_outer { border-left: 1px solid #dbdbdb; }
|
||||
.scrollbar-chrome > .scroll-element.scroll-x .scroll-element_track { height: 14px; left: -3px; }
|
||||
.scrollbar-chrome > .scroll-element.scroll-x .scroll-element_size { height: 14px; left: -4px; }
|
||||
|
||||
.scrollbar-chrome > .scroll-element.scroll-y .scroll-element_outer { border-top: 1px solid #dbdbdb; }
|
||||
.scrollbar-chrome > .scroll-element.scroll-y .scroll-element_track { top: -3px; width: 14px; }
|
||||
.scrollbar-chrome > .scroll-element.scroll-y .scroll-element_size { top: -4px; width: 14px; }
|
||||
|
||||
/* update scrollbar offset if both scrolls are visible */
|
||||
|
||||
.scrollbar-chrome > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { left: -19px; }
|
||||
.scrollbar-chrome > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { top: -19px; }
|
||||
|
||||
.scrollbar-chrome > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track { left: -19px; }
|
||||
.scrollbar-chrome > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track { top: -19px; }
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
781
assets/js/vendor/jquery.scrollbar/jquery.scrollbar.js
vendored
Normal file
781
assets/js/vendor/jquery.scrollbar/jquery.scrollbar.js
vendored
Normal file
@@ -0,0 +1,781 @@
|
||||
/**
|
||||
* jQuery CSS Customizable Scrollbar
|
||||
*
|
||||
* Copyright 2015, Yuriy Khabarov
|
||||
* Dual licensed under the MIT or GPL Version 2 licenses.
|
||||
*
|
||||
* If you found bug, please contact me via email <13real008@gmail.com>
|
||||
*
|
||||
* @author Yuriy Khabarov aka Gromo
|
||||
* @version 0.2.10
|
||||
* @url https://github.com/gromo/jquery.scrollbar/
|
||||
*
|
||||
*/
|
||||
;
|
||||
(function (root, factory) {
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
define(['jquery'], factory);
|
||||
} else {
|
||||
factory(root.jQuery);
|
||||
}
|
||||
}(this, function ($) {
|
||||
'use strict';
|
||||
|
||||
// init flags & variables
|
||||
var debug = false;
|
||||
|
||||
var browser = {
|
||||
data: {
|
||||
index: 0,
|
||||
name: 'scrollbar'
|
||||
},
|
||||
macosx: /mac/i.test(navigator.platform),
|
||||
mobile: /android|webos|iphone|ipad|ipod|blackberry/i.test(navigator.userAgent),
|
||||
overlay: null,
|
||||
scroll: null,
|
||||
scrolls: [],
|
||||
webkit: /webkit/i.test(navigator.userAgent) && !/edge\/\d+/i.test(navigator.userAgent)
|
||||
};
|
||||
|
||||
browser.scrolls.add = function (instance) {
|
||||
this.remove(instance).push(instance);
|
||||
};
|
||||
browser.scrolls.remove = function (instance) {
|
||||
while ($.inArray(instance, this) >= 0) {
|
||||
this.splice($.inArray(instance, this), 1);
|
||||
}
|
||||
return this;
|
||||
};
|
||||
|
||||
var defaults = {
|
||||
"autoScrollSize": true, // automatically calculate scrollsize
|
||||
"autoUpdate": true, // update scrollbar if content/container size changed
|
||||
"debug": false, // debug mode
|
||||
"disableBodyScroll": false, // disable body scroll if mouse over container
|
||||
"duration": 200, // scroll animate duration in ms
|
||||
"ignoreMobile": false, // ignore mobile devices
|
||||
"ignoreOverlay": false, // ignore browsers with overlay scrollbars (mobile, MacOS)
|
||||
"scrollStep": 30, // scroll step for scrollbar arrows
|
||||
"showArrows": false, // add class to show arrows
|
||||
"stepScrolling": true, // when scrolling to scrollbar mousedown position
|
||||
|
||||
"scrollx": null, // horizontal scroll element
|
||||
"scrolly": null, // vertical scroll element
|
||||
|
||||
"onDestroy": null, // callback function on destroy,
|
||||
"onInit": null, // callback function on first initialization
|
||||
"onScroll": null, // callback function on content scrolling
|
||||
"onUpdate": null // callback function on init/resize (before scrollbar size calculation)
|
||||
};
|
||||
|
||||
|
||||
var BaseScrollbar = function (container) {
|
||||
|
||||
if (!browser.scroll) {
|
||||
browser.overlay = isScrollOverlaysContent();
|
||||
browser.scroll = getBrowserScrollSize();
|
||||
updateScrollbars();
|
||||
|
||||
$(window).resize(function () {
|
||||
var forceUpdate = false;
|
||||
if (browser.scroll && (browser.scroll.height || browser.scroll.width)) {
|
||||
var scroll = getBrowserScrollSize();
|
||||
if (scroll.height !== browser.scroll.height || scroll.width !== browser.scroll.width) {
|
||||
browser.scroll = scroll;
|
||||
forceUpdate = true; // handle page zoom
|
||||
}
|
||||
}
|
||||
updateScrollbars(forceUpdate);
|
||||
});
|
||||
}
|
||||
|
||||
this.container = container;
|
||||
this.namespace = '.scrollbar_' + browser.data.index++;
|
||||
this.options = $.extend({}, defaults, window.jQueryScrollbarOptions || {});
|
||||
this.scrollTo = null;
|
||||
this.scrollx = {};
|
||||
this.scrolly = {};
|
||||
|
||||
container.data(browser.data.name, this);
|
||||
browser.scrolls.add(this);
|
||||
};
|
||||
|
||||
BaseScrollbar.prototype = {
|
||||
|
||||
destroy: function () {
|
||||
|
||||
if (!this.wrapper) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.container.removeData(browser.data.name);
|
||||
browser.scrolls.remove(this);
|
||||
|
||||
// init variables
|
||||
var scrollLeft = this.container.scrollLeft();
|
||||
var scrollTop = this.container.scrollTop();
|
||||
|
||||
this.container.insertBefore(this.wrapper).css({
|
||||
"height": "",
|
||||
"margin": "",
|
||||
"max-height": ""
|
||||
})
|
||||
.removeClass('scroll-content scroll-scrollx_visible scroll-scrolly_visible')
|
||||
.off(this.namespace)
|
||||
.scrollLeft(scrollLeft)
|
||||
.scrollTop(scrollTop);
|
||||
|
||||
this.scrollx.scroll.removeClass('scroll-scrollx_visible').find('div').andSelf().off(this.namespace);
|
||||
this.scrolly.scroll.removeClass('scroll-scrolly_visible').find('div').andSelf().off(this.namespace);
|
||||
|
||||
this.wrapper.remove();
|
||||
|
||||
$(document).add('body').off(this.namespace);
|
||||
|
||||
if ($.isFunction(this.options.onDestroy)){
|
||||
this.options.onDestroy.apply(this, [this.container]);
|
||||
}
|
||||
},
|
||||
init: function (options) {
|
||||
|
||||
// init variables
|
||||
var S = this,
|
||||
c = this.container,
|
||||
cw = this.containerWrapper || c,
|
||||
namespace = this.namespace,
|
||||
o = $.extend(this.options, options || {}),
|
||||
s = {x: this.scrollx, y: this.scrolly},
|
||||
w = this.wrapper;
|
||||
|
||||
var initScroll = {
|
||||
"scrollLeft": c.scrollLeft(),
|
||||
"scrollTop": c.scrollTop()
|
||||
};
|
||||
|
||||
// do not init if in ignorable browser
|
||||
if ((browser.mobile && o.ignoreMobile)
|
||||
|| (browser.overlay && o.ignoreOverlay)
|
||||
|| (browser.macosx && !browser.webkit) // still required to ignore nonWebKit browsers on Mac
|
||||
) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// init scroll container
|
||||
if (!w) {
|
||||
this.wrapper = w = $('<div>').addClass('scroll-wrapper').addClass(c.attr('class'))
|
||||
.css('position', c.css('position') == 'absolute' ? 'absolute' : 'relative')
|
||||
.insertBefore(c).append(c);
|
||||
|
||||
if (c.is('textarea')) {
|
||||
this.containerWrapper = cw = $('<div>').insertBefore(c).append(c);
|
||||
w.addClass('scroll-textarea');
|
||||
}
|
||||
|
||||
cw.addClass('scroll-content').css({
|
||||
"height": "auto",
|
||||
"margin-bottom": browser.scroll.height * -1 + 'px',
|
||||
"margin-right": browser.scroll.width * -1 + 'px',
|
||||
"max-height": ""
|
||||
});
|
||||
|
||||
c.on('scroll' + namespace, function (event) {
|
||||
if ($.isFunction(o.onScroll)) {
|
||||
o.onScroll.call(S, {
|
||||
"maxScroll": s.y.maxScrollOffset,
|
||||
"scroll": c.scrollTop(),
|
||||
"size": s.y.size,
|
||||
"visible": s.y.visible
|
||||
}, {
|
||||
"maxScroll": s.x.maxScrollOffset,
|
||||
"scroll": c.scrollLeft(),
|
||||
"size": s.x.size,
|
||||
"visible": s.x.visible
|
||||
});
|
||||
}
|
||||
s.x.isVisible && s.x.scroll.bar.css('left', c.scrollLeft() * s.x.kx + 'px');
|
||||
s.y.isVisible && s.y.scroll.bar.css('top', c.scrollTop() * s.y.kx + 'px');
|
||||
});
|
||||
|
||||
/* prevent native scrollbars to be visible on #anchor click */
|
||||
w.on('scroll' + namespace, function () {
|
||||
w.scrollTop(0).scrollLeft(0);
|
||||
});
|
||||
|
||||
if (o.disableBodyScroll) {
|
||||
var handleMouseScroll = function (event) {
|
||||
isVerticalScroll(event) ?
|
||||
s.y.isVisible && s.y.mousewheel(event) :
|
||||
s.x.isVisible && s.x.mousewheel(event);
|
||||
};
|
||||
w.on('MozMousePixelScroll' + namespace, handleMouseScroll);
|
||||
w.on('mousewheel' + namespace, handleMouseScroll);
|
||||
|
||||
if (browser.mobile) {
|
||||
w.on('touchstart' + namespace, function (event) {
|
||||
var touch = event.originalEvent.touches && event.originalEvent.touches[0] || event;
|
||||
var originalTouch = {
|
||||
"pageX": touch.pageX,
|
||||
"pageY": touch.pageY
|
||||
};
|
||||
var originalScroll = {
|
||||
"left": c.scrollLeft(),
|
||||
"top": c.scrollTop()
|
||||
};
|
||||
$(document).on('touchmove' + namespace, function (event) {
|
||||
var touch = event.originalEvent.targetTouches && event.originalEvent.targetTouches[0] || event;
|
||||
c.scrollLeft(originalScroll.left + originalTouch.pageX - touch.pageX);
|
||||
c.scrollTop(originalScroll.top + originalTouch.pageY - touch.pageY);
|
||||
event.preventDefault();
|
||||
});
|
||||
$(document).on('touchend' + namespace, function () {
|
||||
$(document).off(namespace);
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
if ($.isFunction(o.onInit)){
|
||||
o.onInit.apply(this, [c]);
|
||||
}
|
||||
} else {
|
||||
cw.css({
|
||||
"height": "auto",
|
||||
"margin-bottom": browser.scroll.height * -1 + 'px',
|
||||
"margin-right": browser.scroll.width * -1 + 'px',
|
||||
"max-height": ""
|
||||
});
|
||||
}
|
||||
|
||||
// init scrollbars & recalculate sizes
|
||||
$.each(s, function (d, scrollx) {
|
||||
|
||||
var scrollCallback = null;
|
||||
var scrollForward = 1;
|
||||
var scrollOffset = (d === 'x') ? 'scrollLeft' : 'scrollTop';
|
||||
var scrollStep = o.scrollStep;
|
||||
var scrollTo = function () {
|
||||
var currentOffset = c[scrollOffset]();
|
||||
c[scrollOffset](currentOffset + scrollStep);
|
||||
if (scrollForward == 1 && (currentOffset + scrollStep) >= scrollToValue)
|
||||
currentOffset = c[scrollOffset]();
|
||||
if (scrollForward == -1 && (currentOffset + scrollStep) <= scrollToValue)
|
||||
currentOffset = c[scrollOffset]();
|
||||
if (c[scrollOffset]() == currentOffset && scrollCallback) {
|
||||
scrollCallback();
|
||||
}
|
||||
}
|
||||
var scrollToValue = 0;
|
||||
|
||||
if (!scrollx.scroll) {
|
||||
|
||||
scrollx.scroll = S._getScroll(o['scroll' + d]).addClass('scroll-' + d);
|
||||
|
||||
if(o.showArrows){
|
||||
scrollx.scroll.addClass('scroll-element_arrows_visible');
|
||||
}
|
||||
|
||||
scrollx.mousewheel = function (event) {
|
||||
|
||||
if (!scrollx.isVisible || (d === 'x' && isVerticalScroll(event))) {
|
||||
return true;
|
||||
}
|
||||
if (d === 'y' && !isVerticalScroll(event)) {
|
||||
s.x.mousewheel(event);
|
||||
return true;
|
||||
}
|
||||
|
||||
var delta = event.originalEvent.wheelDelta * -1 || event.originalEvent.detail;
|
||||
var maxScrollValue = scrollx.size - scrollx.visible - scrollx.offset;
|
||||
|
||||
if ((delta > 0 && scrollToValue < maxScrollValue) || (delta < 0 && scrollToValue > 0)) {
|
||||
scrollToValue = scrollToValue + delta;
|
||||
if (scrollToValue < 0)
|
||||
scrollToValue = 0;
|
||||
if (scrollToValue > maxScrollValue)
|
||||
scrollToValue = maxScrollValue;
|
||||
|
||||
S.scrollTo = S.scrollTo || {};
|
||||
S.scrollTo[scrollOffset] = scrollToValue;
|
||||
setTimeout(function () {
|
||||
if (S.scrollTo) {
|
||||
c.stop().animate(S.scrollTo, 240, 'linear', function () {
|
||||
scrollToValue = c[scrollOffset]();
|
||||
});
|
||||
S.scrollTo = null;
|
||||
}
|
||||
}, 1);
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
return false;
|
||||
};
|
||||
|
||||
scrollx.scroll
|
||||
.on('MozMousePixelScroll' + namespace, scrollx.mousewheel)
|
||||
.on('mousewheel' + namespace, scrollx.mousewheel)
|
||||
.on('mouseenter' + namespace, function () {
|
||||
scrollToValue = c[scrollOffset]();
|
||||
});
|
||||
|
||||
// handle arrows & scroll inner mousedown event
|
||||
scrollx.scroll.find('.scroll-arrow, .scroll-element_track')
|
||||
.on('mousedown' + namespace, function (event) {
|
||||
|
||||
if (event.which != 1) // lmb
|
||||
return true;
|
||||
|
||||
scrollForward = 1;
|
||||
|
||||
var data = {
|
||||
"eventOffset": event[(d === 'x') ? 'pageX' : 'pageY'],
|
||||
"maxScrollValue": scrollx.size - scrollx.visible - scrollx.offset,
|
||||
"scrollbarOffset": scrollx.scroll.bar.offset()[(d === 'x') ? 'left' : 'top'],
|
||||
"scrollbarSize": scrollx.scroll.bar[(d === 'x') ? 'outerWidth' : 'outerHeight']()
|
||||
};
|
||||
var timeout = 0, timer = 0;
|
||||
|
||||
if ($(this).hasClass('scroll-arrow')) {
|
||||
scrollForward = $(this).hasClass("scroll-arrow_more") ? 1 : -1;
|
||||
scrollStep = o.scrollStep * scrollForward;
|
||||
scrollToValue = scrollForward > 0 ? data.maxScrollValue : 0;
|
||||
} else {
|
||||
scrollForward = (data.eventOffset > (data.scrollbarOffset + data.scrollbarSize) ? 1
|
||||
: (data.eventOffset < data.scrollbarOffset ? -1 : 0));
|
||||
scrollStep = Math.round(scrollx.visible * 0.75) * scrollForward;
|
||||
scrollToValue = (data.eventOffset - data.scrollbarOffset -
|
||||
(o.stepScrolling ? (scrollForward == 1 ? data.scrollbarSize : 0)
|
||||
: Math.round(data.scrollbarSize / 2)));
|
||||
scrollToValue = c[scrollOffset]() + (scrollToValue / scrollx.kx);
|
||||
}
|
||||
|
||||
S.scrollTo = S.scrollTo || {};
|
||||
S.scrollTo[scrollOffset] = o.stepScrolling ? c[scrollOffset]() + scrollStep : scrollToValue;
|
||||
|
||||
if (o.stepScrolling) {
|
||||
scrollCallback = function () {
|
||||
scrollToValue = c[scrollOffset]();
|
||||
clearInterval(timer);
|
||||
clearTimeout(timeout);
|
||||
timeout = 0;
|
||||
timer = 0;
|
||||
};
|
||||
timeout = setTimeout(function () {
|
||||
timer = setInterval(scrollTo, 40);
|
||||
}, o.duration + 100);
|
||||
}
|
||||
|
||||
setTimeout(function () {
|
||||
if (S.scrollTo) {
|
||||
c.animate(S.scrollTo, o.duration);
|
||||
S.scrollTo = null;
|
||||
}
|
||||
}, 1);
|
||||
|
||||
return S._handleMouseDown(scrollCallback, event);
|
||||
});
|
||||
|
||||
// handle scrollbar drag'n'drop
|
||||
scrollx.scroll.bar.on('mousedown' + namespace, function (event) {
|
||||
|
||||
if (event.which != 1) // lmb
|
||||
return true;
|
||||
|
||||
var eventPosition = event[(d === 'x') ? 'pageX' : 'pageY'];
|
||||
var initOffset = c[scrollOffset]();
|
||||
|
||||
scrollx.scroll.addClass('scroll-draggable');
|
||||
|
||||
$(document).on('mousemove' + namespace, function (event) {
|
||||
var diff = parseInt((event[(d === 'x') ? 'pageX' : 'pageY'] - eventPosition) / scrollx.kx, 10);
|
||||
c[scrollOffset](initOffset + diff);
|
||||
});
|
||||
|
||||
return S._handleMouseDown(function () {
|
||||
scrollx.scroll.removeClass('scroll-draggable');
|
||||
scrollToValue = c[scrollOffset]();
|
||||
}, event);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// remove classes & reset applied styles
|
||||
$.each(s, function (d, scrollx) {
|
||||
var scrollClass = 'scroll-scroll' + d + '_visible';
|
||||
var scrolly = (d == "x") ? s.y : s.x;
|
||||
|
||||
scrollx.scroll.removeClass(scrollClass);
|
||||
scrolly.scroll.removeClass(scrollClass);
|
||||
cw.removeClass(scrollClass);
|
||||
});
|
||||
|
||||
// calculate init sizes
|
||||
$.each(s, function (d, scrollx) {
|
||||
$.extend(scrollx, (d == "x") ? {
|
||||
"offset": parseInt(c.css('left'), 10) || 0,
|
||||
"size": c.prop('scrollWidth'),
|
||||
"visible": w.width()
|
||||
} : {
|
||||
"offset": parseInt(c.css('top'), 10) || 0,
|
||||
"size": c.prop('scrollHeight'),
|
||||
"visible": w.height()
|
||||
});
|
||||
});
|
||||
|
||||
// update scrollbar visibility/dimensions
|
||||
this._updateScroll('x', this.scrollx);
|
||||
this._updateScroll('y', this.scrolly);
|
||||
|
||||
if ($.isFunction(o.onUpdate)){
|
||||
o.onUpdate.apply(this, [c]);
|
||||
}
|
||||
|
||||
// calculate scroll size
|
||||
$.each(s, function (d, scrollx) {
|
||||
|
||||
var cssOffset = (d === 'x') ? 'left' : 'top';
|
||||
var cssFullSize = (d === 'x') ? 'outerWidth' : 'outerHeight';
|
||||
var cssSize = (d === 'x') ? 'width' : 'height';
|
||||
var offset = parseInt(c.css(cssOffset), 10) || 0;
|
||||
|
||||
var AreaSize = scrollx.size;
|
||||
var AreaVisible = scrollx.visible + offset;
|
||||
|
||||
var scrollSize = scrollx.scroll.size[cssFullSize]() + (parseInt(scrollx.scroll.size.css(cssOffset), 10) || 0);
|
||||
|
||||
if (o.autoScrollSize) {
|
||||
scrollx.scrollbarSize = parseInt(scrollSize * AreaVisible / AreaSize, 10);
|
||||
scrollx.scroll.bar.css(cssSize, scrollx.scrollbarSize + 'px');
|
||||
}
|
||||
|
||||
scrollx.scrollbarSize = scrollx.scroll.bar[cssFullSize]();
|
||||
scrollx.kx = ((scrollSize - scrollx.scrollbarSize) / (AreaSize - AreaVisible)) || 1;
|
||||
scrollx.maxScrollOffset = AreaSize - AreaVisible;
|
||||
});
|
||||
|
||||
c.scrollLeft(initScroll.scrollLeft).scrollTop(initScroll.scrollTop).trigger('scroll');
|
||||
},
|
||||
|
||||
/**
|
||||
* Get scrollx/scrolly object
|
||||
*
|
||||
* @param {Mixed} scroll
|
||||
* @returns {jQuery} scroll object
|
||||
*/
|
||||
_getScroll: function (scroll) {
|
||||
var types = {
|
||||
advanced: [
|
||||
'<div class="scroll-element">',
|
||||
'<div class="scroll-element_corner"></div>',
|
||||
'<div class="scroll-arrow scroll-arrow_less"></div>',
|
||||
'<div class="scroll-arrow scroll-arrow_more"></div>',
|
||||
'<div class="scroll-element_outer">',
|
||||
'<div class="scroll-element_size"></div>', // required! used for scrollbar size calculation !
|
||||
'<div class="scroll-element_inner-wrapper">',
|
||||
'<div class="scroll-element_inner scroll-element_track">', // used for handling scrollbar click
|
||||
'<div class="scroll-element_inner-bottom"></div>',
|
||||
'</div>',
|
||||
'</div>',
|
||||
'<div class="scroll-bar">', // required
|
||||
'<div class="scroll-bar_body">',
|
||||
'<div class="scroll-bar_body-inner"></div>',
|
||||
'</div>',
|
||||
'<div class="scroll-bar_bottom"></div>',
|
||||
'<div class="scroll-bar_center"></div>',
|
||||
'</div>',
|
||||
'</div>',
|
||||
'</div>'
|
||||
].join(''),
|
||||
simple: [
|
||||
'<div class="scroll-element">',
|
||||
'<div class="scroll-element_outer">',
|
||||
'<div class="scroll-element_size"></div>', // required! used for scrollbar size calculation !
|
||||
'<div class="scroll-element_track"></div>', // used for handling scrollbar click
|
||||
'<div class="scroll-bar"></div>', // required
|
||||
'</div>',
|
||||
'</div>'
|
||||
].join('')
|
||||
};
|
||||
if (types[scroll]) {
|
||||
scroll = types[scroll];
|
||||
}
|
||||
if (!scroll) {
|
||||
scroll = types['simple'];
|
||||
}
|
||||
if (typeof (scroll) == 'string') {
|
||||
scroll = $(scroll).appendTo(this.wrapper);
|
||||
} else {
|
||||
scroll = $(scroll);
|
||||
}
|
||||
$.extend(scroll, {
|
||||
bar: scroll.find('.scroll-bar'),
|
||||
size: scroll.find('.scroll-element_size'),
|
||||
track: scroll.find('.scroll-element_track')
|
||||
});
|
||||
return scroll;
|
||||
},
|
||||
|
||||
_handleMouseDown: function(callback, event) {
|
||||
|
||||
var namespace = this.namespace;
|
||||
|
||||
$(document).on('blur' + namespace, function () {
|
||||
$(document).add('body').off(namespace);
|
||||
callback && callback();
|
||||
});
|
||||
$(document).on('dragstart' + namespace, function (event) {
|
||||
event.preventDefault();
|
||||
return false;
|
||||
});
|
||||
$(document).on('mouseup' + namespace, function () {
|
||||
$(document).add('body').off(namespace);
|
||||
callback && callback();
|
||||
});
|
||||
$('body').on('selectstart' + namespace, function (event) {
|
||||
event.preventDefault();
|
||||
return false;
|
||||
});
|
||||
|
||||
event && event.preventDefault();
|
||||
return false;
|
||||
},
|
||||
|
||||
_updateScroll: function (d, scrollx) {
|
||||
|
||||
var container = this.container,
|
||||
containerWrapper = this.containerWrapper || container,
|
||||
scrollClass = 'scroll-scroll' + d + '_visible',
|
||||
scrolly = (d === 'x') ? this.scrolly : this.scrollx,
|
||||
offset = parseInt(this.container.css((d === 'x') ? 'left' : 'top'), 10) || 0,
|
||||
wrapper = this.wrapper;
|
||||
|
||||
var AreaSize = scrollx.size;
|
||||
var AreaVisible = scrollx.visible + offset;
|
||||
|
||||
scrollx.isVisible = (AreaSize - AreaVisible) > 1; // bug in IE9/11 with 1px diff
|
||||
if (scrollx.isVisible) {
|
||||
scrollx.scroll.addClass(scrollClass);
|
||||
scrolly.scroll.addClass(scrollClass);
|
||||
containerWrapper.addClass(scrollClass);
|
||||
} else {
|
||||
scrollx.scroll.removeClass(scrollClass);
|
||||
scrolly.scroll.removeClass(scrollClass);
|
||||
containerWrapper.removeClass(scrollClass);
|
||||
}
|
||||
|
||||
if (d === 'y') {
|
||||
if(container.is('textarea') || AreaSize < AreaVisible){
|
||||
containerWrapper.css({
|
||||
"height": (AreaVisible + browser.scroll.height) + 'px',
|
||||
"max-height": "none"
|
||||
});
|
||||
} else {
|
||||
containerWrapper.css({
|
||||
//"height": "auto", // do not reset height value: issue with height:100%!
|
||||
"max-height": (AreaVisible + browser.scroll.height) + 'px'
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (scrollx.size != container.prop('scrollWidth')
|
||||
|| scrolly.size != container.prop('scrollHeight')
|
||||
|| scrollx.visible != wrapper.width()
|
||||
|| scrolly.visible != wrapper.height()
|
||||
|| scrollx.offset != (parseInt(container.css('left'), 10) || 0)
|
||||
|| scrolly.offset != (parseInt(container.css('top'), 10) || 0)
|
||||
) {
|
||||
$.extend(this.scrollx, {
|
||||
"offset": parseInt(container.css('left'), 10) || 0,
|
||||
"size": container.prop('scrollWidth'),
|
||||
"visible": wrapper.width()
|
||||
});
|
||||
$.extend(this.scrolly, {
|
||||
"offset": parseInt(container.css('top'), 10) || 0,
|
||||
"size": this.container.prop('scrollHeight'),
|
||||
"visible": wrapper.height()
|
||||
});
|
||||
this._updateScroll(d === 'x' ? 'y' : 'x', scrolly);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var CustomScrollbar = BaseScrollbar;
|
||||
|
||||
/*
|
||||
* Extend jQuery as plugin
|
||||
*
|
||||
* @param {Mixed} command to execute
|
||||
* @param {Mixed} arguments as Array
|
||||
* @return {jQuery}
|
||||
*/
|
||||
$.fn.scrollbar = function (command, args) {
|
||||
if (typeof command !== 'string') {
|
||||
args = command;
|
||||
command = 'init';
|
||||
}
|
||||
if (typeof args === 'undefined') {
|
||||
args = [];
|
||||
}
|
||||
if (!$.isArray(args)) {
|
||||
args = [args];
|
||||
}
|
||||
this.not('body, .scroll-wrapper').each(function () {
|
||||
var element = $(this),
|
||||
instance = element.data(browser.data.name);
|
||||
if (instance || command === 'init') {
|
||||
if (!instance) {
|
||||
instance = new CustomScrollbar(element);
|
||||
}
|
||||
if (instance[command]) {
|
||||
instance[command].apply(instance, args);
|
||||
}
|
||||
}
|
||||
});
|
||||
return this;
|
||||
};
|
||||
|
||||
/**
|
||||
* Connect default options to global object
|
||||
*/
|
||||
$.fn.scrollbar.options = defaults;
|
||||
|
||||
|
||||
/**
|
||||
* Check if scroll content/container size is changed
|
||||
*/
|
||||
|
||||
var updateScrollbars = (function () {
|
||||
var timer = 0,
|
||||
timerCounter = 0;
|
||||
|
||||
return function (force) {
|
||||
var i, container, options, scroll, wrapper, scrollx, scrolly;
|
||||
for (i = 0; i < browser.scrolls.length; i++) {
|
||||
scroll = browser.scrolls[i];
|
||||
container = scroll.container;
|
||||
options = scroll.options;
|
||||
wrapper = scroll.wrapper;
|
||||
scrollx = scroll.scrollx;
|
||||
scrolly = scroll.scrolly;
|
||||
if (force || (options.autoUpdate && wrapper && wrapper.is(':visible') &&
|
||||
(container.prop('scrollWidth') != scrollx.size || container.prop('scrollHeight') != scrolly.size || wrapper.width() != scrollx.visible || wrapper.height() != scrolly.visible))) {
|
||||
scroll.init();
|
||||
|
||||
if (options.debug) {
|
||||
window.console && console.log({
|
||||
scrollHeight: container.prop('scrollHeight') + ':' + scroll.scrolly.size,
|
||||
scrollWidth: container.prop('scrollWidth') + ':' + scroll.scrollx.size,
|
||||
visibleHeight: wrapper.height() + ':' + scroll.scrolly.visible,
|
||||
visibleWidth: wrapper.width() + ':' + scroll.scrollx.visible
|
||||
}, true);
|
||||
timerCounter++;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (debug && timerCounter > 10) {
|
||||
window.console && console.log('Scroll updates exceed 10');
|
||||
updateScrollbars = function () {};
|
||||
} else {
|
||||
clearTimeout(timer);
|
||||
timer = setTimeout(updateScrollbars, 300);
|
||||
}
|
||||
};
|
||||
})();
|
||||
|
||||
/* ADDITIONAL FUNCTIONS */
|
||||
/**
|
||||
* Get native browser scrollbar size (height/width)
|
||||
*
|
||||
* @param {Boolean} actual size or CSS size, default - CSS size
|
||||
* @returns {Object} with height, width
|
||||
*/
|
||||
function getBrowserScrollSize(actualSize) {
|
||||
|
||||
if (browser.webkit && !actualSize) {
|
||||
return {
|
||||
"height": 0,
|
||||
"width": 0
|
||||
};
|
||||
}
|
||||
|
||||
if (!browser.data.outer) {
|
||||
var css = {
|
||||
"border": "none",
|
||||
"box-sizing": "content-box",
|
||||
"height": "200px",
|
||||
"margin": "0",
|
||||
"padding": "0",
|
||||
"width": "200px"
|
||||
};
|
||||
browser.data.inner = $("<div>").css($.extend({}, css));
|
||||
browser.data.outer = $("<div>").css($.extend({
|
||||
"left": "-1000px",
|
||||
"overflow": "scroll",
|
||||
"position": "absolute",
|
||||
"top": "-1000px"
|
||||
}, css)).append(browser.data.inner).appendTo("body");
|
||||
}
|
||||
|
||||
browser.data.outer.scrollLeft(1000).scrollTop(1000);
|
||||
|
||||
return {
|
||||
"height": Math.ceil((browser.data.outer.offset().top - browser.data.inner.offset().top) || 0),
|
||||
"width": Math.ceil((browser.data.outer.offset().left - browser.data.inner.offset().left) || 0)
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if native browser scrollbars overlay content
|
||||
*
|
||||
* @returns {Boolean}
|
||||
*/
|
||||
function isScrollOverlaysContent() {
|
||||
var scrollSize = getBrowserScrollSize(true);
|
||||
return !(scrollSize.height || scrollSize.width);
|
||||
}
|
||||
|
||||
function isVerticalScroll(event) {
|
||||
var e = event.originalEvent;
|
||||
if (e.axis && e.axis === e.HORIZONTAL_AXIS)
|
||||
return false;
|
||||
if (e.wheelDeltaX)
|
||||
return false;
|
||||
return true;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Extend AngularJS as UI directive
|
||||
* and expose a provider for override default config
|
||||
*
|
||||
*/
|
||||
if (window.angular) {
|
||||
(function (angular) {
|
||||
angular.module('jQueryScrollbar', [])
|
||||
.provider('jQueryScrollbar', function () {
|
||||
var defaultOptions = defaults;
|
||||
return {
|
||||
setOptions: function (options) {
|
||||
angular.extend(defaultOptions, options);
|
||||
},
|
||||
$get: function () {
|
||||
return {
|
||||
options: angular.copy(defaultOptions)
|
||||
};
|
||||
}
|
||||
};
|
||||
})
|
||||
.directive('jqueryScrollbar', ['jQueryScrollbar', '$parse', function (jQueryScrollbar, $parse) {
|
||||
return {
|
||||
"restrict": "AC",
|
||||
"link": function (scope, element, attrs) {
|
||||
var model = $parse(attrs.jqueryScrollbar),
|
||||
options = model(scope);
|
||||
element.scrollbar(options || jQueryScrollbar.options)
|
||||
.on('$destroy', function () {
|
||||
element.scrollbar('destroy');
|
||||
});
|
||||
}
|
||||
};
|
||||
}]);
|
||||
})(window.angular);
|
||||
}
|
||||
}));
|
||||
Reference in New Issue
Block a user