diff --git a/js/jquery.mobile.media.js b/js/jquery.mobile.media.js index 7e2a5320..34df0473 100644 --- a/js/jquery.mobile.media.js +++ b/js/jquery.mobile.media.js @@ -4,13 +4,13 @@ * Dual licensed under the MIT or GPL Version 2 licenses. * http://jquery.org/license */ -(function($, undefined ) { +(function( $, undefined ) { -var $window = $(window), +var $window = $( window ), $html = $( "html" ), //media-query-like width breakpoints, which are translated to classes on the html element - resolutionBreakpoints = [320,480,768,1024]; + resolutionBreakpoints = [ 320, 480, 768, 1024 ]; /* $.mobile.media method: pass a CSS media type or query and get a bool return @@ -28,17 +28,18 @@ $.mobile.media = (function() { return function( query ) { if ( !( query in cache ) ) { - var styleBlock = document.createElement('style'), - cssrule = "@media " + query + " { #jquery-mediatest { position:absolute; } }"; - //must set type for IE! - styleBlock.type = "text/css"; - if (styleBlock.styleSheet){ - styleBlock.styleSheet.cssText = cssrule; - } - else { - styleBlock.appendChild(document.createTextNode(cssrule)); - } - + var styleBlock = document.createElement( "style" ), + cssrule = "@media " + query + " { #jquery-mediatest { position:absolute; } }"; + + //must set type for IE! + styleBlock.type = "text/css"; + + if ( styleBlock.styleSheet ){ + styleBlock.styleSheet.cssText = cssrule; + } else { + styleBlock.appendChild( document.createTextNode(cssrule) ); + } + $html.prepend( fakeBody ).prepend( styleBlock ); cache[ query ] = testDiv.css( "position" ) === "absolute"; fakeBody.add( styleBlock ).remove(); @@ -52,7 +53,7 @@ $.mobile.media = (function() { 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(){ +function detectResolutionBreakpoints() { var currWidth = $window.width(), minPrefix = "min-width-", maxPrefix = "max-width-", @@ -64,17 +65,21 @@ function detectResolutionBreakpoints(){ $html.removeClass( minPrefix + resolutionBreakpoints.join(unit + " " + minPrefix) + unit + " " + maxPrefix + resolutionBreakpoints.join( unit + " " + maxPrefix) + unit ); - $.each(resolutionBreakpoints,function( i, breakPoint ){ - if( currWidth >= breakPoint ){ + $.each( resolutionBreakpoints, function( i, breakPoint ) { + if( currWidth >= breakPoint ) { minBreakpoints.push( minPrefix + breakPoint + unit ); } - if( currWidth <= breakPoint ){ + if( currWidth <= breakPoint ) { maxBreakpoints.push( maxPrefix + breakPoint + unit ); } }); - if( minBreakpoints.length ){ breakpointClasses = minBreakpoints.join(" "); } - if( maxBreakpoints.length ){ breakpointClasses += " " + maxBreakpoints.join(" "); } + if ( minBreakpoints.length ) { + breakpointClasses = minBreakpoints.join(" "); + } + if ( maxBreakpoints.length ) { + breakpointClasses += " " + maxBreakpoints.join(" "); + } $html.addClass( breakpointClasses ); }; @@ -85,39 +90,47 @@ function detectResolutionBreakpoints(){ $.mobile.addResolutionBreakpoints( 500 ); $.mobile.addResolutionBreakpoints( [500, 1200] ); */ -$.mobile.addResolutionBreakpoints = function( newbps ){ +$.mobile.addResolutionBreakpoints = function( newbps ) { if( $.type( newbps ) === "array" ){ resolutionBreakpoints = resolutionBreakpoints.concat( newbps ); - } - else { + } else { resolutionBreakpoints.push( newbps ); } - resolutionBreakpoints.sort(function(a,b){ return a-b; }); + + 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 */ +/* 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 + var ev = $.support.orientation; - $window.bind("orientationchange.htmlclass throttledResize.htmlclass", function(event){ - //add orientation class to HTML element on flip/resize. - if(event.orientation){ + + $window.bind( "orientationchange.htmlclass throttledResize.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 + + // 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. + 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(){ +$(function() { //trigger event manually $window.trigger( "orientationchange.htmlclass" ); });