Skip to content

Instantly share code, notes, and snippets.

View aFarkas's full-sized avatar

Alexander Farkas aFarkas

1.2k followers · 32 following
View GitHub Profile
@aFarkas
aFarkas / mediaquery.js
Last active August 29, 2015 14:07 — forked from jonathantneal/mediaquery.js
(function () {
var
documentElement = document.documentElement,
viewportFontSize, viewportHeight, viewportIsPortrait, viewportMax, viewportMin, viewportWidth;
function getViewportFontSize() {
var
body = documentElement.appendChild(document.createElement('body')),
iframe = document.createElement('iframe'),
iframeDocument;
@aFarkas
aFarkas / readystatebug.js
Created October 20, 2014 17:56
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
var onreadys = function(){
console.log(document.readyState);
console.log(document.body);
@aFarkas
aFarkas / runpicturefill.js
Last active August 29, 2015 14:07
var timer;
var run = function(){
runpictureFill();
if(document.readyState == 'complete'){
clearInterval(timer);
}
};
timer = setInterval(run, 250);
setTimeout(run, document.body ? 9 : 99);
@aFarkas
aFarkas / maxres.html
Created October 27, 2014 17:07
<img src="logo.png" srcset="logo2x.png 200w, logo3x.png 300w" />
@aFarkas
aFarkas / maxres.html
Last active August 29, 2015 14:08
add maxdpr option
<!-- if you have 3dpr choose logo3x.png -->
<img src="logo.png" srcset="logo2x.png 200w, logo3x.png 300w" sizes="100px" />
<!--
if you have 3dpr and sizes computes to 100px choose img2.jpg
but if you have 2dpr and sizes computes to 150px take img3.jpg
-->
<img src="img.jpg" srcset="img2.jpg 200w, img3.jpg 300w" maxdpr="2" sizes="100px" />
@aFarkas
aFarkas / maxres-.html
Created October 27, 2014 21:04
maxdpr
<!-
2x device and viewport 1000px: 2000.jpg (i.e.: 2dpr res)
3x device and viewport 1000px: 2000.jpg (i.e.: 2dpr res) <- constrained
3x device and viewport 1500px: 3000.jpg (i.e.: 2dpr res) <- constrained
->
<img srcset="500.jpg 500w, 1000.jpg 1000w, 1500.jpg 1500w, 2000.jpg 2000w, 3000jpg 3000w, 4000jpg 4000w" maxdpr="2" sizes="100vw" />
@aFarkas
aFarkas / pic.html
Last active September 13, 2015 20:44
pic
<picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source srcset="runner-wide.jpg" media="(min-width: 1000px)" />
<source srcset="runner-narrow.jpg" media="(min-width: 600px)" />
<!--[if IE 9]></video><![endif]-->
@aFarkas
aFarkas / sizes-detection.js
Last active October 19, 2015 10:50
(function(){
'use strict';
var width2 = 'data:image/gif;base64,R0lGODlhAgABAPAAAP///wAAACH5BAAAAAAALAAAAAACAAEAAAICBAoAOw==';
var width1 = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
var img = document.createElement('img');
var test = function(){
var width = img.width;
if(width == 2){
alert('your browser support sizes');
@aFarkas
aFarkas / asyncready.js
Last active January 3, 2016 21:08
<script async="">
/*
asyncReady('jQuery', function(fn){
console.log('jQuery found', fn)
});
asyncReady('jQuery.ui', function(fn){
console.log('jQuery found', fn)
});
*/
window.asyncReady = (function(){
var readys = {};
@aFarkas
aFarkas / pf-size.js
Created February 12, 2016 07:54
/*! Picturefill - v3.0.2 - 2016-02-02
* http://scottjehl.github.io/picturefill
* Copyright (c) 2016 https://github.com/scottjehl/picturefill/blob/master/Authors.txt; Licensed MIT
*/
!function(a){var b=navigator.userAgent;a.HTMLPictureElement&&/ecko/.test(b)&&b.match(/rv\:(\d+)/)&&RegExp.$1<45&&addEventListener("resize",function(){var b,c=document.createElement("source"),d=function(a){var b,d,e=a.parentNode;"PICTURE"===e.nodeName.toUpperCase()?(b=c.cloneNode(),e.insertBefore(b,e.firstElementChild),setTimeout(function(){e.removeChild(b)})):(!a._pfLastSize||a.offsetWidth>a._pfLastSize)&&(a._pfLastSize=a.offsetWidth,d=a.sizes,a.sizes+=",100vw",setTimeout(function(){a.sizes=d}))},e=function(){var a,b=document.querySelectorAll("picture > img, img[srcset][sizes]");for(a=0;a<b.length;a++)d(b[a])},f=function(){clearTimeout(b),b=setTimeout(e,99)},g=a.matchMedia&&matchMedia("(orientation: landscape)"),h=function(){f(),g&&g.addListener&&g.addListener(f)};return c.srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKA