Skip to content
Browse files

updated js, css, examples, and unit tests to use 'overflow-enabled' a…

…s the html class, per @toddmparker's idea.
  • Loading branch information...
1 parent b17edec commit 44d52cfcc431079c25e1ff94ada6a1dce79d08a1 scottjehl committed Feb 22, 2012
Showing with 40 additions and 40 deletions.
  1. +3 −3 README.md
  2. +9 −9 examples/2-column/index.html
  3. +10 −10 examples/dialog/index.html
  4. +10 −10 index.html
  5. +1 −1 overthrow.js
  6. +2 −2 test/test.css
  7. +5 −5 test/tests.js
View
6 README.md
@@ -26,18 +26,18 @@ Then put a class of `overthrow` on any elements in which you'd like to apply `ov
<div id="foo" class="overthrow">Content goes here!</div>
-In browsers that Overthrow deems capable of scrolling overflow content (_either natively, or using its touch polyfill_), it will add a class of `overflow` to the `html` element. Add the following CSS to your stylesheet somewhere, enabling overflow on all elements in your document that have an `overthrow` class.
+In browsers that Overthrow deems capable of scrolling overflow content (_either natively, or using its touch polyfill_), it will add a class of `overthrow-enabled` to the `html` element. Add the following CSS to your stylesheet somewhere, enabling overflow on all elements in your document that have an `overthrow` class.
/* Overthrow CSS:
Enable overflow: auto on elements with overthrow class when html element has overthrow class too */
- .overthrow .overthrow {
+ .overthrow-enabled .overthrow {
overflow: auto;
-webkit-overflow-scrolling: touch;
}
That's it. Design away! Any time you want to set dimensions on an element to use overflow scrolling, just be sure to key off that `overthrow` class on the HTML element, and `overflow: auto` will apply.
- .overthrow #foo.overthrow {
+ .overthrow-enabled #foo {
height: 280px;
}
View
18 examples/2-column/index.html
@@ -62,37 +62,37 @@
/* overthrow layout enhancements */
/* Enable overflow: auto on elements with overthrow class when html element has overthrow class too */
- .overthrow .overthrow {
+ .overthrow-enabled .overthrow {
overflow: auto;
-webkit-overflow-scrolling: touch;
}
- html.overthrow, html.overthrow body {
+ html.overthrow-enabled, html.overthrow-enabled body {
height: 99.8%;
margin: 0;
}
- .overthrow header,
- .overthrow footer {
+ .overthrow-enabled header,
+ .overthrow-enabled footer {
height: 12%;
}
- .overthrow article {
+ .overthrow-enabled article {
height: 76%;
padding: 0;
position: relative;
}
@media (min-height: 25em){
- html.overthrow header,
- html.overthrow footer {
+ html.overthrow-enabled header,
+ html.overthrow-enabled footer {
height: 8%;
}
- html.overthrow article {
+ html.overthrow-enabled article {
height: 84%;
}
article {
font-size: 100%;
}
}
@media (min-width: 35em){
- html.overthrow nav, html.overthrow .primary {
+ html.overthrow-enabled nav, html.overthrow-enabled .primary {
height: 100%;
}
nav {
View
20 examples/dialog/index.html
@@ -53,12 +53,12 @@
/* overthrow layout enhancements */
/* Enable overflow: auto on elements with overthrow class when html element has overthrow class too */
- .overthrow .overthrow {
+ .overthrow-enabled .overthrow {
overflow: auto;
-webkit-overflow-scrolling: touch;
}
- .overthrow header,
- .overthrow footer {
+ .overthrow-enabled header,
+ .overthrow-enabled footer {
height: 15%;
}
@@ -78,24 +78,24 @@
@media (min-height: 15em) {
- html.overthrow, html.overthrow body, .overthrow .dialog {
+ html.overthrow-enabled, html.overthrow-enabled body, .overthrow-enabled .dialog {
height: 99.8%;
margin: 0;
}
- .overthrow article {
+ .overthrow-enabled article {
height: 70%;
position: relative;
}
}
@media (min-width: 30em) and (min-height: 20em){
- .overthrow header,
- .overthrow footer {
+ .overthrow-enabled header,
+ .overthrow-enabled footer {
height: 8%;
}
- .overthrow article {
+ .overthrow-enabled article {
height: 84%;
}
article {
@@ -113,7 +113,7 @@
border-radius: 2em;
}
- .overthrow body {
+ .overthrow-enabled body {
overflow: hidden;
}
.dialog {
@@ -128,7 +128,7 @@
width: 30em;
margin: 8% auto -8%;
}
- .overthrow .dialog {
+ .overthrow-enabled .dialog {
height: 70%;
margin: 8% auto -8%;
}
View
20 index.html
@@ -6,12 +6,12 @@
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
/* Overthrow CSS:
- Enable overflow: auto on elements with overthrow class when html element has overthrow class too */
- .overthrow .overthrow {
+ Enable overflow: auto on elements with overthrow class when html element has overthrow-enabled class */
+ .overthrow-enabled .overthrow {
overflow: auto;
-webkit-overflow-scrolling: touch;
}
- .overthrow #content.overthrow {
+ .overthrow-enabled #content.overthrow {
height: 14em;
}
@@ -102,7 +102,7 @@
#content #wat {
margin-top: 0;
}
- .overthrow .overthrow #wat:after {
+ .overthrow-enabled .overthrow #wat:after {
content: "\2193";
font-size: .8em;
padding: 0 .2em;
@@ -393,20 +393,20 @@ <h2 id="how">How do I use it?</h2>
&lt;div id=&quot;foo&quot; <strong>class=&quot;overthrow&quot;</strong>&gt;Content goes here!&lt;/div&gt;
</code></pre>
- <p>In browsers that Overthrow.js deems capable of scrolling overflowed content (either natively, or using its polyfill), it will add a class of <code>overflow</code> to the HTML element. Add this CSS to your stylesheet somewhere, enabling overflow on all elements in your document that have an <code>overthrow</code> class.</p>
+ <p>In browsers that Overthrow.js deems capable of scrolling overflowed content (either natively, or using its polyfill), it will add a class of <code>overthrow-enabled</code> to the HTML element. Add this CSS to your stylesheet somewhere, enabling overflow on all elements in your document that have an <code>overthrow</code> class.</p>
<pre class="overthrow"><code>
/* Overthrow CSS:
Enable overflow: auto on elements with overthrow class when html element has overthrow class too */
-.overthrow .overthrow {
+.overthrow-enabled .overthrow {
overflow: auto;
-webkit-overflow-scrolling: touch;
}
</code></pre>
-<p>Lastly, design away! Any time you want to set dimensions on an element to trigger overflow scrolling, just be sure to key off that <code>overthrow</code> class on the <code>html</code> element.</p>
+<p>Lastly, design away! Any time you want to set dimensions on an element to trigger overflow scrolling, just be sure to key off that <code>overthrow-enabled</code> class on the <code>html</code> element.</p>
<pre class="overthrow"><code>
-.overthrow #foo {
+.overthrow-enabled #foo {
height: 280px;
}
</code></pre>
@@ -416,8 +416,8 @@ <h3 id="support">API</h3>
<p>Overflow adds one variable to the global namespace: <code>overthrow</code>. It has the following methods and properties:</p>
<ul>
- <li><strong>overthrow.set</strong>: function to initialize overthrow behavior and style in the page. Adds "overthrow" class to <code>html</code> element, and touch listener for polyfilled browsers</li>
- <li><strong>overthrow.forget</strong>: function to remove overthrow behavior and style in the page. Removes "overthrow" class from HTML element, and touch event listener in polyfilled browsers, and restores default easing.</li>
+ <li><strong>overthrow.set</strong>: function to initialize overthrow behavior and style in the page. Adds "overthrow-enabled" class to <code>html</code> element, and touch listener for polyfilled browsers</li>
+ <li><strong>overthrow.forget</strong>: function to remove overthrow behavior and style in the page. Removes "overthrow-enabled" class from HTML element, and touch event listener in polyfilled browsers, and restores default easing.</li>
<li><strong>overthrow.easing</strong>: an overrideable property that stores the default easing function (using any of Robert Penner's easing equations.)</li>
<li><strong>overthrow.toss</strong>: function to programatically scroll an overthrow element.
<p>To call, pass a required first argument referencing the overthrow element to scroll, and a hash of optional configuration properties.</p>
View
2 overthrow.js
@@ -3,7 +3,7 @@
var doc = w.document,
docElem = doc.documentElement,
- classtext = "overthrow",
+ classtext = "overthrow-enabled",
// Touch events are used in the polyfill, and thus are a prerequisite
canBeFilledWithPoly = "ontouchmove" in doc,
View
4 test/test.css
@@ -2,13 +2,13 @@
Styles for testing overthrow
*/
-.overthrow .overthrow {
+.overthrow-enabled .overthrow {
overflow: auto;
-webkit-overflow-scrolling: touch;
height: 100px;
visibility: hidden;
}
-.overthrow .overthrow * {
+.overthrow-enabled .overthrow * {
width: 500%;
}
View
10 test/tests.js
@@ -80,25 +80,25 @@ window.onload = function(){
- test( 'HTML element overthrow class is applied depending on overthrow-supporting browser', function() {
+ test( 'HTML element overthrow-enabled class is applied depending on overthrow-supporting browser', function() {
if(overthrow.support === "native" || overthrow.support === "polyfilled" ){
- ok( document.documentElement.className.indexOf( "overthrow" ) > -1 );
+ ok( document.documentElement.className.indexOf( "overthrow-enabled" ) > -1 );
}
else {
- ok( document.documentElement.className.indexOf( "overthrow" ) === -1 );
+ ok( document.documentElement.className.indexOf( "overthrow-enabled" ) === -1 );
}
});
test( 'overthrow.forget destroys HTML class', function() {
overthrow.forget();
- ok( document.documentElement.className.indexOf( "overthrow" ) === -1 );
+ ok( document.documentElement.className.indexOf( "overthrow-enabled" ) === -1 );
overthrow.set();
});
test( 'overthrow.set adds HTML class', function() {
overthrow.forget();
overthrow.set();
- ok( document.documentElement.className.indexOf( "overthrow" ) > -1 );
+ ok( document.documentElement.className.indexOf( "overthrow-enabled" ) > -1 );
});
test( 'When set in an overthrow-supporting browser, the test element height is less than scrollHeight', function() {

0 comments on commit 44d52cf

Please sign in to comment.
Something went wrong with that request. Please try again.