Scott Jehl scottjehl

## detect IE and version number through injected conditional comments.js
//EnhanceJS isIE test idea

//detect IE and version number through injected conditional comments (no UA detect, no need for cond. compilation / jscript check)

//version arg is for IE version (optional)
//comparison arg supports 'lte', 'gte', etc (optional)

function isIE(version, comparison) {
	var cc      = 'IE',
	    b       = document.createElement('B'),

## media query check
/*
 * mediaquery function - test whether a CSS media type or query applies
 * author: Scott Jehl
 * Copyright (c) 2010 Filament Group, Inc
 * MIT license
 * Developed as a feature of the EnhanceJS Framework (enhancejs.googlecode.com)
 * thx to:
   - phpied.com/dynamic-script-and-style-elements-in-ie for inner css text trick
   - @paul_irish for fakeBody trick
*/

## media query check - media.matchMedium.js
/*
 * media.matchMedium()- test whether a CSS media type or media query applies
 * primary author: Scott Jehl
 * Copyright (c) 2010 Filament Group, Inc
 * MIT license

 * adapted by Paul Irish to use the matchMedium API
 *    http://www.w3.org/TR/cssom-view/#media
 * Doesn't implement media.type as there's no way for crossbrowser property
 *    getters. instead of media.type == 'tv' just use media.matchMedium('tv')

## Let IE7+ Into jQuery Mobile
//run this script after jQuery loads, but before jQuery Mobile loads

//customize jQuery Mobile to let IE7+ in (Mobile IE)
$(document).bind("mobileinit", function(){
  $.extend(  $.mobile , {

  //extend gradeA qualifier to include IE7+
    gradeA: function(){
    	//IE version check by James Padolsey, modified by jdalton - from http://gist.github.com/527683
		var ie = (function() {

## quick custom build for test...
/*!
 * jQuery Mobile v1.0a3pre
 * http://jquerymobile.com/
 *
 * Copyright 2010, jQuery Project
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 */
(function(a,f){if(a.cleanData){var c=a.cleanData;a.cleanData=function(b){for(var e=0,d;(d=b[e])!=null;e++)a(d).triggerHandler("remove");c(b)}}else{var g=a.fn.remove;a.fn.remove=function(b,e){return this.each(function(){if(!e)if(!b||a.filter(b,[this]).length)a("*",this).add([this]).each(function(){a(this).triggerHandler("remove")});return g.call(a(this),b,e)})}}a.widget=function(b,e,d){var i=b.split(".")[0],k;b=b.split(".")[1];k=i+"-"+b;if(!d){d=e;e=a.Widget}a.expr[":"][k]=function(l){return!!a.data(l,
b)};a[i]=a[i]||{};a[i][b]=function(l,h){arguments.length&&this._createWidget(l,h)};e=new e;e.options=a.extend(true,{},e.options);a[i][b].prototype=a.extend(true,e,{namespace:i,widgetName:b,widgetEventPrefix:a[i][b].prototype.widgetEventPrefix||b,widgetBaseClass:k},d);a.widget.bridge(b,a[i][b])};a.widget.bridge=function(b,e){a.fn

## Check whether hash changes make history entries
// potential test for whether changing location.hash creates a history entry
// in browsers where this isn't true (blackberry, nokia), hash changes can't be reached through the back/forward buttons
// just testing whether this approach is feasible...

var hashMakesHistory = function(){
	var histLength = window.history.length,
		prevHash = window.location.hash,
		historyMade;

	//change the hash to something unique

## jquery-bookmarklet.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>jQuery Mobile Original Source Bookmarklet for Firefox and Chrome</title>
  <style type="text/css" media="screen">
    body, html, h1 { margin: 0; padding: 0; }

    html { padding: 20px; background: #ddd; }
    body { max-width: 600px; margin: 0 auto; padding: 20px; box-sizing: border-box; background: #fff; font-family: Helvetica, arial; box-shadow: rgba(0,0,0,0.2)  0 0 5px }

## support-posfixed.js
/* jQuery-based feature test for CSS position: fixed support.
Modified from Kangax's test (http://kangax.github.com/cft/#IS_POSITION_FIXED_SUPPORTED) in two ways: 1) uses jQuery API, 2) remove document.body dependency.
Method changes aside, the required workaround for dropping document.body use was to set scroll using window.scrollTo instead of body.scrollTop.

//Testing notes:
iOS4.3: false (expected)
iOS5: true (expected)
Chrome latest: true  (expected)
...more soon
*/

## hideaddrbar.min.js
/*
  * Normalized hide address bar for iOS & Android
  * (c) Scott Jehl, scottjehl.com
  * MIT License
*/
(function(e){var d=e.document;if(!location.hash&&e.addEventListener){window.scrollTo(0,1);var c=1,b=function(){return e.pageYOffset||d.compatMode==="CSS1Compat"&&d.documentElement.scrollTop||d.body.scrollTop||0},a=setInterval(function(){if(d.body){clearInterval(a);c=b();e.scrollTo(0,c===1?0:1)}},15);e.addEventListener("load",function(){setTimeout(function(){if(b()<20){e.scrollTo(0,c===1?0:1)}},0)})}})(this);

## srcsettoday.md

      
        
          
            
              
              1 file
            
          
          
            
              
              0 forks
            
          
          
            
              
              18 comments
            
          
          
            
              
              3 stars
            
          
        
        
          
              
          
          
            
                scottjehl
                / srcsettoday.md
            
            
              Created
              May 15, 2012 13:52
            
              
                Could IMG@srcset be used sensibly in existing browsers?
              
          
        
      
        
  
      
    Some early thoughts on img@srcset in the real world

Many agree that the newly proposed srcset attribute is much less syntactically intuitive than the widely appreciated picture element. I hope that the WHATWG and W3C review all of the efforts that the web dev community have put into the picture element proposal in their own community group and go back on this recent addition.
Syntax aside... if srcset was here to stay regardless of what we want, is there any way we could make it work in existing browsers without introducing unnecessary overhead or potentially buggy markup? At a glance, it looks shaky to me.
The main problem is request overhead, and attempting to work around that.
Given the following markup, existing browsers will prefetch/fetch the image referenced in the src attribute, and JavaScript can not prevent that request from going out. This means larger screen devices will request an unnecessary image for every imgset on a page - not good.
	//EnhanceJS isIE test idea

	//detect IE and version number through injected conditional comments (no UA detect, no need for cond. compilation / jscript check)

	//version arg is for IE version (optional)
	//comparison arg supports 'lte', 'gte', etc (optional)

	function isIE(version, comparison) {
	var cc = 'IE',
	b = document.createElement('B'),
	/*
	* mediaquery function - test whether a CSS media type or query applies
	* author: Scott Jehl
	* Copyright (c) 2010 Filament Group, Inc
	* MIT license
	* Developed as a feature of the EnhanceJS Framework (enhancejs.googlecode.com)
	* thx to:
	- phpied.com/dynamic-script-and-style-elements-in-ie for inner css text trick
	- @paul_irish for fakeBody trick
	*/
	/*
	* media.matchMedium()- test whether a CSS media type or media query applies
	* primary author: Scott Jehl
	* Copyright (c) 2010 Filament Group, Inc
	* MIT license

	* adapted by Paul Irish to use the matchMedium API
	* http://www.w3.org/TR/cssom-view/#media
	* Doesn't implement media.type as there's no way for crossbrowser property
	* getters. instead of media.type == 'tv' just use media.matchMedium('tv')
	//run this script after jQuery loads, but before jQuery Mobile loads

	//customize jQuery Mobile to let IE7+ in (Mobile IE)
	$(document).bind("mobileinit", function(){
	$.extend( $.mobile , {

	//extend gradeA qualifier to include IE7+
	gradeA: function(){
	//IE version check by James Padolsey, modified by jdalton - from http://gist.github.com/527683
	var ie = (function() {
	/*!
	* jQuery Mobile v1.0a3pre
	* http://jquerymobile.com/
	*
	* Copyright 2010, jQuery Project
	* Dual licensed under the MIT or GPL Version 2 licenses.
	* http://jquery.org/license
	*/
	(function(a,f){if(a.cleanData){var c=a.cleanData;a.cleanData=function(b){for(var e=0,d;(d=b[e])!=null;e++)a(d).triggerHandler("remove");c(b)}}else{var g=a.fn.remove;a.fn.remove=function(b,e){return this.each(function(){if(!e)if(!b\|\|a.filter(b,[this]).length)a("*",this).add([this]).each(function(){a(this).triggerHandler("remove")});return g.call(a(this),b,e)})}}a.widget=function(b,e,d){var i=b.split(".")[0],k;b=b.split(".")[1];k=i+"-"+b;if(!d){d=e;e=a.Widget}a.expr[":"][k]=function(l){return!!a.data(l,
	b)};a[i]=a[i]\|\|{};a[i][b]=function(l,h){arguments.length&&this._createWidget(l,h)};e=new e;e.options=a.extend(true,{},e.options);a[i][b].prototype=a.extend(true,e,{namespace:i,widgetName:b,widgetEventPrefix:a[i][b].prototype.widgetEventPrefix\|\|b,widgetBaseClass:k},d);a.widget.bridge(b,a[i][b])};a.widget.bridge=function(b,e){a.fn
	// potential test for whether changing location.hash creates a history entry
	// in browsers where this isn't true (blackberry, nokia), hash changes can't be reached through the back/forward buttons
	// just testing whether this approach is feasible...

	var hashMakesHistory = function(){
	var histLength = window.history.length,
	prevHash = window.location.hash,
	historyMade;

	//change the hash to something unique
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title>jQuery Mobile Original Source Bookmarklet for Firefox and Chrome</title>
	<style type="text/css" media="screen">
	body, html, h1 { margin: 0; padding: 0; }

	html { padding: 20px; background: #ddd; }
	body { max-width: 600px; margin: 0 auto; padding: 20px; box-sizing: border-box; background: #fff; font-family: Helvetica, arial; box-shadow: rgba(0,0,0,0.2) 0 0 5px }
	/* jQuery-based feature test for CSS position: fixed support.
	Modified from Kangax's test (http://kangax.github.com/cft/#IS_POSITION_FIXED_SUPPORTED) in two ways: 1) uses jQuery API, 2) remove document.body dependency.
	Method changes aside, the required workaround for dropping document.body use was to set scroll using window.scrollTo instead of body.scrollTop.

	//Testing notes:
	iOS4.3: false (expected)
	iOS5: true (expected)
	Chrome latest: true (expected)
	...more soon
	*/
	/*
	* Normalized hide address bar for iOS & Android
	* (c) Scott Jehl, scottjehl.com
	* MIT License
	*/
	(function(e){var d=e.document;if(!location.hash&&e.addEventListener){window.scrollTo(0,1);var c=1,b=function(){return e.pageYOffset\|\|d.compatMode==="CSS1Compat"&&d.documentElement.scrollTop\|\|d.body.scrollTop\|\|0},a=setInterval(function(){if(d.body){clearInterval(a);c=b();e.scrollTo(0,c===1?0:1)}},15);e.addEventListener("load",function(){setTimeout(function(){if(b()<20){e.scrollTo(0,c===1?0:1)}},0)})}})(this);