Skip to content

Instantly share code, notes, and snippets.

@BigAB

BigAB/dabblet.css

Created November 27, 2012 22:25
Show Gist options
  • Save BigAB/4157574 to your computer and use it in GitHub Desktop.
Save BigAB/4157574 to your computer and use it in GitHub Desktop.
Download ZIP
Touch screen inline column scroll
Raw
dabblet.css
/**
* Touch screen inline column scroll
*/
.container {
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
font-size: 63.5%;
word-spacing: -0.43em;
letter-spacing: -0.31em;
*letter-spacing: normal; /* reset IE < 8 */
}
.container > * {
word-spacing: normal;
letter-spacing: normal;
text-align: left;
}
.column {
display: inline-block;
zoom: 1; *display: inline; /* IE < 8: fake inline-block */
width: 20%;
height: 100%;
overflow-y: auto;
margin: 0px;
word-spacing: normal
word-spacing: 3em;
vertical-align: top;
text-align: center;
font-size: 10em;
line-height: 1;
}
.red { background-color: red; }
.yellow { background-color: yellow; }
.lime { background-color: lime;}
.blue { background-color: blue; }
.orange { background-color: orange; }
.gray { background-color: gray; }
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div class="container">
<div class="column red">
<a href="http://teamfrank.net">1</a>
<a href="http://teamfrank.net">2</a>
<a href="http://teamfrank.net">3</a>
<a href="http://teamfrank.net">4</a>
<a href="http://teamfrank.net">5</a>
<a href="http://teamfrank.net">6</a>
<a href="http://teamfrank.net">7</a>
<a href="http://teamfrank.net">8</a>
<a href="http://teamfrank.net">9</a>
<a href="http://teamfrank.net">10</a>
<a href="http://teamfrank.net">11</a>
<a href="http://teamfrank.net">12</a>
<a href="http://teamfrank.net">13</a>
<a href="http://teamfrank.net">14</a>
<a href="http://teamfrank.net">15</a>
<a href="http://teamfrank.net">16</a>
<a href="http://teamfrank.net">17</a>
<a href="http://teamfrank.net">18</a>
<a href="http://teamfrank.net">19</a>
<a href="http://teamfrank.net">20</a>
<a href="http://teamfrank.net">21</a>
<a href="http://teamfrank.net">22</a>
<a href="http://teamfrank.net">23</a>
<a href="http://teamfrank.net">24</a>
<a href="http://teamfrank.net">25</a>
</div>
<div class="column yellow">
<a href="http://teamfrank.net">1</a>
<a href="http://teamfrank.net">2</a>
<a href="http://teamfrank.net">3</a>
<a href="http://teamfrank.net">4</a>
<a href="http://teamfrank.net">5</a>
<a href="http://teamfrank.net">6</a>
<a href="http://teamfrank.net">7</a>
<a href="http://teamfrank.net">8</a>
<a href="http://teamfrank.net">9</a>
<a href="http://teamfrank.net">10</a>
<a href="http://teamfrank.net">11</a>
<a href="http://teamfrank.net">12</a>
<a href="http://teamfrank.net">13</a>
<a href="http://teamfrank.net">14</a>
<a href="http://teamfrank.net">15</a>
<a href="http://teamfrank.net">16</a>
<a href="http://teamfrank.net">17</a>
<a href="http://teamfrank.net">18</a>
<a href="http://teamfrank.net">19</a>
<a href="http://teamfrank.net">20</a>
<a href="http://teamfrank.net">21</a>
<a href="http://teamfrank.net">22</a>
<a href="http://teamfrank.net">23</a>
<a href="http://teamfrank.net">24</a>
</div>
<div class="column lime">
<a href="http://teamfrank.net">1</a>
<a href="http://teamfrank.net">2</a>
<a href="http://teamfrank.net">3</a>
<a href="http://teamfrank.net">4</a>
<a href="http://teamfrank.net">5</a>
<a href="http://teamfrank.net">6</a>
<a href="http://teamfrank.net">7</a>
<a href="http://teamfrank.net">8</a>
<a href="http://teamfrank.net">9</a>
<a href="http://teamfrank.net">10</a>
<a href="http://teamfrank.net">11</a>
<a href="http://teamfrank.net">12</a>
<a href="http://teamfrank.net">13</a>
<a href="http://teamfrank.net">14</a>
<a href="http://teamfrank.net">15</a>
<a href="http://teamfrank.net">16</a>
<a href="http://teamfrank.net">17</a>
<a href="http://teamfrank.net">18</a>
<a href="http://teamfrank.net">19</a>
<a href="http://teamfrank.net">20</a>
<a href="http://teamfrank.net">21</a>
<a href="http://teamfrank.net">22</a>
<a href="http://teamfrank.net">23</a>
<a href="http://teamfrank.net">24</a>
</div>
<div class="column blue">
<a href="http://teamfrank.net">1</a>
<a href="http://teamfrank.net">2</a>
<a href="http://teamfrank.net">3</a>
<a href="http://teamfrank.net">4</a>
<a href="http://teamfrank.net">5</a>
<a href="http://teamfrank.net">6</a>
<a href="http://teamfrank.net">7</a>
<a href="http://teamfrank.net">8</a>
<a href="http://teamfrank.net">9</a>
<a href="http://teamfrank.net">10</a>
<a href="http://teamfrank.net">11</a>
<a href="http://teamfrank.net">12</a>
<a href="http://teamfrank.net">13</a>
<a href="http://teamfrank.net">14</a>
<a href="http://teamfrank.net">15</a>
<a href="http://teamfrank.net">16</a>
<a href="http://teamfrank.net">17</a>
<a href="http://teamfrank.net">18</a>
<a href="http://teamfrank.net">19</a>
<a href="http://teamfrank.net">20</a>
<a href="http://teamfrank.net">21</a>
<a href="http://teamfrank.net">22</a>
<a href="http://teamfrank.net">23</a>
<a href="http://teamfrank.net">24</a>
</div>
<div class="column orange">
<a href="http://teamfrank.net">1</a>
<a href="http://teamfrank.net">2</a>
<a href="http://teamfrank.net">3</a>
<a href="http://teamfrank.net">4</a>
<a href="http://teamfrank.net">5</a>
<a href="http://teamfrank.net">6</a>
<a href="http://teamfrank.net">7</a>
<a href="http://teamfrank.net">8</a>
<a href="http://teamfrank.net">9</a>
<a href="http://teamfrank.net">10</a>
<a href="http://teamfrank.net">11</a>
<a href="http://teamfrank.net">12</a>
<a href="http://teamfrank.net">13</a>
<a href="http://teamfrank.net">14</a>
<a href="http://teamfrank.net">15</a>
<a href="http://teamfrank.net">16</a>
<a href="http://teamfrank.net">17</a>
<a href="http://teamfrank.net">18</a>
<a href="http://teamfrank.net">19</a>
<a href="http://teamfrank.net">20</a>
<a href="http://teamfrank.net">21</a>
<a href="http://teamfrank.net">22</a>
<a href="http://teamfrank.net">23</a>
<a href="http://teamfrank.net">24</a>
</div>
</div>​
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"result"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment