Permalink
Browse files

removed media helpers for widths and orientation. Switched to standar…

…d CSS3 Media Queries instead.
  • Loading branch information...
1 parent b80689a commit 3116441e4ac388437e35647e188d59b2a9fd96b1 scottjehl committed May 10, 2011
View
@@ -21,59 +21,8 @@ <h1>Responsive Layout Helpers</h1>
<div data-role="content" data-theme="c">
- <h2>Media Query Helper Classes</h2>
- <p>jQuery Mobile adds classes to the <code>HTML</code> element that mimic browser orientation and common min/max-width CSS media queries. These classes are updated on load, resize and orientationchange, allowing you to key off these classes in your CSS, to create <a href="http://www.alistapart.com/articles/responsive-web-design/">responsive layouts</a> - even in browsers that don't support media queries! </p>
-
- <h3>Orientation Classes</h3>
- <p>The HTML element will always have a class of either "portrait" or "landscape", depending on the orientation of the browser or device. You can utilize these in your CSS like this:</p>
- <pre>
- <code>
-.portrait {
- /* portrait orientation changes go here! */
-}
-.landscape {
- /* landscape orientation changes go here! */
-}
- </code>
- </pre>
-
- <h3>Min/Max Width Breakpoint Classes</h3>
- <p>By default, we create min and max breakpoint classes at the following widths: <code>320</code>,<code>480</code>,<code>768</code>,<code>1024</code>. These translate to classes that look like this: "min-width-320px", "max-width-480px", and are meant to be used as a replacement of (or in addition to) the media query equivalents they mimic.</p>
-<pre>
- <code>
-.myelement {
- float: none;
-}
-.min-width-480px .myelement {
- float: left;
-}
- </code>
-</pre>
-
- <p>Many plugins in jQuery Mobile leverage these width breakpoints. For example, form elements float beside their labels when the browser is wider than 480 pixels. The CSS to support this behavior for form text inputs looks like this:</p>
-
-<pre>
- <code>
-label.ui-input-text {
- display: block;
-}
-.min-width-480px label.ui-input-text {
- display: inline-block;
-}
- </code>
-</pre>
- <h3>Adding Width Breakpoints</h3>
- <p>To utilize width breakpoints of your own, jQuery Mobile exposes the <code>$.mobile.addResolutionBreakpoints </code> function, which accepts either a single number or array of numbers that will be added to the min/max breakpoints whenever they apply.</p>
-<pre>
- <code>
-//add a min/max class for 1200 pixel widths
-$.mobile.addResolutionBreakpoints(1200);
-//add min/max classes for 1200, and 1440 pixel widths
-$.mobile.addResolutionBreakpoints([1200, 1440]);
- </code>
-</pre>
<h3>Running Media Queries</h3>
<p>jQuery Mobile provides a function that allows you to test whether a particular CSS Media Query applies. Simple call <code>$.mobile.media()</code> and pass a media type or query. If the browser supports that type or query, and it currently applies, the function will return true. If not, it'll return false.</p>
@@ -27,4 +27,6 @@ div.hasDatepicker{ display: block; padding: 0; overflow: visible; margin: 8px 0
.ui-datepicker-calendar th span, .ui-datepicker-calendar span.ui-state-default { opacity: .3; }
.ui-datepicker-calendar td a { padding-top: .5em; padding-bottom: .5em; }
-.min-width-480px div.hasDatepicker { width: 63%; display: inline-block; margin: 0; }
+@media all and (min-width: 450px){
+ div.hasDatepicker { width: 63%; display: inline-block; margin: 0; }
+}
@@ -33,7 +33,9 @@
.current img { float: left; margin: 5px 10px 0 0; }
.current p { font-weight: bold; font-size: 1.1em; margin-left: 20px; }
.ui-mobile label { position: absolute; left: -9999px; }
- .ui-input-search, .min-width-480px .ui-input-search { margin: 5px auto; width: auto; float: none; display: block; }
+ @media all and (min-width: 480px){
+ .ui-input-search { margin: 5px auto; width: auto; float: none; display: block; }
+ }
</style>
<script>
$('div').live('pagecreate',function(){
View
@@ -7,17 +7,14 @@
(function($, undefined ) {
var $window = $(window),
- $html = $( "html" ),
-
- //media-query-like width breakpoints, which are translated to classes on the html element
- resolutionBreakpoints = [320,480,768,1024];
+ $html = $( "html" );
/* $.mobile.media method: pass a CSS media type or query and get a bool return
note: this feature relies on actual media query support for media queries, though types will work most anywhere
examples:
$.mobile.media('screen') //>> tests for screen media type
- $.mobile.media('screen and (min-width: 480px)') //>> tests for screen media type with window width > 480px
+ $.mobile.media('screen and (min-width: 450px)') //>> tests for screen media type with window width > 480px
$.mobile.media('@media screen and (-webkit-min-device-pixel-ratio: 2)') //>> tests for webkit 2x pixel ratio (iPhone 4)
*/
$.mobile.media = (function() {
@@ -47,78 +44,5 @@ $.mobile.media = (function() {
};
})();
-/*
- private function for adding/removing breakpoint classes to HTML element for faux media-query support
- It does not require media query support, instead using JS to detect screen width > cross-browser support
- This function is called on orientationchange, resize, and mobileinit, and is bound via the 'htmlclass' event namespace
-*/
-function detectResolutionBreakpoints(){
- var currWidth = $window.width(),
- minPrefix = "min-width-",
- maxPrefix = "max-width-",
- minBreakpoints = [],
- maxBreakpoints = [],
- unit = "px",
- breakpointClasses;
-
- $html.removeClass( minPrefix + resolutionBreakpoints.join(unit + " " + minPrefix) + unit + " " +
- maxPrefix + resolutionBreakpoints.join( unit + " " + maxPrefix) + unit );
-
- $.each(resolutionBreakpoints,function( i, breakPoint ){
- if( currWidth >= breakPoint ){
- minBreakpoints.push( minPrefix + breakPoint + unit );
- }
- if( currWidth <= breakPoint ){
- maxBreakpoints.push( maxPrefix + breakPoint + unit );
- }
- });
-
- if( minBreakpoints.length ){ breakpointClasses = minBreakpoints.join(" "); }
- if( maxBreakpoints.length ){ breakpointClasses += " " + maxBreakpoints.join(" "); }
-
- $html.addClass( breakpointClasses );
-};
-
-/* $.mobile.addResolutionBreakpoints method:
- pass either a number or an array of numbers and they'll be added to the min/max breakpoint classes
- Examples:
- $.mobile.addResolutionBreakpoints( 500 );
- $.mobile.addResolutionBreakpoints( [500, 1200] );
-*/
-$.mobile.addResolutionBreakpoints = function( newbps ){
- if( $.type( newbps ) === "array" ){
- resolutionBreakpoints = resolutionBreakpoints.concat( newbps );
- }
- else {
- resolutionBreakpoints.push( newbps );
- }
- resolutionBreakpoints.sort(function(a,b){ return a-b; });
- detectResolutionBreakpoints();
-};
-
-/* on mobileinit, add classes to HTML element
- and set handlers to update those on orientationchange and resize*/
-$(document).bind("mobileinit.htmlclass", function(){
- /* bind to orientationchange and resize
- to add classes to HTML element for min/max breakpoints and orientation */
- $window.bind("orientationchange.htmlclass resize.htmlclass", function(event){
- //add orientation class to HTML element on flip/resize.
- if(event.orientation){
- $html.removeClass( "portrait landscape" ).addClass( event.orientation );
- }
- //add classes to HTML element for min/max breakpoints
- detectResolutionBreakpoints();
- });
-});
-
-/* Manually trigger an orientationchange event when the dom ready event fires.
- This will ensure that any viewport meta tag that may have been injected
- has taken effect already, allowing us to properly calculate the width of the
- document.
-*/
-$(function(){
- //trigger event manually
- $window.trigger( "orientationchange.htmlclass" );
-});
})(jQuery);
@@ -35,62 +35,4 @@
same($.mobile.media("screen 3"), true);
});
- test( "window widths smaller than the break points set max-width classes", function(){
- $.fn.width = function(){ return 120; };
-
- $.mobile.addResolutionBreakpoints([125]);
- ok($("html").hasClass("max-width-125px"));
- });
-
- test( "window widths larger than the break points set min-width classes", function(){
- $.fn.width = function(){ return 1900; };
-
- $.mobile.addResolutionBreakpoints([125]);
- ok($("html").hasClass("min-width-125px"));
- });
-
- test( "many break points result in many class additions", function(){
- $.fn.width = function(){ return 1900; };
- $.mobile.addResolutionBreakpoints([1, 2]);
-
- ok($("html").hasClass("min-width-1px"));
- ok($("html").hasClass("min-width-2px"));
- });
-
- test( "adds all classes for default res breakpoints", function(){
- expect( 4 );
- $.fn.width = function(){ return 1900; };
- $.mobile.addResolutionBreakpoints([]);
-
- // TODO should expose the defaults to prevent brittle tests
- $.each([320, 480, 768, 1024], function(i, element){
- ok($("html").hasClass("min-width-" + element + "px"));
- });
- });
-
- test( "binds remove of portrait and landscape classes resize/orientation fired", function(){
- expect( 2 );
-
- $.Event.prototype.orientation = "foo";
-
- $(window).bind("orientationchange.htmlclass resize.htmlclass", function(event){
- ok(!$("html").hasClass("portrait landscape"));
- start();
- });
-
- $("html").addClass("portrait landscape");
- $(window).trigger("resize.htmlclass");
-
- $("html").addClass("portrait landscape");
- $(window).trigger("orientationchange.htmlclass");
- stop();
- });
-
- test( "sets break point class additions on resize/orientation change", function(){
- $.fn.width = function(){ return 1900; };
-
- $("html").removeClass("min-width-320px");
- $(window).trigger("resize.htmlclass");
- ok($("html").hasClass("min-width-320px"));
- });
})(jQuery);
@@ -24,5 +24,7 @@
.ui-controlgroup .ui-btn-icon-notext .ui-btn-inner { padding: 5px 6px 5px 5px; }
*/
-.min-width-480px .ui-controlgroup-label { vertical-align: top; display: inline-block; width: 20%; margin: 0 2% 0 0; }
-.min-width-480px .ui-controlgroup-controls { width: 60%; display: inline-block; }
+@media all and (min-width: 450px){
+ .ui-controlgroup-label { vertical-align: top; display: inline-block; width: 20%; margin: 0 2% 0 0; }
+ .ui-controlgroup-controls { width: 60%; display: inline-block; }
+}
@@ -5,4 +5,6 @@
*/
.ui-field-contain { background: none; padding: 1.5em 0; margin: 0; border-bottom-width: 1px; overflow: visible; }
.ui-field-contain:first-child { border-top-width: 0; }
-.min-width-480px .ui-field-contain { border-width: 0; padding: 0; margin: 1em 0; }
+@media all and (min-width: 450px){
+ .ui-field-contain { border-width: 0; padding: 0; margin: 1em 0; }
+}
@@ -29,8 +29,10 @@ label.ui-select { font-size: 16px; line-height: 1.4; font-weight: normal; margi
.ui-li.ui-selectmenu-placeholder { display: none; }
.ui-selectmenu .ui-header .ui-title { margin: 0.6em 46px 0.8em; }
-.min-width-480px label.ui-select { display: inline-block; width: 20%; margin: 0 2% 0 0; }
-.min-width-480px .ui-select { width: 60%; display: inline-block; }
+@media all and (min-width: 450px){
+ label.ui-select { display: inline-block; width: 20%; margin: 0 2% 0 0; }
+ .ui-select { width: 60%; display: inline-block; }
+}
/* when no placeholder is defined in a multiple select, the header height doesn't even extend past the close button. this shim's content in there */
.ui-selectmenu .ui-header h1:after { content: '.'; visibility: hidden; }
@@ -4,13 +4,15 @@
* Dual licensed under the MIT (MIT-LICENSE.txt) or GPL (GPL-LICENSE.txt) licenses.
*/
label.ui-slider { display: block; }
-input.ui-slider-input, .min-width-480px input.ui-slider-input { display: inline-block; width: 50px; }
+input.ui-slider-input { display: inline-block; width: 50px; }
select.ui-slider-switch { display: none; }
div.ui-slider { position: relative; display: inline-block; overflow: visible; height: 15px; padding: 0; margin: 0 2% 0 20px; top: 4px; width: 66%; }
a.ui-slider-handle { position: absolute; z-index: 10; top: 50%; width: 28px; height: 28px; margin-top: -15px; margin-left: -15px; }
a.ui-slider-handle .ui-btn-inner { padding-left: 0; padding-right: 0; }
-.min-width-480px label.ui-slider { display: inline-block; width: 20%; margin: 0 2% 0 0; }
-.min-width-480px div.ui-slider { width: 45%; }
+@media all and (min-width: 480px){
+ label.ui-slider { display: inline-block; width: 20%; margin: 0 2% 0 0; }
+ div.ui-slider { width: 45%; }
+}
div.ui-slider-switch { height: 32px; overflow: hidden; margin-left: 0; }
div.ui-slider-inneroffset { margin-left: 50%; position: absolute; top: 1px; height: 100%; width: 50%; }
@@ -13,10 +13,11 @@ textarea.ui-input-text { height: 50px; -webkit-transition: height 200ms linear;
.ui-input-search .ui-input-clear-hidden { display: none; }
/* orientation adjustments - incomplete!*/
-.min-width-480px label.ui-input-text { vertical-align: top; }
-.min-width-480px label.ui-input-text { display: inline-block; width: 20%; margin: 0 2% 0 0; }
-.min-width-480px input.ui-input-text,
-.min-width-480px textarea.ui-input-text,
-.min-width-480px .ui-input-search { width: 60%; display: inline-block; }
-.min-width-480px .ui-input-search { width: 50%; }
-.min-width-480px .ui-input-search input.ui-input-text { width: 98%; /*echos rule from above*/ }
+@media all and (min-width: 450px){
+ label.ui-input-text { vertical-align: top; display: inline-block; width: 20%; }
+ input.ui-input-text,
+ textarea.ui-input-text,
+ .ui-input-search { width: 60%; display: inline-block; }
+ .ui-input-search { width: 50%; }
+ .ui-input-search input.ui-input-text { width: 98%; /*echos rule from above*/ }
+}
@@ -26,7 +26,9 @@ ol.ui-listview .ui-li-jsnumbering:before { content: "" !important; } /* to avoid
.ui-li-thumb, .ui-li-icon, .ui-li-content { float: left; margin-right: 10px; }
.ui-li-aside { float: right; width: 50%; text-align: right; margin: .3em 0; }
-.min-width-480px .ui-li-aside { width: 45%; }
+@media all and (min-width: 480px){
+ .ui-li-aside { width: 45%; }
+}
.ui-li-divider { cursor: default; }
.ui-li-has-alt .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-alt { padding-right: 95px; }
.ui-li-count { position: absolute; font-size: 11px; font-weight: bold; padding: .2em .5em; top: 50%; margin-top: -.9em; right: 38px; }

0 comments on commit 3116441

Please sign in to comment.