cartodb/perfect-scrollbar
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update examples to use no-js fallback of overflow: scroll

Browse Source
This commit is contained in:
DanielApt 2015-02-18 16:36:10 +00:00
parent 6af7500d6b
commit 313f62d2f8
15 changed files with 16 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
examples/always-visible.html
View File

@ -7,7 +7,7 @@
<script src="../dist/js/perfect-scrollbar.js"></script> <script src="../dist/js/perfect-scrollbar.js"></script>
<style> <style>
h1 { text-align: center; } h1 { text-align: center; }
.container { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: hidden; } .container { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: scroll; }
.container .content { background-image: url('./azusa.jpg'); width: 1280px; height: 720px; } .container .content { background-image: url('./azusa.jpg'); width: 1280px; height: 720px; }
</style> </style>
<style> <style>

2
examples/jquery.html
View File

@ -7,7 +7,7 @@
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="../dist/js/perfect-scrollbar.jquery.js"></script> <script src="../dist/js/perfect-scrollbar.jquery.js"></script>
<style> <style>
.contentHolder { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: hidden; } .contentHolder { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: scroll; }
.contentHolder .content { background-image: url('./azusa.jpg'); width: 1280px; height: 720px; } .contentHolder .content { background-image: url('./azusa.jpg'); width: 1280px; height: 720px; }
.spacer { text-align:center } .spacer { text-align:center }
</style> </style>

2
examples/options-default.html
View File

@ -6,7 +6,7 @@
<link href="../dist/css/perfect-scrollbar.css" rel="stylesheet"> <link href="../dist/css/perfect-scrollbar.css" rel="stylesheet">
<script src="../dist/js/perfect-scrollbar.js"></script> <script src="../dist/js/perfect-scrollbar.js"></script>
<style> <style>
.contentHolder { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: hidden; } .contentHolder { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: scroll; }
.contentHolder .content { background-image: url('./azusa.jpg'); width: 1280px; height: 720px; } .contentHolder .content { background-image: url('./azusa.jpg'); width: 1280px; height: 720px; }
.spacer { text-align:center } .spacer { text-align:center }
</style> </style>

2
examples/options-minScrollbarLength.html
View File

@ -6,7 +6,7 @@
<link href="../dist/css/perfect-scrollbar.css" rel="stylesheet"> <link href="../dist/css/perfect-scrollbar.css" rel="stylesheet">
<script src="../dist/js/perfect-scrollbar.js"></script> <script src="../dist/js/perfect-scrollbar.js"></script>
<style> <style>
.contentHolder { position:relative; margin:0px auto; padding:0px; width: 640px; height: 360px; overflow: hidden; } .contentHolder { position:relative; margin:0px auto; padding:0px; width: 640px; height: 360px; overflow: scroll; }
.contentHolder .content { background-image: url('./azusa.jpg'); width: 12800px; height: 7200px; } .contentHolder .content { background-image: url('./azusa.jpg'); width: 12800px; height: 7200px; }
.spacer { text-align:center } .spacer { text-align:center }
</style> </style>

2
examples/options-suppressScrollAxis.html
View File

@ -6,7 +6,7 @@
<link href="../dist/css/perfect-scrollbar.css" rel="stylesheet"> <link href="../dist/css/perfect-scrollbar.css" rel="stylesheet">
<script src="../dist/js/perfect-scrollbar.js"></script> <script src="../dist/js/perfect-scrollbar.js"></script>
<style> <style>
.contentHolder { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: hidden; } .contentHolder { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: scroll; }
.contentHolder .content { background-image: url('./azusa.jpg'); width: 1280px; height: 720px; } .contentHolder .content { background-image: url('./azusa.jpg'); width: 1280px; height: 720px; }
.spacer { text-align:center } .spacer { text-align:center }
h2 { text-align: center; } h2 { text-align: center; }

2
examples/options-useBothWheelAxes.html
View File

@ -6,7 +6,7 @@
<link href="../dist/css/perfect-scrollbar.css" rel="stylesheet"> <link href="../dist/css/perfect-scrollbar.css" rel="stylesheet">
<script src="../dist/js/perfect-scrollbar.js"></script> <script src="../dist/js/perfect-scrollbar.js"></script>
<style> <style>
.contentHolder { position:relative; margin:0px auto; padding:0px; width: 640px; height: 360px; overflow: hidden; } .contentHolder { position:relative; margin:0px auto; padding:0px; width: 640px; height: 360px; overflow: scroll; }
.contentHolder .content-x { background-image: url('./azusa.jpg'); width: 1920px; height: 360px; } .contentHolder .content-x { background-image: url('./azusa.jpg'); width: 1920px; height: 360px; }
.contentHolder .content-y { background-image: url('./azusa.jpg'); width: 640px; height: 1080px; } .contentHolder .content-y { background-image: url('./azusa.jpg'); width: 640px; height: 1080px; }
.spacer { text-align:center; } .spacer { text-align:center; }

2
examples/options-wheelPropagation.html
View File

@ -6,7 +6,7 @@
<link href="../dist/css/perfect-scrollbar.css" rel="stylesheet"> <link href="../dist/css/perfect-scrollbar.css" rel="stylesheet">
<script src="../dist/js/perfect-scrollbar.js"></script> <script src="../dist/js/perfect-scrollbar.js"></script>
<style> <style>
.contentHolder { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: hidden; } .contentHolder { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: scroll; }
.contentHolder .content { background-image: url('./azusa.jpg'); width: 1280px; height: 720px; } .contentHolder .content { background-image: url('./azusa.jpg'); width: 1280px; height: 720px; }
.spacer { text-align:center } .spacer { text-align:center }
</style> </style>

2
examples/options-wheelSpeed.html
View File

@ -6,7 +6,7 @@
<link href="../dist/css/perfect-scrollbar.css" rel="stylesheet"> <link href="../dist/css/perfect-scrollbar.css" rel="stylesheet">
<script src="../dist/js/perfect-scrollbar.js"></script> <script src="../dist/js/perfect-scrollbar.js"></script>
<style> <style>
.contentHolder { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: hidden; } .contentHolder { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: scroll; }
.contentHolder .content { background-image: url('./azusa.jpg'); width: 1280px; height: 720px; } .contentHolder .content { background-image: url('./azusa.jpg'); width: 1280px; height: 720px; }
.spacer { text-align:center } .spacer { text-align:center }
</style> </style>

2
examples/reach-the-end-callback.html
View File

@ -10,7 +10,7 @@
border: 1px solid gray; border: 1px solid gray;
height:150px; height:150px;
width: 400px; width: 400px;
overflow: hidden; overflow: scroll;
position: relative; position: relative;
} }
#status { color: red; } #status { color: red; }

2
examples/removable-list-element.html
View File

@ -10,7 +10,7 @@
border: 1px solid gray; border: 1px solid gray;
max-height: 300px; max-height: 300px;
width: 400px; width: 400px;
overflow: hidden; overflow: scroll;
position: relative; position: relative;
} }
#test .element { #test .element {

2
examples/rtl.html
View File

@ -6,7 +6,7 @@
<link href="../dist/css/perfect-scrollbar.css" rel="stylesheet"> <link href="../dist/css/perfect-scrollbar.css" rel="stylesheet">
<script src="../dist/js/perfect-scrollbar.js"></script> <script src="../dist/js/perfect-scrollbar.js"></script>
<style> <style>
.contentHolder { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: hidden; } .contentHolder { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: scroll; }
.contentHolder .content { background-image: url('./azusa.jpg'); width: 1280px; height: 720px; } .contentHolder .content { background-image: url('./azusa.jpg'); width: 1280px; height: 720px; }
.spacer { text-align:center } .spacer { text-align:center }

2
examples/scrollbars-on-the-opposite-side.html
View File

@ -6,7 +6,7 @@
<link href="../dist/css/perfect-scrollbar.css" rel="stylesheet"> <link href="../dist/css/perfect-scrollbar.css" rel="stylesheet">
<script src="../dist/js/perfect-scrollbar.js"></script> <script src="../dist/js/perfect-scrollbar.js"></script>
<style> <style>
.contentHolder { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: hidden; } .contentHolder { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: scroll; }
.contentHolder .content { background-image: url('./azusa.jpg'); width: 1280px; height: 720px; } .contentHolder .content { background-image: url('./azusa.jpg'); width: 1280px; height: 720px; }
.spacer { text-align:center } .spacer { text-align:center }

2
examples/scrollbars-with-margin.html
View File

@ -6,7 +6,7 @@
<link href="../dist/css/perfect-scrollbar.css" rel="stylesheet"> <link href="../dist/css/perfect-scrollbar.css" rel="stylesheet">
<script src="../dist/js/perfect-scrollbar.js"></script> <script src="../dist/js/perfect-scrollbar.js"></script>
<style> <style>
.contentHolder { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: hidden; } .contentHolder { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: scroll; }
.contentHolder .content { background-image: url('./azusa.jpg'); width: 1280px; height: 720px; } .contentHolder .content { background-image: url('./azusa.jpg'); width: 1280px; height: 720px; }
.spacer { text-align:center } .spacer { text-align:center }

3
examples/table-content.html
View File

@ -17,7 +17,8 @@
} }
#table tbody { #table tbody {
height: 100px; height: 100px;
overflow-y: hidden; overflow-y: scroll;
overflow-x:hidden;
position: relative; position: relative;
} }
#table tbody td, #table thead th { #table tbody td, #table thead th {

2
examples/text-content.html
View File

@ -10,7 +10,7 @@
border: 1px solid gray; border: 1px solid gray;
height:150px; height:150px;
width: 400px; width: 400px;
overflow: hidden; overflow: scroll;
position: relative; position: relative;
} }
</style> </style>