Permalink
Browse files

Added fullscreen horizontal demo

  • Loading branch information...
jnicol committed Apr 29, 2014
1 parent 45a18fc commit 63fd55de6631ee13775758c9927aabcce0acc170
Showing with 89 additions and 2 deletions.
  1. +1 −1 css/trackpad-scroll-emulator.css
  2. +24 −0 demo/css/demo-fullscreen.css
  3. +2 −1 demo/css/demo.css
  4. +62 −0 demo/fullscreen-horiz.html
@@ -1,6 +1,6 @@
/**
* TrackpadScrollEmulator
- * Version: 1.0.1
+ * Version: 1.0.5
* Author: Jonathan Nicol @f6design
* https://github.com/jnicol/trackpad-scroll-emulator
*/
@@ -89,3 +89,27 @@ p {
.demo-fullscreen p.odd {
background: #f0f0f0;
}
+.demo-fullscreen.horizontal .tse-content {
+ display: inline-block; /* allows element to expand outside container without setting explicit width */
+ white-space: nowrap; /* allows element to expand outside container without setting explicit width */
+ }
+ /* Box styling is purely for demo puposes. Your scrollable content can be styled however you like. */
+ .demo-fullscreen.horizontal .boxes {
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ overflow: auto;
+ padding: 20px;
+ height: 100%;
+ }
+ .demo-fullscreen.horizontal .box {
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ display: inline-block;
+ margin-right: 10px;
+ padding: 20px;
+ width: 300px;
+ height: 100%;
+ color: #fff;
+ font-size: 24px;
+ background: #666;
+ }
View
@@ -139,6 +139,7 @@ a:visited {
white-space: nowrap; /* allows element to expand outside container without setting explicit width */
height: 130px;
}
+ /* Box styling is purely for demo puposes. Your scrollable content can be styled however you like. */
.demo2 .boxes {
overflow: auto;
padding: 10px 0 0 10px;
@@ -148,11 +149,11 @@ a:visited {
margin-right: 10px;
width: 100px;
height: 100px;
- background: #666;
color: #fff;
text-align: center;
line-height: 100px;
font-size: 24px;
+ background: #666;
}
View
@@ -0,0 +1,62 @@
+<!DOCTYPE HTML>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>TrackpadScrollEmulator demo</title>
+ <link rel="stylesheet" href="../css/trackpad-scroll-emulator.css" />
+ <link rel="stylesheet" href="css/demo-fullscreen.css" />
+ <noscript>
+ <style>
+ /**
+ * Reinstate scrolling for non-JS clients
+ *
+ * You coud do this in a regular stylesheet, but be aware that
+ * even in JS-enabled clients the browser scrollbars may be visible
+ * briefly until JS kicks in. This is especially noticeable in IE.
+ * Wrapping these rules in a noscript tag ensures that never happens.
+ */
+ .tse-scrollable {
+ overflow-y: scroll;
+ }
+ </style>
+ </noscript>
+</head>
+<body>
+ <div class="tse-scrollable horizontal demo-fullscreen">
+ <div class="tse-content">
+ <div class="boxes">
+ <div class="box">1</div>
+ <div class="box">2</div>
+ <div class="box">3</div>
+ <div class="box">4</div>
+ <div class="box">5</div>
+ <div class="box">6</div>
+ <div class="box">7</div>
+ <div class="box">8</div>
+ <div class="box">9</div>
+ <div class="box">10</div>
+ <div class="box">11</div>
+ <div class="box">12</div>
+ <div class="box">13</div>
+ <div class="box">14</div>
+ <div class="box">15</div>
+ <div class="box">16</div>
+ <div class="box">17</div>
+ <div class="box">18</div>
+ <div class="box">19</div>
+ <div class="box">20</div>
+ </div>
+ </div>
+ </div>
+
+ <!-- JavaScript -->
+ <script src="js/lib/jquery-1.7.1.min.js"></script>
+ <script src="../jquery.trackpad-scroll-emulator.min.js"></script>
+ <script>
+ $(document).ready(function() {
+ // Initialize scroller.
+ $('.demo-fullscreen').TrackpadScrollEmulator();
+ });
+ </script>
+</body>
+</html>

0 comments on commit 63fd55d

Please sign in to comment.