Skip to content

Instantly share code, notes, and snippets.

Christian Fleschhut cfleschhut

View GitHub Profile
@cfleschhut
cfleschhut / index.html
Last active Jun 2, 2017
Animated image fade-in
View index.html
<div class="content">
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error velit in, enim voluptatum placeat, esse officiis dicta, dignissimos sapiente ipsum aut. Itaque ipsa magnam sint aspernatur illum, sed libero vel.</p>
<h2>Lorem ipsum dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error velit in, enim voluptatum placeat, esse officiis dicta, dignissimos sapiente ipsum aut. Itaque ipsa magnam sint aspernatur illum, sed libero vel. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error velit in, enim voluptatum placeat, esse officiis dicta, dignissimos sapiente ipsum aut. Itaque ipsa magnam sint aspernatur illum, sed libero vel.</p>
<p class="placeholder"></p>
<p>
<img src="http://static.highsnobiety.com/wp-content/uploads/2016/10/27194553/Colette-Coach-Casetify-7-640x427.jpg" data="inview-fading">
</p>
@cfleschhut
cfleschhut / example.html
Created Jan 25, 2012
Examples for: querySelector, elem.matchesSelector, elem.classList, elem.nextElementSibling, DOMContentLoaded, document.readyState
View example.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>NetTuts: From jQuery to JavaScript</title>
<script type="text/javascript">
var addEvent = (function () {
var filter = function(el, type, fn) {
for ( var i = 0, len = el.length; i < len; i++ ) {
View railstutorial.rb
# Ruby classes
# Class inheritance
class Word < String
def palindrome?
self == self.reverse
end
end
@cfleschhut
cfleschhut / index.html
Created Sep 11, 2011
jQuery Mobile Test [+ Geolocation, + Local Storage]
View index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>t3n jQuery Mobile Geolocation</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.css" />
<script src="http://code.jquery.com/jquery-1.6.2.js"></script>
<script src="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.js"></script>
<script type="text/javascript">
View fiddle.css
body { font: 250%/1.2 sans-serif; background: #eee; }
a { color: #fff; text-decoration: none; outline: none; }
.btn {
display: inline-block;
border-radius: 8px;
box-shadow: 0 8px 0 #1a74a1,
0 15px 20px rgba(0, 0, 0, 0.35);
-moz-transition: box-shadow 0.2s ease-in-out;
-webkit-transition: box-shadow 0.2s ease-in-out;
}
View fiddle.css
body {
margin: 0; padding: 0; background: #eee; color: #444;
}
#container {
width: 320px; height: 300px;
background: #fff; margin: 20px auto; padding: 30px 0;
-webkit-perspective: 600;
}
#card {
width: 200px; height: 300px;
@cfleschhut
cfleschhut / fiddle.css
Created Jul 15, 2011
Test: jsFiddle GitHub Integration
View fiddle.css
body { background: url(http://www.themaninblue.com/experiment/Cubescape/images/grid.gif); }
#box {
position: absolute;
}
.top {
width: 20px; height: 20px; background: hsl(40, 85%, 70%);
-moz-transform: rotate(45deg) skew(-15deg, -15deg);
-webkit-transform: rotate(45deg) skew(-15deg, -15deg);
}
.left {
View learnjs.org.js
// Getting an Object’s enumerable properties (ES5)
var obj = {};
Object.defineProperty(obj, "foo", { value: 2, enumerable: true });
Object.defineProperty(obj, "bar", { value: 3, enumerable: true });
Object.defineProperty(obj, "baz", { value: 4, enumerable: false });
Object.keys(obj).forEach(function(key) {
console.log(key, obj[key]);
});
@cfleschhut
cfleschhut / getDataURL.js
Created Jun 24, 2011
Quick base64 image encoding
View getDataURL.js
// adjust image selector in fn-call
// and run this from the (firebug, etc.) console
(function(imgObj) {
var imgsrc = imgObj.src;
var canvas = document.createElement("canvas"),
ctx = canvas.getContext("2d");
canvas.width = imgObj.width;
canvas.height = imgObj.height;
var newimg = new Image();
newimg.src = imgsrc;
@cfleschhut
cfleschhut / sandbox.js
Created Jun 5, 2011
JavaScript Snippets: Augmented Native Objects
View sandbox.js
String.augmentedProperties = [];
if (!String.prototype.camelize) {
String.prototype.camelize = function() {
return this.replace(/(\s)([a-zA-Z])/g, function(str, p1, p2) {
return p2.toUpperCase();
});
};
String.augmentedProperties.push("camelize");
}
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.