| // inert-unert.js: a quick utility for applying or removing the inert property | |
| // - @scottjehl, @filamentgroup | |
| // (note: inert support polyfill is still needed in some browsers) | |
| // usage: | |
| // when a modal element such as a dialog is active, | |
| // this function will make unrelated elements inert, aiming to affect as few as possible | |
| // example: inert( document.querySelector(".modal-open") ); | |
| function inert( allButThisElement ){ | |
| function inertSiblings( node ){ | |
| if( node.parentNode ){ |
| /* | |
| * 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 ){ |
| /*! | |
| 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;"; |
| /* | |
| NOTE!!!! | |
| The most updated version of this code is here: | |
| https://github.com/scottjehl/iOS-Orientationchange-Fix |
| ... | |
| // 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; | |
| } |
| /* 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 |
| // 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 | |
| }; |
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>
| /* | |
| * jQuery special events for delayedEnter, delayedLeave, and delayedHover | |
| * Author: Scott Jehl, scott@filamentgroup.com | |
| * Copyright (c) 2011 Filament Group | |
| * licensed under MIT | |
| * note: Each event can be used with bind or live event handling as you would use mouseenter,mouseleave, and hover | |
| * events fire after 200ms timeout | |
| */ | |
| (function($){ | |
| //delayedEnter event |
| //quick online/offline check | |
| function hasInternets() { | |
| var s = $.ajax({ | |
| type: "HEAD", | |
| url: window.location.href.split("?")[0] + "?" + Math.random(), | |
| async: false | |
| }).status; | |
| //thx http://www.louisremi.com/2011/04/22/navigator-online-alternative-serverreachable/ | |
| return s >= 200 && s < 300 || s === 304; | |
| }; |