/*! matchmedia() polyfill - test a css media type/query in js. authors & copyright (c) 2012: scott jehl, paul irish, nicholas zakas. dual mit/bsd license */ /*! note: if you're already including a window.matchmedia polyfill via modernizr or otherwise, you don't need this part */ window.matchmedia = window.matchmedia || (function(doc, undefined){ var bool, docelem = doc.documentelement, refnode = docelem.firstelementchild || docelem.firstchild, // fakebody required for fakebody = doc.createelement('body'), div = doc.createelement('div'); div.id = 'mq-test-1'; div.style.csstext = "position:absolute;top:-100em"; fakebody.style.background = "none"; fakebody.appendchild(div); return function(q){ div.innerhtml = ''; docelem.insertbefore(fakebody, refnode); bool = div.offsetwidth == 42; docelem.removechild(fakebody); return { matches: bool, media: q }; }; })(document); /*! respond.js v1.1.0: min/max-width media query polyfill. (c) scott jehl. mit/gplv2 lic. j.mp/respondjs */ (function( win ){ //exposed namespace win.respond = {}; //define update even in native-mq-supporting browsers, to avoid errors respond.update = function(){}; //expose media query support flag for external use respond.mediaqueriessupported = win.matchmedia && win.matchmedia( "only all" ).matches; //if media queries are supported, exit here if( respond.mediaqueriessupported ){ return; } //define vars var doc = win.document, docelem = doc.documentelement, mediastyles = [], rules = [], appendedels = [], parsedsheets = {}, resizethrottle = 30, head = doc.getelementsbytagname( "head" )[0] || docelem, base = doc.getelementsbytagname( "base" )[0], links = head.getelementsbytagname( "link" ), requestqueue = [], //loop stylesheets, send text content to translate ripcss = function(){ var sheets = links, sl = sheets.length, i = 0, //vars for loop: sheet, href, media, iscss; for( ; i < sl; i++ ){ sheet = sheets[ i ], href = sheet.href, media = sheet.media, iscss = sheet.rel && sheet.rel.tolowercase() === "stylesheet"; //only links plz and prevent re-parsing if( !!href && iscss && !parsedsheets[ href ] ){ // selectivizr exposes css through the rawcsstext expando if (sheet.stylesheet && sheet.stylesheet.rawcsstext) { translate( sheet.stylesheet.rawcsstext, href, media ); parsedsheets[ href ] = true; } else { if( (!/^([a-za-z:]*\/\/)/.test( href ) && !base) || href.replace( regexp.$1, "" ).split( "/" )[0] === win.location.host ){ requestqueue.push( { href: href, media: media } ); } } } } makerequests(); }, //recurse through request queue, get css text makerequests = function(){ if( requestqueue.length ){ var thisrequest = requestqueue.shift(); ajax( thisrequest.href, function( styles ){ translate( styles, thisrequest.href, thisrequest.media ); parsedsheets[ thisrequest.href ] = true; makerequests(); } ); } }, //find media blocks in css text, convert to style blocks translate = function( styles, href, media ){ var qs = styles.match( /@media[^\{]+\{([^\{\}]*\{[^\}\{]*\})+/gi ), ql = qs && qs.length || 0, //try to get css path href = href.substring( 0, href.lastindexof( "/" )), repurls = function( css ){ return css.replace( /(url\()['"]?([^\/\)'"][^:\)'"]+)['"]?(\))/g, "$1" + href + "$2$3" ); }, usemedia = !ql && media, //vars used in loop i = 0, j, fullq, thisq, eachq, eql; //if path exists, tack on trailing slash if( href.length ){ href += "/"; } //if no internal queries exist, but media attr does, use that //note: this currently lacks support for situations where a media attr is specified on a link and //its associated stylesheet has internal css media queries. //in those cases, the media attribute will currently be ignored. if( usemedia ){ ql = 1; } for( ; i < ql; i++ ){ j = 0; //media attr if( usemedia ){ fullq = media; rules.push( repurls( styles ) ); } //parse for styles else{ fullq = qs[ i ].match( /@media *([^\{]+)\{([\s\s]+?)$/ ) && regexp.$1; rules.push( regexp.$2 && repurls( regexp.$2 ) ); } eachq = fullq.split( "," ); eql = eachq.length; for( ; j < eql; j++ ){ thisq = eachq[ j ]; mediastyles.push( { media : thisq.split( "(" )[ 0 ].match( /(only\s+)?([a-za-z]+)\s?/ ) && regexp.$2 || "all", rules : rules.length - 1, hasquery: thisq.indexof("(") > -1, minw : thisq.match( /\(min\-width:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/ ) && parsefloat( regexp.$1 ) + ( regexp.$2 || "" ), maxw : thisq.match( /\(max\-width:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/ ) && parsefloat( regexp.$1 ) + ( regexp.$2 || "" ) } ); } } applymedia(); }, lastcall, resizedefer, // returns the value of 1em in pixels getemvalue = function() { var ret, div = doc.createelement('div'), body = doc.body, fakeused = false; div.style.csstext = "position:absolute;font-size:1em;width:1em"; if( !body ){ body = fakeused = doc.createelement( "body" ); body.style.background = "none"; } body.appendchild( div ); docelem.insertbefore( body, docelem.firstchild ); ret = div.offsetwidth; if( fakeused ){ docelem.removechild( body ); } else { body.removechild( div ); } //also update eminpx before returning ret = eminpx = parsefloat(ret); return ret; }, //cached container for 1em value, populated the first time it's needed eminpx, //enable/disable styles applymedia = function( fromresize ){ var name = "clientwidth", docelemprop = docelem[ name ], currwidth = doc.compatmode === "css1compat" && docelemprop || doc.body[ name ] || docelemprop, styleblocks = {}, lastlink = links[ links.length-1 ], now = (new date()).gettime(); //throttle resize calls if( fromresize && lastcall && now - lastcall < resizethrottle ){ cleartimeout( resizedefer ); resizedefer = settimeout( applymedia, resizethrottle ); return; } else { lastcall = now; } for( var i in mediastyles ){ var thisstyle = mediastyles[ i ], min = thisstyle.minw, max = thisstyle.maxw, minnull = min === null, maxnull = max === null, em = "em"; if( !!min ){ min = parsefloat( min ) * ( min.indexof( em ) > -1 ? ( eminpx || getemvalue() ) : 1 ); } if( !!max ){ max = parsefloat( max ) * ( max.indexof( em ) > -1 ? ( eminpx || getemvalue() ) : 1 ); } // if there's no media query at all (the () part), or min or max is not null, and if either is present, they're true if( !thisstyle.hasquery || ( !minnull || !maxnull ) && ( minnull || currwidth >= min ) && ( maxnull || currwidth <= max ) ){ if( !styleblocks[ thisstyle.media ] ){ styleblocks[ thisstyle.media ] = []; } styleblocks[ thisstyle.media ].push( rules[ thisstyle.rules ] ); } } //remove any existing respond style element(s) for( var i in appendedels ){ if( appendedels[ i ] && appendedels[ i ].parentnode === head ){ head.removechild( appendedels[ i ] ); } } //inject active styles, grouped by media type for( var i in styleblocks ){ var ss = doc.createelement( "style" ), css = styleblocks[ i ].join( "\n" ); ss.type = "text/css"; ss.media = i; //originally, ss was appended to a documentfragment and sheets were appended in bulk. //this caused crashes in ie in a number of circumstances, such as when the html element had a bg image set, so appending beforehand seems best. thanks to @dvelyk for the initial research on this one! head.insertbefore( ss, lastlink.nextsibling ); if ( ss.stylesheet ){ ss.stylesheet.csstext = css; } else { ss.appendchild( doc.createtextnode( css ) ); } //push to appendedels to track for later removal appendedels.push( ss ); } }, //tweaked ajax functions from quirksmode ajax = function( url, callback ) { var req = xmlhttp(); if (!req){ return; } req.open( "get", url, true ); req.onreadystatechange = function () { if ( req.readystate != 4 || req.status != 200 && req.status != 304 ){ return; } callback( req.responsetext ); } if ( req.readystate == 4 ){ return; } req.send( null ); }, //define ajax obj xmlhttp = (function() { var xmlhttpmethod = false; try { xmlhttpmethod = new xmlhttprequest(); } catch( e ){ xmlhttpmethod = new activexobject( "microsoft.xmlhttp" ); } return function(){ return xmlhttpmethod; }; })(); //translate css ripcss(); //expose update for re-running respond later on respond.update = ripcss; //adjust on resize function callmedia(){ applymedia( true ); } if( win.addeventlistener ){ win.addeventlistener( "resize", callmedia, false ); } else if( win.attachevent ){ win.attachevent( "onresize", callmedia ); } })(this);