Skip to content

Instantly share code, notes, and snippets.

View arielsalminen's full-sized avatar
🌸

Ariel Salminen arielsalminen

🌸
955 followers · 100 following
View GitHub Profile
@arielsalminen
arielsalminen / fixPageVisibility.js
Created December 12, 2014 12:07
Fix iOS7 & iOS8 page visibility
var pageVisibilityTimer = false;
function isIOS7orNewer() {
return (/(iphone|ipad|ipod).+(os\s7|os\s8)/i).test(navigator.userAgent);
}
function pageVisibilityFix() {
pageVisibilityTimer = window.setInterval(function() {
window.scrollTo(document.body.scrollLeft, document.body.scrollTop);
}, 500);
@arielsalminen
arielsalminen / ranking.js
Created November 3, 2014 18:23
/*!
* Upstatic string ranking algorithm v1.0
* (A port of the Quicksilver string ranking algorithm)
*
* http://upstatic.io
*/
String.prototype.score = function (abbreviation) {
@arielsalminen
arielsalminen / AutoSuggest.js
Last active August 29, 2015 14:08
//= require "ranking"
/*!
* Upstatic AutoSuggest v1.0
* http://upstatic.io
*/
(function (window, document, undefined) {
"use strict";
@arielsalminen
arielsalminen / mqs.scss
Last active August 29, 2015 14:06
Media Queries
body {
@media (max-width: em(319)) { & { font-size: percentage(14/16) }}
@media (min-width: em(400)) { & { font-size: percentage(18/16) }}
@media (min-width: em(450)) { & { font-size: percentage(19/16) }}
@media (min-width: em(500)) { & { font-size: percentage(20/16) }}
@media (min-width: em(1100)) and (min-height: em(750)) { & { font-size: percentage(21/16) }}
@media (min-width: em(1150)) and (min-height: em(850)) { & { font-size: percentage(22/16) }}
@media (min-width: em(1200)) and (min-height: em(900)) { & { font-size: percentage(23/16) }}
@media (min-width: em(1250)) and (min-height: em(950)) { & { font-size: percentage(24/16) }}
@media (min-width: em(1300)) and (min-height: em(1000)) { & { font-size: percentage(25/16) }}
@arielsalminen
arielsalminen / converts-webfont-to-base64.js
Last active August 28, 2020 06:07
Convert Google WOFF font to base64 format and inline to <head> of document
// Get binary file using XMLHttpRequest
function getBinary(file) {
var xhr = new XMLHttpRequest();
xhr.open("GET", file, false);
xhr.overrideMimeType("text/plain; charset=x-user-defined");
xhr.send(null);
return xhr.responseText;
}
// Base64 encode binary string
@arielsalminen
arielsalminen / iOS8-scroll-event-test.html
Created August 25, 2014 14:13
iOS 8 Safari doesn’t disable scroll events anymore (A test page).
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>iOS 8 scrolls</title>
<meta name="viewport" content="width=device-width">
</head>
<body style="min-height: 20000px;">
<div class="scroller" style="text-align: center; line-height: 4em; position: fixed; top: 0; left: 0; right: 0; height: 4em; background: red; color: #fff; font-family: sans-serif;">We’re here.</div>
<script>
@arielsalminen
arielsalminen / config.cson
Last active August 29, 2015 14:05
My Atom editor settings, preview: https://dl.dropboxusercontent.com/u/2206960/atom.jpg In addition you’ll need the following free fonts: "Input Mono Regular" & "Input Sans Regular" from http://input.fontbureau.com/download/
'editor':
'lineHeight': 1.45
'softWrap': true
'normalizeIndentOnPaste': true
'tabLength': 2
'preferredLineLength': 100
'invisibles':
'cr': '↩'
'eol': ''
'space': '·'
@arielsalminen
arielsalminen / sticky-nav.js
Last active April 27, 2016 12:26
Simple sticky nav in plain JS
// Simple sticky nav in plain JS
// p.s. this is just a short example, you should remember to debounce the scroll event ;-)
if ("addEventListener" in window && "classList" in document.documentElement) {
var element = document.getElementById("nav"),
offset = element.offsetTop;
window.addEventListener("scroll", function() {
if (offset < window.pageYOffset) {
element.classList.add("fixed");
@arielsalminen
arielsalminen / jsonp.js
Created April 23, 2013 16:18
http://stackoverflow.com/questions/4935632/how-to-parse-json-in-javascript http://snook.ca/archives/javascript/going-simple-with-javascript http://sharedfil.es/js-48hIfQE4XK.html http://snook.ca/archives/javascript/your_favourite_1
// JSON example stuff
json = {
"image": "logo.jpg",
"url": "http://viljamis.com/"
};
// Feature detect querySelectorAll
if (document.querySelectorAll) {
// Callback function which is executed after the JSONP call
@arielsalminen
arielsalminen / gist:5432823
Created April 22, 2013 06:27
Responsive-nav.js together with other jQuery plugins/jQuery library.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Responsive Nav with jQuery</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="styles.css">
<script src="jquery.js"></script>
<script src="responsive-nav.js"></script>
<script src="responsive-slides.js"></script>