delf/profile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add files

Browse Source
This commit is contained in:
Andrey Kuvshinov
2025-07-09 21:21:17 +03:00
commit 8fc8cbae32
596 changed files with 207566 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

812
assets/js/vendor/jquery.scrollbar/demo/advanced.html vendored Normal file
View 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="../">&laquo; 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
View 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="../">&laquo; 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
View File

File diff suppressed because it is too large Load Diff