adding files

filamentgroup · May 14, 2012 · 1cb6d48 · 1cb6d48
commit 1cb6d48
Show file tree

Hide file tree

Showing 3 changed files with 252 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1,19 @@
+# CSS `position:fixed` feature test
+
+(c)2012 @scottjehl, Filament Group
+
+## Explanation
+
+CSS fixed-positioning varies widely in browser support, and it's difficult to test. This repo includes a test to qualify the application of CSS <code>position:fixed</code>. Rather than testing immediately, it needs to wait for the user to scroll to see if fixed positioning is working properly. Because of this, the script assumes fixed-positioning works initially, adding a class of `fixed-supported` that can be used to qualify any `position:fixed` rules. When the page is scrolled, it runs a test to determine if fixed-positioning is working properly, if not, the class is removed, allowing any fixed-positioned elements to safely degrade to some other layout.
+
+## Usage
+
+Just qualify any `position:fixed` usage in your stylesheet with a `.fixed-supported` parent class selector, like so:
+
+    .fixed-supported header { position: fixed; }
+
+That class will be present on the HTML element in fixed-supporting browsers. You can apply an initial layout without using the `.fixed-supported` selector to provide a fallback for browsers that don't support fixed positioning properly.
+
+## Compressed source:
+
+	(function(a,b){function f(){var e="scrollTop"in a.document.body?a.document.body.scrollTop:a.document.documentElement.scrollTop;if(e!==b&&e>0&&a.document.body){a.document.body.insertBefore(d,a.document.body.firstChild);if(!d.getBoundingClientRect||d.getBoundingClientRect().top!==0)a.document.documentElement.className=a.document.documentElement.className.replace(c,"");a.document.body.removeChild(d),a.removeEventListener?a.removeEventListener("scroll",f,!1):a.removeEvent("onscroll",f,!1)}}var c="fixed-supported",d=a.document.createElement("div"),e=a.navigator.userAgent;d.style.position="fixed",d.style.top=0,e.match(/Android 2\.[1256]/)&&e.indexOf("AppleWebKit")>-1||(a.document.documentElement.className+=" "+c,a.addEventListener?a.addEventListener("scroll",f,!1):a.attachEvent("onscroll",f,!1))})(this)
diff --git a/index.html b/index.html
@@ -0,0 +1,172 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset=utf-8 />
+		<meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
+		<title>Position Fixed</title>
+		<script src="positionfixed.js"></script>
+		<style>
+			body { font-family: sans-serif; margin: 0; padding: 50px 20px; position: relative; }
+			.top, .bottom { position: absolute; left: 0; right: 0; background: #fff; border: solid black; border-width: 1px 0; padding: 1em;  }
+			.top { top: 0; }
+			.bottom { bottom: 0; }
+			.fixed-supported .top, .fixed-supported .bottom { position: fixed; }
+		</style>
+	</head>
+	<body>
+
+		<div class="top">
+			Fixed to viewport top, when supported.
+		</div>
+
+		<p>This page includes a test to qualify the application of <code>position:fixed</code>. It assumes fixed-positioning works initially, adding a class of <code>fixed-supported</code> that can be used to qualify any <code>position:fixed</code> rules. When the page is scrolled, it runs a test to determine if fixed-positioning is working properly, if not, the class is removed, allowing any fixed-positioned elements to safely degrade to some other layout.</p>
+
+
+
+
+
+
+
+
+		<p>Fake content to allow scrolling...</p>
+		<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
+
+		<h2>Header Level 2</h2>
+
+		<ol>
+		   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
+		   <li>Aliquam tincidunt mauris eu risus.</li>
+		</ol>
+
+		<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
+
+		<h3>Header Level 3</h3>
+
+		<ul>
+		   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
+		   <li>Aliquam tincidunt mauris eu risus.</li>
+		</ul>
+
+		<pre><code>
+		#header h1 a { 
+			display: block; 
+			width: 300px; 
+			height: 80px; 
+		}
+		</code></pre>
+
+
+
+
+		<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
+
+		<h2>Header Level 2</h2>
+
+		<ol>
+		   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
+		   <li>Aliquam tincidunt mauris eu risus.</li>
+		</ol>
+
+		<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
+
+		<h3>Header Level 3</h3>
+
+		<ul>
+		   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
+		   <li>Aliquam tincidunt mauris eu risus.</li>
+		</ul>
+
+		<pre><code>
+		#header h1 a { 
+			display: block; 
+			width: 300px; 
+			height: 80px; 
+		}
+		</code></pre>
+
+
+
+
+		<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
+
+		<h2>Header Level 2</h2>
+
+		<ol>
+		   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
+		   <li>Aliquam tincidunt mauris eu risus.</li>
+		</ol>
+
+		<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
+
+		<h3>Header Level 3</h3>
+
+		<ul>
+		   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
+		   <li>Aliquam tincidunt mauris eu risus.</li>
+		</ul>
+
+		<pre><code>
+		#header h1 a { 
+			display: block; 
+			width: 300px; 
+			height: 80px; 
+		}
+		</code></pre>
+
+
+
+
+		<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
+
+		<h2>Header Level 2</h2>
+
+		<ol>
+		   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
+		   <li>Aliquam tincidunt mauris eu risus.</li>
+		</ol>
+
+		<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
+
+		<h3>Header Level 3</h3>
+
+		<ul>
+		   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
+		   <li>Aliquam tincidunt mauris eu risus.</li>
+		</ul>
+
+		<pre><code>
+		#header h1 a { 
+			display: block; 
+			width: 300px; 
+			height: 80px; 
+		}
+		</code></pre>
+
+
+
+
+		<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
+
+		<h2>Header Level 2</h2>
+
+		<ol>
+		   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
+		   <li>Aliquam tincidunt mauris eu risus.</li>
+		</ol>
+
+
+
+
+
+
+
+
+
+		<div class="bottom">
+			Fixed to viewport bottom, when supported.
+		</div>
+
+
+
+	</body>
+</html>
diff --git a/positionfixed.js b/positionfixed.js
@@ -0,0 +1,61 @@
+/*
+	CSS position:fixed qualifier.
+	(c)2012 @scottjehl, Filament Group
+*/
+(function( w, undefined ){
+
+	var htmlclass = "fixed-supported",
+		el = w.document.createElement( "div" ),
+		ua = w.navigator.userAgent;
+
+	// fix the test element
+	el.style.position = "fixed";
+	el.style.top = 0;
+
+	// support test
+	function checkFixed(){
+
+		var scroll = "scrollTop" in w.document.body ? w.document.body.scrollTop : w.document.documentElement.scrollTop;
+
+		// only run test if there's a scroll we can compare
+		if( scroll !== undefined && scroll > 0 && w.document.body ){
+
+			w.document.body.insertBefore( el, w.document.body.firstChild );
+
+			if( !el.getBoundingClientRect || el.getBoundingClientRect().top !== 0 ){
+				// Fixed is not working or can't be tested
+				w.document.documentElement.className = w.document.documentElement.className.replace( htmlclass, "" );
+			}
+
+			// remove the test element
+			w.document.body.removeChild( el );
+
+			// unbind the handlers
+			if( w.removeEventListener ){
+				w.removeEventListener( "scroll", checkFixed, false );
+			}
+			else{
+				w.removeEvent( "onscroll", checkFixed, false );
+			}
+		}		
+	}
+
+	// if a particular UA is known to return false results with this feature test, try and avoid that UA here.
+	if(
+		// Android 2.1, 2.2, 2.5, and 2.6 Webkit
+		!( ua.match( /Android 2\.[1256]/ ) && ua.indexOf( "AppleWebKit") > -1 )
+
+		// TODO. Add the other untestable browsers here...
+	){
+		//add the HTML class for now.
+		w.document.documentElement.className += " " + htmlclass;
+
+		// bind to scroll event so we can test and potentially degrade
+		if( w.addEventListener ){
+			w.addEventListener( "scroll", checkFixed, false );
+		}
+		else{
+			w.attachEvent( "onscroll", checkFixed, false );
+		}
+	}
+}( this ));