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
@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 / noncritcss.md
Last active Oct 26, 2019
Comparing two ways to load non-critical CSS
View noncritcss.md

I wanted to figure out the fastest way to load non-critical CSS so that the impact on initial page drawing is minimal.

TL;DR: Here's the solution I ended up with: https://github.com/filamentgroup/loadCSS/


For async JavaScript file requests, we have the async attribute to make this easy, but CSS file requests have no similar standard mechanism (at least, none that will still apply the CSS after loading - here are some async CSS loading conditions that do apply when CSS is inapplicable to media: https://gist.github.com/igrigorik/2935269#file-notes-md ).

Seems there are a couple ways to load and apply a CSS file in a non-blocking manner:

@scottjehl
scottjehl / anchorinclude.js
Created May 20, 2011
Anchor-include Pattern
View anchorinclude.js
/*
* anchor-include pattern for already-functional links that work as a client-side include
* Copyright 2011, Scott Jehl, scottjehl.com
* Dual licensed under the MIT
* Idea from Scott Gonzalez
* to use, place attributes on an already-functional anchor pointing to content
* that should either replace, or insert before or after that anchor
* after the page has loaded
* Replace: <a href="..." data-replace="articles/latest/fragment">Latest Articles</a>
* Before: <a href="..." data-before="articles/latest/fragment">Latest Articles</a>
@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 / tmplmeta.md
Created Jan 25, 2013
Template meta tag pattern for template-based decisions
View tmplmeta.md

I've been finding this little meta[name='tmpl'] pattern useful lately when making template-based decisions in JS, such as when loading a particular file or set of files that are needed only on a particular page of a site.

First, in the HTML of a particular template, like say, a search result page:

<head>
  ...
  <meta name="tmpl" content="searchresult">
</head>
@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 / jqm-simple-dynamic-page.js
Created Jun 21, 2011
jQuery Mobile: Simple dynamic page creation
View jqm-simple-dynamic-page.js
/* Dynamically create a page and navigate to it.
(and include the page in browser history ) */
//create markup
var newPage = $("<div data-role=page data-url=yay><div data-role=header><h1>YAY!!!!</h1></div><div data-role=content><img src=http://bukk.it/yay.gif /></div></div");
//append it to the page container
newPage.appendTo( $.mobile.pageContainer );
//go to it
View detect IE and version number through injected conditional comments.js
//detect Internet Explorer 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)
var isIE = (function(undefined){
var doc = document,
doc_elem = doc.documentElement,
cache = {},
@scottjehl
scottjehl / fonts.js
Created Apr 17, 2013
current font loading snippet
View fonts.js
...
// test for font-face version to load via Data URI'd CSS
// Basically, load WOFF unless it's android's default browser, which needs TTF, or ie8-, which needs eot
var fonts = ns.files.css.fontsWOFF,
ua = win.navigator.userAgent;
// android webkit browser, non-chrome
if( ua.indexOf( "Android" ) > -1 && ua.indexOf( "like Gecko" ) > -1 && ua.indexOf( "Chrome" ) === -1 ){
fonts = ns.files.css.fontsTTF;
}
@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.