-
Notifications
You must be signed in to change notification settings - Fork 67
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
unknown
committed
Mar 24, 2022
1 parent
f861657
commit e4e6434
Showing
22 changed files
with
1,141 additions
and
80 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Large diffs are not rendered by default.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,115 @@ | ||
<!DOCTYPE html> | ||
<html> | ||
<head> | ||
<title>perfect-scrollbar</title> | ||
<link href="bootstrap-combined.min.css" rel="stylesheet"> | ||
<link href="perfect-scrollbar.min.css" rel="stylesheet"> | ||
<link href="prettify.css" rel="stylesheet"> | ||
<style> | ||
.body { padding: 50px 0px; } | ||
.logo { font-size:100px; text-align:center; line-height: 70px; } | ||
.description { padding-top: 20px; text-align:center; } | ||
.subtitle { padding-top: 30px; } | ||
.list { margin-bottom: 5px; } | ||
#Demo { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: hidden; } | ||
#Demo .content { background-image: url('./azusa.jpg'); width: 1280px; height: 720px; } | ||
</style> | ||
</head> | ||
<body> | ||
<a href="https://github.com/noraesae/perfect-scrollbar"> | ||
<img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"> | ||
</a> | ||
<div class='body'> | ||
<h1 class='logo'>perfect-scrollbar</h1> | ||
<p class='lead' style='text-align:center;'>Minimalistic but perfect custom scrollbar plugin</p> | ||
<div class='description'> | ||
<h2 class='subtitle'><i>perfect</i> means...</h2> | ||
<p class='lead list'>There's no css change on any original element</p> | ||
<p class='lead list'>Do not affect the original design layout</p> | ||
<p class='lead list'>The scrollbar css is fully customizable</p> | ||
<p class='lead list'>The scrollbar size and position can be updated</p> | ||
<h2 class='subtitle'>Demo</h2> | ||
<div id='Demo'> | ||
<div class='content'> | ||
</div> | ||
</div> | ||
<div style='margin-top:15px;'> | ||
<div class='input-prepend'> | ||
<span class='add-on' style='width:100px;'>Width: </span> | ||
<input type='text' id='Width' placeholder='600'> | ||
</div> | ||
<div class='input-prepend'> | ||
<span class='add-on' style='width:100px;'>Height: </span> | ||
<input type='text' id='Height' placeholder='400'> | ||
</div> | ||
<button class='btn btn-primary' onclick='changeSize()'>Change Size!</button> | ||
</div> | ||
<h2 class='subtitle'>Source</h2> | ||
<pre style='text-align:left;width:500px;margin:0px auto;' class='prettyprint'> | ||
function changeSize() { | ||
var width = parseInt($("#Width").val()); | ||
var height = parseInt($("#Height").val()); | ||
|
||
$("#Demo").width(width).height(height); | ||
|
||
// update scrollbars | ||
$('#Demo').perfectScrollbar('update'); | ||
|
||
// or even with vanilla JS! | ||
Ps.update(document.getElementById('Demo')); | ||
} | ||
|
||
$(function() { | ||
$('#Demo').perfectScrollbar(); | ||
|
||
// with vanilla JS! | ||
Ps.initialize(document.getElementById('Demo')); | ||
}); | ||
</pre> | ||
<h2 class='subtitle'>Download</h2> | ||
<p> | ||
<a href='https://github.com/noraesae/perfect-scrollbar/releases' class='btn btn-primary btn-large'>perfect-scrollbar v0.6.16</a> | ||
</p> | ||
<h2 class='subtitle'>Documentation</h2> | ||
<p class='lead'> | ||
Please refer to the README file in <a href='http://github.com/noraesae/perfect-scrollbar'>GitHub Repo</a>. | ||
</p> | ||
<h2 class='subtitle'>License</h2> | ||
<p class='lead'> | ||
The MIT License (MIT) | ||
<br> | ||
Copyright (c) 2012-2017 <a href='http://github.com/noraesae'>Hyunje Jun</a> and other <a href='https://github.com/noraesae/perfect-scrollbar/graphs/contributors'>contributors</a>. | ||
</p> | ||
</div> | ||
</div> | ||
<script src="jquery.min.js"></script> | ||
<script src="perfect-scrollbar.min.js"></script> | ||
<script src="bootstrap.min.js"></script> | ||
<script src="prettify.js"></script> | ||
<script> | ||
function changeSize() { | ||
var width = parseInt($("#Width").val()); | ||
var height = parseInt($("#Height").val()); | ||
|
||
if(!width || isNaN(width)) { | ||
width = 600; | ||
} | ||
if(!height || isNaN(height)) { | ||
height = 400; | ||
} | ||
$("#Demo").width(width).height(height); | ||
|
||
// update perfect scrollbar | ||
Ps.update(document.getElementById('Demo')); | ||
} | ||
$(function() { | ||
Ps.initialize(document.getElementById('Demo')); | ||
}); | ||
</script> | ||
<script> | ||
$(function() { | ||
prettyPrint(); | ||
}); | ||
</script> | ||
</body> | ||
</html> |
Large diffs are not rendered by default.
Oops, something went wrong.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,30 @@ | ||
.com { color: #93a1a1; } | ||
.lit { color: #195f91; } | ||
.pun, .opn, .clo { color: #93a1a1; } | ||
.fun { color: #dc322f; } | ||
.str, .atv { color: #D14; } | ||
.kwd, .prettyprint .tag { color: #1e347b; } | ||
.typ, .atn, .dec, .var { color: teal; } | ||
.pln { color: #48484c; } | ||
|
||
.prettyprint { | ||
padding: 8px; | ||
background-color: #f7f7f9; | ||
border: 1px solid #e1e1e8; | ||
} | ||
.prettyprint.linenums { | ||
-webkit-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0; | ||
-moz-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0; | ||
box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0; | ||
} | ||
|
||
/* Specify class=linenums on a pre to get line numbering */ | ||
ol.linenums { | ||
margin: 0 0 0 33px; /* IE indents via margin-left */ | ||
} | ||
ol.linenums li { | ||
padding-left: 12px; | ||
color: #bebec5; | ||
line-height: 20px; | ||
text-shadow: 0 1px 0 #fff; | ||
} |
Oops, something went wrong.