Skip to content

Instantly share code, notes, and snippets.

Frederik Ring m90

View GitHub Profile
@m90
m90 / gist:3860fbf63c9522168a33ec401ec07f0f
Created Apr 7, 2016 — forked from clintel/gist:1155906
Fenced code in bullet lists with GitHub-flavoured MarkDown??
View gist:3860fbf63c9522168a33ec401ec07f0f

Fenced code blocks inside ordered and unordered lists

  1. This is a numbered list.

  2. I'm going to include a fenced code block as part of this bullet:

    Code
    More Code
    
@m90
m90 / randy.js
Last active Dec 20, 2015
Simple canvas spinner animation with gif fallback and all CSS included in a single file
View randy.js
/* $.randy - Simple canvas spinner animation with gif fallback and all CSS included - written by Frederik Ring (frederik.ring@gmail.com) */
/* Copyright (c) 2013 Frederik Ring */
/* Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: */
/* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. */
/* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR AN
@m90
m90 / featuretest.js
Created Jun 17, 2013
Feature testing the browser's ability to use video as source for canvas operation (slightly broken)
View featuretest.js
var v = document.createElement('video');
var feature = false;
if (v.canPlayType('video/mp4') == 'probably'){
v.src = 'data:video/mp4;base64,AAAAHGZ0eXBtcDQyAAAAAG1wNDJpc29tYXZjMQAAAz5tb292AAAAbG12aGQAAAAAzaNacc2jWnEAAV+QAAFfkAABAAABAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAAAGGlvZHMAAAAAEICAgAcAT////3//AAACQ3RyYWsAAABcdGtoZAAAAAHNo1pxzaNacQAAAAEAAAAAAAFfkAAAAAAAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAEAAAABAAAAAAAd9tZGlhAAAAIG1kaGQAAAAAzaNacc2jWnEAAV+QAAFfkFXEAAAAAAAhaGRscgAAAAAAAAAAdmlkZQAAAAAAAAAAAAAAAAAAAAGWbWluZgAAABR2bWhkAAAAAQAAAAAAAAAAAAAAJGRpbmYAAAAcZHJlZgAAAAAAAAABAAAADHVybCAAAAABAAABVnN0YmwAAACpc3RzZAAAAAAAAAABAAAAmWF2YzEAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAEAAQAEgAAABIAAAAAAAAAAEOSlZUL0FWQyBDb2RpbmcAAAAAAAAAAAAAAAAAAAAAAAAY//8AAAAxYXZjQwH0AAr/4QAZZ/QACq609NQYBBkAAAMAAQAAAwAKjxImoAEABWjOAa8gAAAAEmNvbHJuY2xjAAYAAQAGAAAAGHN0dHMAAAAAAAAAAQAAAAUAAEZQAAAAKHN0c3oAAAAAAAAAAAAAAAUAAAIqAAAACAAAAAgAAAAIAAAACAAAAChzdHNjAAAAAA
@m90
m90 / css
Created Sep 21, 2012
Voronianski Color Picker
View css
* {
margin: 0;
padding: 0;
}
body {
background: #f9f9f9;
color: #666;
font: 11px/14px Arial, Helvetica, sans-serif;
@m90
m90 / gist:3760145
Created Sep 21, 2012
seeThru play video on hover
View gist:3760145
$(document).ready(function(){
//see http://api.jquery.com/hover/ for info on .hover()
$('#video').seeThru({start:'external'}).hover(function(){
//handler for mouseover
this.play();
}, function(){
//handler for mouseout
this.pause();
@m90
m90 / matchMedia version
Created Apr 24, 2012
modernizr media query testing and hair pulling
View matchMedia version
window.matchMedia = window.matchMedia || (function(doc, undefined){
var bool,
docElem = doc.documentElement,
refNode = docElem.firstElementChild || docElem.firstChild,
// fakeBody required for <FF4 when executed in <head>
fakeBody = doc.createElement('body'),
div = doc.createElement('div');
div.id = 'mq-test-1';
View gist:2469449
/**
/
/ Additional Gist for: https://github.com/m90/jquery-seeThru
/
/ Setup:
/ var video is the <video> element containing the source data
/ var buffer is a hidden <canvas> element of the same width and height as the same video
/ var display is the <canvas> element used for actual display (it has the same width as the other elements, but is halved in height)
/ var dimensions is an object containing the target .width and .height of the video
/
You can’t perform that action at this time.