Skip to content

Instantly share code, notes, and snippets.

Scott Jehl scottjehl

Block or report user

Report or block scottjehl

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
View loadicons.html
<head>
...
...
<script>
// async-load a stylesheet full of data-uri'd icons...
(function( href ){
links = document.getElementsByTagName( "link" ),
elem = document.createElement( "link" ),
ref = links[ links.length ];
@scottjehl
scottjehl / appendaround-db.js
Created Jul 24, 2012
appendaround with simple debounce
View appendaround-db.js
/*! appendAround markup pattern. [c]2012, @scottjehl, Filament Group, Inc. MIT/GPL
how-to:
1. Insert potential element containers throughout the DOM
2. give each container a data-set attribute with a value that matches all other containers' values
3. Place your appendAround content in one of the potential containers
4. Call appendAround() on that element when the DOM is ready
*/
(function( $ ){
$.fn.appendAround = function(){
return this.each(function(){
@scottjehl
scottjehl / srcsettoday.md
Created May 15, 2012
Could IMG@srcset be used sensibly in existing browsers?
View srcsettoday.md

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.

@scottjehl
scottjehl / getViewportSize.js
Created Mar 16, 2012
Reliably get viewport dimensions in JS
View getViewportSize.js
/*!
An experiment in getting accurate visible viewport dimensions across devices
(c) 2012 Scott Jehl.
MIT/GPLv2 Licence
*/
function viewportSize(){
var test = document.createElement( "div" );
test.style.cssText = "position: fixed;top: 0;left: 0;bottom: 0;right: 0;";
@scottjehl
scottjehl / index.html
Created Mar 12, 2012
jQuery Mobile FixedToolbar Polyfill for non-fixed-positioning-supporting browsers (like iOS4)
View index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Fixed Toolbars Polyfill</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css">
<link rel="stylesheet" href="jquery.mobile.fixedToolbar.polyfill.css">
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
@scottjehl
scottjehl / fixorientationzoom.js
Created Jan 6, 2012
Fix iOS Orientation Change Zoom Bug
View fixorientationzoom.js
/*
NOTE!!!!
The most updated version of this code is here:
https://github.com/scottjehl/iOS-Orientationchange-Fix
@scottjehl
scottjehl / hideaddrbar.min.js
Created Dec 21, 2011
Normalized hide address bar for iOS & Android
View 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);
@scottjehl
scottjehl / support-posfixed.js
Created Dec 13, 2011
jQuery-based Position Fixed Feature Test
View 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
*/
@scottjehl
scottjehl / hideaddrbar.js
Created Aug 31, 2011
Normalized hide address bar for iOS & Android
View hideaddrbar.js
/*
* Normalized hide address bar for iOS & Android
* (c) Scott Jehl, scottjehl.com
* MIT License
*/
(function( win ){
var doc = win.document;
// If there's a hash, or addEventListener is undefined, stop here
if( !location.hash && win.addEventListener ){
@scottjehl
scottjehl / jqm-self-init-a-widget.js
Created Jul 8, 2011
Self-init a jQuery Mobile plugin
View jqm-self-init-a-widget.js
// First, let's define a widget/plugin called "foo"
// Either using jQuery's $.fn plugin namespace, for simple stateless plugins...
$.fn.foo = function(){
// In this scope, this refers to the element on which the plugin foo() was called
// manipulate it and return this at the end, so it can be chainable
};
You can’t perform that action at this time.